4

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.

pe-perry
  • 2,591
  • 2
  • 22
  • 33

1 Answers1

4

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

Community
  • 1
  • 1
rnrneverdies
  • 15,243
  • 9
  • 65
  • 95
  • It seems that it will change the style of all my shapes. Is there a way to change the properties of a shape in a specific svg? Thanks. – pe-perry Dec 15 '14 at 03:53
  • This will change all elements with class="mycircle".. see my edit. – rnrneverdies Dec 15 '14 at 04:11
  • Thanks. Also, I would like to know, is it still possible for me to change the style of a downloaded svg from internet like the ones downloaded from here? Given I have no information about the icons. – pe-perry Dec 16 '14 at 10:00
  • 1
    @kitman0804 do you read related answer? It is basically the same process. Lookup de `` an set new fill. – rnrneverdies Dec 16 '14 at 14:57