SVG works in all browsers where this would work (modulo some incompatibilities with advanced effects like filters), is easy to create in a graphics application, is animatable (with a few more caveats, but fewer than trying to animate his version), is resolution independent, adds almost nothing to the file-size (as long as your image is 'vector'ish), and is less likely to partially degrade in embarrassing ways (important to most brands, who'd rather not show the logo than have it massacred).
I'm trying not to sound know-it-all and dismissive, but I can't help but feel a 'front-end fanatic' should use the right tool for the job. Or at least be clear that this is a deliberate 'Everest' project, not something with 'pros' that suggest a recommendation.
Is svg considered black magic, or old tech, or something? Why does it so regularly seem to be ignored in favour of reinventing the wheel? There was a whole icon-font made with CSS+HTML on HN a few months ago that seemed to be a similar exercise in willful self-torture.
As for the author's point that he needed to animate the logo ... SVG2 works on unifying CSS and SVG animation. Currently the options are either SMIL (which won't work in IE) or JS (which may have other unpleasant properties).
Interestingly, most things coming from CSS (not just animation) are quite inferior to what SVG already provided. That's there will be unification is mostly a concession to the fact that things haven't been implemented by browser vendors historically and users seem to like CSS solutions better than SVG these days.
You would think he would put his money where his mouth is and convert all the diagrams and vector graphics into HTML/CSS but deep down he knows it's just ridiculous and excruciatingly impractical.
Especially because a designer might tell me to replace the logo in a year and I don't want to rewrite all the CSS for it if I can just replace it with a new SVG he will provide ;).
Had he used values in EMs instead of pixels, he could just set different font-sizes to different instances of the logo.
The way is done, you get the logo in only one size. If you want to use several sizes, you need to create some mixin, creating CSS duplicity, etc.
So, even if we all agreed that CSS-based vector graphics are cool (which we don't), this should have been done with relative measures, not absolute. This way this is not very practical.
From looking at the logo the elements #filler and ::after wouldn't change size with just the font-size property alone.
Also the author doesn't say he wanted several sizes of the logo - he just wasn't sure which size he wanted.
I really do not understand why these posts get so much attention.
It's an inappropriate use of the technology.
I think it's funny people bashing this preaching SVG etc. From a SASS or Single page website I think this approach would be fairly nominal. Just as an experiment use an SVG vs CSS on iOS emulator and watch the memory usage - you'll see what I mean.
In case anyone was wondering.
