Win a copy of Android Programming: The Big Nerd Ranch Guide this week in the Android forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Practical SVG: where goest the styles?  RSS feed

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65971
140
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author
Greenhorn
Posts: 7
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:



or like:



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
Author and ninkuma
Marshal
Posts: 65971
140
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Chris Coyier wrote:It's more complicated, I'm afraid.

Isn't it always.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65971
140
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.)
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!