4 ms·

css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I sai

by wentin 10y ago

css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.

pcwalton 10y ago
The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions. CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, because border painting involves fairly complex logic compared to drawing a path (and for example in Gecko you have to construct display list items for individual borders but not paths). But we're talking about really small differences: I highly doubt they matter in practice.
- wentin 10y ago
  this is awesome analyze, thanks!
  - nthcolumn 10y ago
    What about caching - is that an advantage over inline SVG? I imagine the css would compress better too? I'd like to see animated ones. Holy geocities! I have no clue how it works. Amazing.
    - pcwalton 10y ago
      CSS and SVG are cached the same way on disk.
kraftman 10y ago
You probably want 'arguably' here instead of 'argumentably.'
ysavir 10y ago
SVGs also have less chance of inhering unwanted code, typically. But this can vary with your CSS writing styles.
sly010 10y ago
> css icon has less code this is just not true. using svg you can have a single string describe an arbitrarily complex path. > the code is more editable also not true. they are both just text... > and managable how so? in svg you can group things, easily shuffle things around, save them in separate files and point to them. > argumentably better performance (because i haven't tested it) what does that even mean? loading time? rendering time? memory? Congratulations, there is some pretty cool wizardry going on in there, and it's undoubtedly fun, I just find your rationale for it completely made up. You still got my upvote though, just please don't say such unsubstantiated silly things. edit:formatting
- wentin 10y ago
  > css icon has less code this is just not true. using svg you can have a single string describe an arbitrarily complex path. reply: unless you count code by lines, but that single line of string for paths feels really really long and not readable. see below > the code is more editable <svg id="beard" data-name="beard 1" xmlns="http://www.w3.org/2000/svg" http://www.w3.org/2000/svg" width="14.096" height="4.063" viewBox="0 0 14.096 4.063"><title>Untitled-1</title><path d="M10.529,0.563a2.245,2.245,0,0,0-2.972,0,1.806,1.806,0,0,0,0,2.716c1.8,1.643,4.343.514,6.539-1.63C13.461,2.269,12.136,2.032,10.529.563Z" fill="#fff"/><path d="M3.567,0.563a2.245,2.245,0,0,1,2.972,0,1.806,1.806,0,0,1,0,2.716C4.741,4.922,2.2,3.793,0,1.649,0.635,2.269,1.959,2.032,3.567.563Z" fill="#fff"/></svg> vs. in css http://cssicon.space/#/icon/mustache-solid http://cssicon.space/#/icon/mustache-solid to change its shape you need to use illustrator for SVG vs. in css just some property change. Yes they are just text, but are you really smart enough to edit the above SVG code by hand? > and managable managable as you can have clean html, all you need is a div, vs. svg you have to insert the whole chunk of svg code in your html.(Using <img/> won't give you flexibility, svg has to be inline) you can have package tool to insert svg programmatically but when you just prototyping, not gonna do that whole process to just get some icon showing up. CSS ICON is grab and go icons. > arguably better performance (because i haven't tested it) It is not true rendering time wise, as someone else analyzed CSS need more rendering time. But you have less HTTP request comparing to icon fonts or external SVG files. Download time is faster
- wentin 10y ago

by wentin 10y ago

pcwalton 10y ago

The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions. CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, because border painting involves fairly complex logic compared to drawing a path (and for example in Gecko you have to construct display list items for individual borders but not paths). But we're talking about really small differences: I highly doubt they matter in practice.

wentin 10y ago
this is awesome analyze, thanks!
- nthcolumn 10y ago
  What about caching - is that an advantage over inline SVG? I imagine the css would compress better too? I'd like to see animated ones. Holy geocities! I have no clue how it works. Amazing.
  - pcwalton 10y ago
    CSS and SVG are cached the same way on disk.

kraftman 10y ago

You probably want 'arguably' here instead of 'argumentably.'

ysavir 10y ago

SVGs also have less chance of inhering unwanted code, typically. But this can vary with your CSS writing styles.

sly010 10y ago

> css icon has less code this is just not true. using svg you can have a single string describe an arbitrarily complex path. > the code is more editable also not true. they are both just text... > and managable how so? in svg you can group things, easily shuffle things around, save them in separate files and point to them. > argumentably better performance (because i haven't tested it) what does that even mean? loading time? rendering time? memory? Congratulations, there is some pretty cool wizardry going on in there, and it's undoubtedly fun, I just find your rationale for it completely made up. You still got my upvote though, just please don't say such unsubstantiated silly things. edit:formatting

wentin 10y ago
> css icon has less code this is just not true. using svg you can have a single string describe an arbitrarily complex path. reply: unless you count code by lines, but that single line of string for paths feels really really long and not readable. see below > the code is more editable <svg id="beard" data-name="beard 1" xmlns="http://www.w3.org/2000/svg" http://www.w3.org/2000/svg" width="14.096" height="4.063" viewBox="0 0 14.096 4.063"><title>Untitled-1</title><path d="M10.529,0.563a2.245,2.245,0,0,0-2.972,0,1.806,1.806,0,0,0,0,2.716c1.8,1.643,4.343.514,6.539-1.63C13.461,2.269,12.136,2.032,10.529.563Z" fill="#fff"/><path d="M3.567,0.563a2.245,2.245,0,0,1,2.972,0,1.806,1.806,0,0,1,0,2.716C4.741,4.922,2.2,3.793,0,1.649,0.635,2.269,1.959,2.032,3.567.563Z" fill="#fff"/></svg> vs. in css http://cssicon.space/#/icon/mustache-solid http://cssicon.space/#/icon/mustache-solid to change its shape you need to use illustrator for SVG vs. in css just some property change. Yes they are just text, but are you really smart enough to edit the above SVG code by hand? > and managable managable as you can have clean html, all you need is a div, vs. svg you have to insert the whole chunk of svg code in your html.(Using <img/> won't give you flexibility, svg has to be inline) you can have package tool to insert svg programmatically but when you just prototyping, not gonna do that whole process to just get some icon showing up. CSS ICON is grab and go icons. > arguably better performance (because i haven't tested it) It is not true rendering time wise, as someone else analyzed CSS need more rendering time. But you have less HTTP request comparing to icon fonts or external SVG files. Download time is faster
wentin 10y ago