5 ms·

From personal experience and having been burned by odd SVG bugs too many times over the years, a dumb image is simple, it works and you know that it works. I on

From personal experience and having been burned by odd SVG bugs too many times over the years, a dumb image is simple, it works and you know that it works. I only reach for SVG when I need to do something that other formats cannot.

Hendrikto 3y ago
> I only reach for SVG when I need to do something that other formats cannot. Like rendering actual text?
- jacobolus 3y ago
  From one implementation to another and depending on the way the SVG was encoded, text in an SVG often does not look the same for different viewers. This can seriously mess up the layout of diagrams, etc.
  - pennomi 3y ago
    Plus SVG can’t properly wrap text, which matters for some use cases.
    - int_19h 3y ago
      If you're rendering a PNG, you're already doing layout, so you might as well still do it but at least keep the individual glyphs as, well, glyphs (so that they scale to high DPI etc).
- dunham 3y ago
  At one point, SVG couldn't do that. It was a long time ago, but I recall not being able to use SVG to render sideways text because the text tag wasn't supported by browsers. For IE, we had a PNG font that we displayed slices of, and then we migrated to rotation css as various browsers supported it. (I think IE was the last holdout, but it's been a while.)
kungreke 3y ago
Exact same reason jpgs and gifs were the standard for such a long time.
- vundercind 3y ago
  Vector graphics were (are) expensive on the client side. Part of why we didn’t use them is that they could be noticeably slow.
  - gpjanik 3y ago
    That's just incorrect. Every letter you're looking at now is vector and no different in terms of performance of rendering to SVG.
    - vundercind 3y ago
      I was there. Vector graphics were avoided on the Web because they made pages perform poorly. The advice was widespread, and it was easy to see why if you did encounter an SVG on the Web. We couldn’t draw with CSS yet, but in the earliest days of that being possible, it was slow, too. Moore’s law outran those problems, but I suspect our collectively dropping the old “raster = considerate to your user” attitude (including and especially in what we do with CSS these days) is an under-appreciated factor in the astonishingly terrible performance of the modern Web—Javascript gets most of the blame, but I think a lot of it’s giant CSS engines and doing so very much more runtime rendering on the client.
    - dhosek 3y ago
      Not quite. A type renderer will cache the bitmaps for each individual letter so it only needs to calculate the vector to bitmap activity once for each individual glyph. This will also be the case if your SVG renders text as text (potentially with embedded fonts), but if it instead has that type as outlines then all the outlines need to be rendered and there’s no cache saving for typesetting, e.g., XXX
      - graftak 3y ago
dylan604 3y ago
My experience as well. Using an SVG as the source of an <img> element seems to have less issues, but that essentially reduces the benefit of an SVG to just a small file size image without scaling issues. To use an SVG as an actual element, it gets way more complicated than your average Wordpress user is going to want to deal with. It's one of those very interesting formats that can do some very impressive things...that very people want/need/use.
- int_19h 3y ago
  "Without scaling issues" is a huge benefit in its own right, though. That alone is a good reason to use it.
gwern 3y ago
So many bugs. The background will break in dark-mode, or the foreground. The bounding box will cut off the image contents. You export in SVG to get nice text rendering and everything carefully aligned, and it looks in Chromium the way it did in Inkscape... but then in Firefox everything is misaligned, defeating the point compared to if you had just used a PNG. It doesn't work as a social media thumbnail. And so on.
- deleted 3y ago
  [deleted]
- i80and 3y ago
  So for a contrasting anecdote, we've used SVGs for years in production on a high traffic site, using an automated Inkscape pipeline to turn text into plain paths, and it's worked perfectly
  - simpaticoder 3y ago
    The decision then is between building "an automated Inkscape pipeline to turn text into plain paths" and creating a PNG.
    - i80and 3y ago
      For diagrams, PNGs just are not a good choice. We did this as a response to mainstreaming high dpi displays back when Retina hit the market. It's been a big success. The resulting SVGs are significantly smaller in filesize than PNG, and are crisp and readable no matter how the user zooms in. The path conversion is a single inkscape command line invocation. It's worth doing. If it comes out of a vector application, you likely don't want to rasterize it for distribution.
- gwern 3y ago
  (These are just the ones I recall offhand from personal experience on gwern.net using SVG in quite limited ways, mostly just for the link-icons.)

Hendrikto 3y ago

> I only reach for SVG when I need to do something that other formats cannot. Like rendering actual text?

jacobolus 3y ago
From one implementation to another and depending on the way the SVG was encoded, text in an SVG often does not look the same for different viewers. This can seriously mess up the layout of diagrams, etc.
- pennomi 3y ago
  Plus SVG can’t properly wrap text, which matters for some use cases.
  - int_19h 3y ago
    If you're rendering a PNG, you're already doing layout, so you might as well still do it but at least keep the individual glyphs as, well, glyphs (so that they scale to high DPI etc).
dunham 3y ago
At one point, SVG couldn't do that. It was a long time ago, but I recall not being able to use SVG to render sideways text because the text tag wasn't supported by browsers. For IE, we had a PNG font that we displayed slices of, and then we migrated to rotation css as various browsers supported it. (I think IE was the last holdout, but it's been a while.)

kungreke 3y ago

Exact same reason jpgs and gifs were the standard for such a long time.

vundercind 3y ago
Vector graphics were (are) expensive on the client side. Part of why we didn’t use them is that they could be noticeably slow.
- gpjanik 3y ago
  That's just incorrect. Every letter you're looking at now is vector and no different in terms of performance of rendering to SVG.
  - vundercind 3y ago
    I was there. Vector graphics were avoided on the Web because they made pages perform poorly. The advice was widespread, and it was easy to see why if you did encounter an SVG on the Web. We couldn’t draw with CSS yet, but in the earliest days of that being possible, it was slow, too. Moore’s law outran those problems, but I suspect our collectively dropping the old “raster = considerate to your user” attitude (including and especially in what we do with CSS these days) is an under-appreciated factor in the astonishingly terrible performance of the modern Web—Javascript gets most of the blame, but I think a lot of it’s giant CSS engines and doing so very much more runtime rendering on the client.
  - dhosek 3y ago
    Not quite. A type renderer will cache the bitmaps for each individual letter so it only needs to calculate the vector to bitmap activity once for each individual glyph. This will also be the case if your SVG renders text as text (potentially with embedded fonts), but if it instead has that type as outlines then all the outlines need to be rendered and there’s no cache saving for typesetting, e.g., XXX
    - graftak 3y ago

dylan604 3y ago

My experience as well. Using an SVG as the source of an <img> element seems to have less issues, but that essentially reduces the benefit of an SVG to just a small file size image without scaling issues. To use an SVG as an actual element, it gets way more complicated than your average Wordpress user is going to want to deal with. It's one of those very interesting formats that can do some very impressive things...that very people want/need/use.

int_19h 3y ago
"Without scaling issues" is a huge benefit in its own right, though. That alone is a good reason to use it.

gwern 3y ago

So many bugs. The background will break in dark-mode, or the foreground. The bounding box will cut off the image contents. You export in SVG to get nice text rendering and everything carefully aligned, and it looks in Chromium the way it did in Inkscape... but then in Firefox everything is misaligned, defeating the point compared to if you had just used a PNG. It doesn't work as a social media thumbnail. And so on.

deleted 3y ago
[deleted]
i80and 3y ago
So for a contrasting anecdote, we've used SVGs for years in production on a high traffic site, using an automated Inkscape pipeline to turn text into plain paths, and it's worked perfectly
- simpaticoder 3y ago
  The decision then is between building "an automated Inkscape pipeline to turn text into plain paths" and creating a PNG.
  - i80and 3y ago
    For diagrams, PNGs just are not a good choice. We did this as a response to mainstreaming high dpi displays back when Retina hit the market. It's been a big success. The resulting SVGs are significantly smaller in filesize than PNG, and are crisp and readable no matter how the user zooms in. The path conversion is a single inkscape command line invocation. It's worth doing. If it comes out of a vector application, you likely don't want to rasterize it for distribution.
gwern 3y ago
(These are just the ones I recall offhand from personal experience on gwern.net using SVG in quite limited ways, mostly just for the link-icons.)