[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.