Wow. I get the 'I want to climb Everest' idea of seeing if something can be done, and all props to mountaineers who make it, but this article reads as if the author is advocating this approach. Which would be a staggering waste of time and effort.

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.

Funny how svgs are last year when they havent nearly been tapped for their potential across the web yet. I have no desire to draw graphics with code. I appreciate innovation and experiments but I don't know it just looks like trying to make a tool work because you were too stubborn or didn't want to buy the right one

I won't say this isn't very clever, but how is it different (or dare I say better) then creating the entire logo with a random vector tool and then using it as a SVG? You can easily scale SVGs, they look great on HiDPI screens (what Apple calls Retina) and you don't need a bunch of random CSS (that probably won't ever change) cluttering your styling.

What is the bloody point when we have SVG?

I really do not understand why these posts get so much attention.

It's an inappropriate use of the technology.

To me this is impressive. I've used a ton of SVG's in the past and I'm always left at 90% of what I'd ideally want to accomplish. (I'm looking at you Android 4 and below...)

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.

Should have linked to the logo earlier in the post. It can be found here http://www.itseffortless.com/

> Scalable Vector CSS Graphics

In case anyone was wondering.

Hey hacker news, (I'm pretty new to this) how comes the title of my submission has been changed?

Good post. Easy to read.

He didn't discuss it in the post, but it's also being animated (the braces snap in around the filler, as seen when you load the page http://www.itseffortless.com). In this particular case, wouldn't it make sense to have everything in one place, rather than two SVGs and some CSS for animation? I guess it would be less CSS clutter, regardless. I'm not much of a front-end dev, who has to do some front-end work, so I like seeing counter-arguments to the cool, flashy stuff that I'll never be able to do.

Actually it is not very clever, pretty inflexible.

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.

Hey @MatekCopatek, it's not any better it's just a different way to make them.