Choosing between CSS and SVG (Part 2/2)

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.

CSS is easier to organize.

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

<svg height="210" width="500">
    <circle cx="150" cy="250" r="140" stroke="green" stroke-width="4" fill="yellow" />
    <rect width="300" height="100" stroke="green" stroke-width="4" fill="red" />
    <line x1="0" y1="10" x2="200" y2="200" stroke="blue" stroke-width="2" />
    <line x1="10" y1="20" x2="100" y2="200" stroke="blue" stroke-width="2" />
    <line x1="0" y1="30" x2="200" y2="200" stroke="blue" stroke-width="2" />
    <line x1="10" y1="40" x2="100" y2="200" stroke="blue" stroke-width="2" />
    <line x1="0" y1="50" x2="200" y2="200" stroke="blue" stroke-width="2" />
    <line x1="10" y1="60" x2="100" y2="200" stroke="blue" stroke-width="2" />
    <line x1="0" y1="70" x2="200" y2="200" stroke="blue" stroke-width="2" />
</svg>

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

<style>
    .myStyle
    {
        font-family: arial;
        font-size: 16px;
    }

    .myStyle h1
    {
        font-size: 1.5em;
    }

    .myStyle ul li
    {
        font-size: 0.85em;
        font-weight: bold;
    }
</style>

<div class="myStyle">
    <h1>Header</h1>
    <p>Sample text</p>
    <ul>
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3</li>
        <li>Line 4</li>
    </u>
</div>

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.

<style>
    svg
    {
        width: 500px;
        height: 210px;
    }

    svg circle
    {
        stroke: green;
        stroke-width: 4;
        fill: yellow;
    }

    svg rect
    {
        stroke: green;
        stroke-width: 4;
        fill: red;
    }

    svg line
    {
        stroke: blue;
        stroke-width: 2;
    }
</style>

<svg height="210" width="500">
    <circle cx="150" cy="250" r="140" />
    <rect width="300" height="100" />
    <line x1="0" y1="10" x2="200" y2="200" />
    <line x1="10" y1="20" x2="100" y2="200" />
    <line x1="0" y1="30" x2="200" y2="200" />
    <line x1="10" y1="40" x2="100" y2="200" />
    <line x1="0" y1="50" x2="200" y2="200" />
    <line x1="10" y1="60" x2="100" y2="200" />
    <line x1="0" y1="70" x2="200" y2="200" />
</svg>

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.

Stylishly yours,
T___T