999934 - consider having a way to reference an SVG document as a CSS image at a given resolution

Status: NEW

(Core :: SVG, defect)

Description

[Cameron McCormack (:heycam)]

An idea to reduce the memory overhead of SVG documents used as CSS images is to indicate somehow that the document will only ever be rendered at a particular resolution.  imagelib stuff can then get rid of the DOM backing the VectorImage and just retain the bitmap.  (This is only good if there's no animation in the document, too.)

One way to indicate this would be to specify the size to render the image at in the CSS property value somehow.  For example:

  background-image: rasterize(url(/my/icon.svg) 32px 32px);

Comment 1

[Jeremie Patonnier :Jeremie]

This is interesting to optimize static images. A few questions:

* Couldn't be a browser optimization done under the hood?
The less we have to bother author with such optimisation, the better. Eventually could we have the size to be optional and use intrinsic sizing, or use the background-sizing value to define the size of the raster image?

* Can we apply this to resample bitmap images as well? (Is it useful?)
This would be interesting when using large image that are resampled at a lower size. I'm thinking about such use case: http://filamentgroup.com/lab/rwd_img_compression/

* Do we have a spec proposal somewhere?
I think it could be part of "CSS Image Values and Replaced Content Module Level 4": http://dev.w3.org/csswg/css-images-4/

And I suggest a different (shorter) syntaxe:

  background-image: raster(/my/icon.svg)
  background-size: 32px 32px;

where raster() act like url() but retain only the resample/rasterized image.

It would also be possible to simply extend the syntaxe of the image() function, for example by adding a "rasterize" or "sample" tag to the existing function.

Comment 2

[Jeremie Patonnier :Jeremie]

Forgot to add the example with the extended image() syntaxe:

background-image: image(rasterize "/my/icon.svg");
background-size : 32px 32px;

Comment 3

[fantasai]

There's proposals for rendering an image at a particular resolution by adding a resolution value to the image() function. That allows explicitly specifying its intrinsic resolution. I don't think there's anything about the optimization use case, but then I don't think that is something the author should need to think about.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Jeremie Patonnier :Jeremie from comment #1)
> * Couldn't be a browser optimization done under the hood?
> The less we have to bother author with such optimisation, the better.
> Eventually could we have the size to be optional and use intrinsic sizing,
> or use the background-sizing value to define the size of the raster image?

I think seth is working on patches to do per-resolution caching of the rasterization of vector images, which should essentially avoid the need for authors to do this.  Seth probably knows the right bug numbers to point to.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.