[MatekCopatek]

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.

[amon41amarth]

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.

[MatekCopatek]

[SVG supports animations](https://css-tricks.com/guide-svg-animations-smil/) as well, so that's not much of a point. But yeah, I guess it's a matter of what you prefer. For "finished" assets such as logos, I prefer to have things as separated as possible, since they are usually final and just need to be included in the page, so I don't see any point in defining them in my CSS.

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 ;).

[amon41amarth]

TIL. That may go in my rather large to-learn list. And in line with the designer giving you a new logo, what about taking the SVCSSG logo and trying to put it in other places? I'm sure the marketing department would love to deal with that.

[deepflame]

In a project I worked on I used SVGs from the designer and animated them with Javascript (Velocity.js in this case). The trick here is to inline the SVG into the HTML page (can be done with a preprocessor). Then the SVG DOM nodes can be animated as you like.

[kolme]

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.

[denzelwigwig]

Not sure I agree with you.

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.

[callum_hart]

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

[MatekCopatek]

Aight, cool then, I probably read into the post title too much and thought I need to go replace my SVGs ;)

[callum_hart]

haha :)