4 ms·

I've been away from the frontlines of webdev for a few years now - is there a reason why we're not all using SVGs yet? Symbol fonts (even though I use them mys

I've been away from the frontlines of webdev for a few years now - is there a reason why we're not all using SVGs yet? Symbol fonts (even though I use them myself in native mobile apps) seem like a bridge hack, not a sustainable, long-term thing. It seems incredibly silly to model images as characters when we already have the concept of images built into HTML. I'd very happily ditch symbol fonts as soon as iOS supports SVGs...

robin_reala 14y ago
IE7 and 8 don’t support SVG - that’s the main reason.
- ygra 14y ago
  They have VML, which suffices for simple icons, though.
rjh29 14y ago
If you copy and paste the clock (or if a non-JS supporting screen reader or search engine encounters it), you get a time such as 12:04:37. That's pretty cool, and I'd be interested to know if SVG can do something similar.
- potatolicious 14y ago
  That seems to be an incredibly fringe use case to justify the "wrong" implementation (i.e., modeling images as text when your protocol already has affordances for images).
- cbr 14y ago
  With images you can use alt-text to support screen readers and search engines. I would be surprised if someone tried to copy-paste a clock, and if they did I think they would be expecting to get the picture and not a text representation of the time.
ohwp 14y ago
iOS does support SVG but I think it depends on the browser and how you embed it. Maybe this page will help: http://www.schepers.cc/svg/blendups/embedding.html http://www.schepers.cc/svg/blendups/embedding.html
- potatolicious 14y ago
  I meant more specifically native apps - Apple's built-in image classes do not support SVGs out of the box as a valid file type.
  - ohwp 14y ago
    Neither does Android. But for both Android and iOS there are libs that can convert SVG into usable objects. For example: https://github.com/SVGKit/SVGKit https://github.com/SVGKit/SVGKit
davej 14y ago
Also, font symbols generally have a much smaller file size than SVGs.
- ohwp 14y ago
  Are you sure? Compressing (deflate) image/svg+xml will make the file very small.
  - davej 14y ago
    Yes, even with compression. A GZIP'd SVG will be 2x or 3x the filesize (sometimes even more) of a GZIP'd TTF.
masklinn 14y ago
Individual SVG files take more bandwidth and requests than a single "iconic font" (SVG fragments are pretty much unsupported), and fonts can be hinted (though I've seen pretty little hinting for now) in order to alter the detail level as the font size increases. Pretty much the only drawback of iconic font is that they're uniform-color (or bicolor if you play with the background)
- skore 14y ago
  If you load them as an external file, yes. If you embed them, or use something like canvas - no.
  - masklinn 14y ago
    If you embed them you save on external requests and you blow up the host file's size instead, and hinder cacheability.
Chris_Newton 14y ago
is there a reason why we're not all using SVGs yet? In a word: hinting. For the same reasons that fonts designed for screen use are hinted, so it can be useful to hint icons that will be displayed at small sizes, and of course using a font format allows that but unfortunately SVG doesn’t. Other practical reasons can include the ability to apply things like CSS shadow effects consistently to both the icon and any label text next to it, and backward compatibility with older IE versions that don’t fully support SVG. Of course there are downsides as well. The use of tiny icons as UI elements tends to create more usability problems than it solves unless the icons are immediately recognisable, yet being restricted to the completely monochrome, flat appearance supported by font formats severely limits how distinctive you can make each icon. You also can’t swap out a highly detailed icon for a simplified version of the same idea at smaller sizes/lower resolutions. The article touches on these points, but SVG only really helps with the first one anyway. So personally I’m a bit of a sceptic about the whole icon fonts idea, but it does have some technical advantages over using SVG icons in the limited niche where the icon font technique applies.

robin_reala 14y ago

IE7 and 8 don’t support SVG - that’s the main reason.

ygra 14y ago
They have VML, which suffices for simple icons, though.

rjh29 14y ago

If you copy and paste the clock (or if a non-JS supporting screen reader or search engine encounters it), you get a time such as 12:04:37. That's pretty cool, and I'd be interested to know if SVG can do something similar.

potatolicious 14y ago
That seems to be an incredibly fringe use case to justify the "wrong" implementation (i.e., modeling images as text when your protocol already has affordances for images).
cbr 14y ago
With images you can use alt-text to support screen readers and search engines. I would be surprised if someone tried to copy-paste a clock, and if they did I think they would be expecting to get the picture and not a text representation of the time.

ohwp 14y ago

iOS does support SVG but I think it depends on the browser and how you embed it. Maybe this page will help: http://www.schepers.cc/svg/blendups/embedding.html http://www.schepers.cc/svg/blendups/embedding.html

potatolicious 14y ago
I meant more specifically native apps - Apple's built-in image classes do not support SVGs out of the box as a valid file type.
- ohwp 14y ago
  Neither does Android. But for both Android and iOS there are libs that can convert SVG into usable objects. For example: https://github.com/SVGKit/SVGKit https://github.com/SVGKit/SVGKit

davej 14y ago

Also, font symbols generally have a much smaller file size than SVGs.

ohwp 14y ago
Are you sure? Compressing (deflate) image/svg+xml will make the file very small.
- davej 14y ago
  Yes, even with compression. A GZIP'd SVG will be 2x or 3x the filesize (sometimes even more) of a GZIP'd TTF.

masklinn 14y ago

Individual SVG files take more bandwidth and requests than a single "iconic font" (SVG fragments are pretty much unsupported), and fonts can be hinted (though I've seen pretty little hinting for now) in order to alter the detail level as the font size increases. Pretty much the only drawback of iconic font is that they're uniform-color (or bicolor if you play with the background)

skore 14y ago
If you load them as an external file, yes. If you embed them, or use something like canvas - no.
- masklinn 14y ago
  If you embed them you save on external requests and you blow up the host file's size instead, and hinder cacheability.

Chris_Newton 14y ago

is there a reason why we're not all using SVGs yet? In a word: hinting. For the same reasons that fonts designed for screen use are hinted, so it can be useful to hint icons that will be displayed at small sizes, and of course using a font format allows that but unfortunately SVG doesn’t. Other practical reasons can include the ability to apply things like CSS shadow effects consistently to both the icon and any label text next to it, and backward compatibility with older IE versions that don’t fully support SVG. Of course there are downsides as well. The use of tiny icons as UI elements tends to create more usability problems than it solves unless the icons are immediately recognisable, yet being restricted to the completely monochrome, flat appearance supported by font formats severely limits how distinctive you can make each icon. You also can’t swap out a highly detailed icon for a simplified version of the same idea at smaller sizes/lower resolutions. The article touches on these points, but SVG only really helps with the first one anyway. So personally I’m a bit of a sceptic about the whole icon fonts idea, but it does have some technical advantages over using SVG icons in the limited niche where the icon font technique applies.