Change properties of a imported SVG using css

Question

I am quite new in website building and currently deal with the Scalable Vector Graphics (SVG). I have read some online materials that <object> is suggested to add an .svg file on website, e.g.

<object type="image/svg+xml" data="/img/svg/home78.svg"></object>

It is nice that the svg appears nicely, but I would like to change its properties like changing the original colour from black to blue. Is there any way to do by using css? Or are there any alternatives?

Thanks.

Answer 1

Using Inline Style Sheets

It is possible to define the styles for your shapes in an inline style sheet, and then have all these styles automatically applied to your shapes. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    <![CDATA[ 
    .mycircle {
      stroke: #006600;
      fill: #00cc00;
    }
    .otherclass {
      fill: blue;
    }
    ]]>
  </style>

  <circle class="mycircle" cx="40" cy="40" r="24" />
  <circle cx="120" cy="40" r="24" fill="red" />
  <circle class="otherclass" cx="200" cy="40" r="24" />
</svg>

In addition, you can use @import url("/path/to/your.css"); to maintain separate css like this

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    @import url("/path/to/your.css");
  </style>

  <circle class="mycircle" cx="40" cy="40" r="24" />
  <circle cx="120" cy="40" r="24" fill="red" />
  <circle class="otherclass" cx="200" cy="40" r="24" />
</svg>

aside note: I cant use a stacksnippet here, due is unable to import additional resources.

Another Alternative:

You can use javascript to alter the <svg> programmatically like this:

document.getElementById('circle1')
   .setAttribute('fill','red');

document.getElementById('circle2')
   .setAttribute('fill','yellow');

document.getElementById('circle3')
   .setAttribute('fill','green');

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle id="circle1" cx="40" cy="40" r="20" />
      <circle id="circle2" cx="40" cy="80" r="20" />
      <circle id="circle3" cx="40" cy="120" r="20" />
</svg>

Related Answer: https://stackoverflow.com/a/27462277/2573335