Practical SVG: where goest the styles?

[Bear Bibeault]

OK, styles inside the SVG files, or externally applied via CSS?

Embedded styles are more compact and (arguably) more modular. External styles are obviously more versatile.

Is one always better than the other? Are there cases where one should be used over the other? Cases where even a mix is practical?

[Chris Coyier]

Is one always better than the other?

It's more complicated, I'm afraid. There are a bunch of different ways to use SVG. Here's some:

1. <img src="image.svg">
2. Inline <svg>
3. <object>
4. <iframe>
5. CSS background-image: url("image.svg");

In which the story becomes...

1. You can't link to external styles.
2. Externally applied CSS works great!
3. You can link to external styles.
4. You can link to external styles.
5. You can't link to external styles.

External styles, by the way, specifically meaning linking out to a stylesheet from within the SVG syntax. Which you can do like this:

<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style8.css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="600px" height="600px" viewBox="-300 -300 600 600"   xmlns="http://www.w3.org/2000/svg" version="1.1"   xmlns:xlink="http://www.w3.org/1999/xlink">   <circle id="overlay" cx="0" cy="0" r="200"     stroke="none" fill="red"/> </svg>

or like:

<svg xmlns="http://www.w3.org/2000/svg">   <defs>     <link href="my-style.css" type="text/css" rel="stylesheet"           xmlns="http://www.w3.org/1999/xhtml"/>   </defs>   ... rest of document here ... </svg>

I'd probably avoid it, in general. Rather, I'd:

1. Not use styles at all, use presentation attributes (https://css-tricks.com/presentation-attributes-vs-inline-styles/)
2. If you need styles, put them in a <style> block instead.

Or my favorite:

Use inline <svg> and just style along with everything else on your site, normally with your sites main stylesheets.

[Bear Bibeault]

Chris Coyier wrote:It's more complicated, I'm afraid.

Isn't it always.

[Bear Bibeault]

Chris Coyier wrote:meaning linking out to a stylesheet from within the SVG syntax. Which you can do like this:

Ah! That's new to me. Thanks.

But yeah,

Or my favorite:

Use inline <svg> and just style along with everything else on your site, normally with your sites main stylesheets.

this is what I tend to do.

(Except for Google map icons.)