How to style SVG with external CSS?

by

Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......."/>
    </g>
  </svg>
</html>

If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.

You can do it with a style tag:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.

If you’re not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.

More Related Contents:

  1. Fill SVG path element with a background-image
  2. How to modify the fill color of an SVG image when being served as background image?
  3. SVG drop shadow using css3
  4. How to create a circle with links on border side
  5. How to apply a style to an embedded SVG?
  6. SVGs not scaling properly in IE – has extra space
  7. Add a background image (.png) to a SVG circle shape
  8. border curved css – circle with curved end
  9. Is type=”text/css” necessary in a tag?
  10. html/css hexagon with image inside
  11. Setting transform-origin on SVG group not working in Firefox
  12. Can you link to a CSS file from an email?
  13. Circular percent progress bar
  14. Linking to CSS in an SVG embedded by an IMG tag
  15. Creating a ‘New’ spiky label with 24 or above point burst
  16. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  17. How to cut a circular part from an image?
  18. How to calculate required hue-rotate to generate specific colour?
  19. Making an svg image object clickable with onclick, avoiding absolute positioning
  20. Draw double curved item with beveled edges
  21. How to get rid of extra space below svg in div element
  22. How to get ScrollBars in SVG?
  23. CSS transform origin issue on svg sub-element
  24. Manipulating external svg file style properties with CSS
  25. div with triangle at the bottom with background image
  26. How do I create a teardrop in HTML?
  27. Create a Reverse Clip-Path – CSS or SVG
  28. Will targeting IE8 with conditional comments work?
  29. How to curve the div from bottom with image background
  30. How to play CSS3 transitions in a loop?

Leave a Comment