Posts for 2021

CSS and SVG are both non-programming languages that are part of web development. They can be embedded into HTML to create great visual effects.

While there's a certain amount of overlap, for the most part their uses cases are quite separate and distinct. SVG is mostly used for graphics, and CSS for layout. But there will be times when either CSS or SVG could do the job, and the inevitable question would be - which should you use?

Here, I'm going to take a look at each, and outline the situations where you should choose one over the other.

SVG (Scalable Vector Graphics)

Use Case. SVG is used for graphics. Be it charts and graphs, icons or fancy animations, SVG works great. CSS can do the same thing, yes... and in simple cases perhaps even outperforms SVGs.

But here's the thing: CSS graphics are mostly rectangular and square divs. Even ovals and circles are rectangular or square divs with rounded corners. It's still possible to render complex shapes from CSS, but you have to jump through an awful lot of hoops to do it. Don't get me wrong; it can be fun. But also pretty frustrating.

SVG, on the other hand, has a path tag that was made for complex shapes. Add Bezier Curves to the mix and you have a very potent tool. Animations and transformations are also relatively simple to create.


Using SVG for intricate graphic work is a much more attractive option than CSS, at least where capability and ease of use is concerned.

Learning Curve. Chances are that you already know HTML. And if you do, learning SVGs is a breeze. Everything about embedding SVGs in HTML5 is about XML tags. Circles, ellipses, rectangles, lines, paths, animations... all XML tags with attributes to specify appearance and behavior. And in case you don't feel like learning all of that, there are always SVG generators.

You also need to know HTML in order to use CSS, but that's where the resemblance ends. CSS is nothing like HTML. Some parts of CSS are easy enough to master. The rest is hellishly difficult, especially when you're trying to use CSS to do the things that SVG does.

Purely absolute positioning. Anyone who has ever used CSS and been frustrated about the differences between relative and absolute positioning, will love this part about SVGs. Just about everything is absolutely positioned from the top left corner of the SVG. There are no questions about relative positioning from one element to another. Overlapping is also easier because whatever tag is declared last, always goes on top.

Now, let's take a look at CSS.

CSS (Cascading Style Sheets)

CSS has been around a long time, and is really versatile. I picked it up almost fifteen years ago, and to this day I don't think I've managed to plumb even half of its depths. As browsers evolve, so, too, has CSS.

Use Case. For styling pages, specifying layout and such, CSS is the tool to use, no question. And that's because CSS is the only tool that can be used for this, right now. You can't use SVG to style a page unless your entire page is an SVG, which would be really bad for SEO.

Cross-browser compatibility. CSS has had issues with cross-browser performance and capability, but most browsers do support CSS, albeit with variations in implementation that will be worked out over time. Not to say CSS isn't sometimes a pain in the ass in this regard, but SVG can be much worse. Internet Explorer, in particular, doesn't render SVG well.

Power. The power of CSS isn't in its versatility (though that certainly doesn't hurt), but its organizational ability. With judicious use of CSS rules, you can organize site structure in such a way that maintaining the look and feel, or even making wholesale changes, is much less hassle than it needs to be.


SVG, on its own, does not have that capability. Maintenance can become a right mess.


Compared to CSS, which can cascade rules for maximum effect.


Preprocessor languages such as LESS and SASS add even more power to this organizational ability, providing added oomph through mixins, variables and hierarchy.

My recommendation

Don't choose one over the other. Learn both. SVG can be styled using CSS, and it's a killer combo - the power of SVG coupled with the organizational abilities of CSS.



I might be a bit biased here because that's the route I took, but my recommendation would be to learn CSS first because the use case is more prevalent. After you've mastered a certain amount of CSS, using it to complement SVG should be a breeze.