2

I was wondering is there a way to re-purpose an SVG file?

What I mean is, I have my logo SVG file in my header area, the whole thing is set to black, will I be able to use the exact same file in my footer area with different colors? Or do I have to create another SVG file for that?

halfer
  • 19,824
  • 17
  • 99
  • 186
hyperexpert
  • 532
  • 1
  • 8
  • 20
  • Specify the "html" tag if it is relevant. –  Mar 10 '13 at 10:45
  • 1
    One way to do this is to serve it through your server's scripting language, and add a query string to modify certain properties (e.g. colour) of the logo. That would save you having to maintain several similar copies of the file. – halfer Mar 10 '13 at 11:46
  • 1
    Ading to @halfer's idea, you make your SVG with its colors being unique text (e.g. `%myLogoColor%`), then use server side scripting to replace `$myLogoColor$` with anything you might want. – This company is turning evil. Mar 10 '13 at 12:15

2 Answers2

1

SVG is XML so it's repurposable "by design". As @halfer and @Kroltan already pointed out, you can use server side languages to change the logo color.

In case you don't have access to the server side , you could also use client side Scripting or even XSLT to do this.

See this thread as a starter... Changing SVG image color with javascript

Community
  • 1
  • 1
raybiss
  • 401
  • 2
  • 8
1

Assuming you have your SVG embedded in an SVG tag (not in an img tag) your html would look somewhat like:

<header>
  <svg xmlns="http://www.w3.org/2000/svg">
     <path d="..." class="logo_fill">
  </svg>
<header>

<footer>
  <svg xmlns="http://www.w3.org/2000/svg">
     <path d="..." class="logo_fill">
  </svg>
<footer>

Then, in your CSS you can state:

header svg .logo_fill {
    fill: red;
}

footer svg .logo_fill {
    fill: gray;
}
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • This might work, but my logo contains lots of different elements, not just paths, it has paths, circles, lines, etc. does that mean i have to add the class tag to each element I have? – hyperexpert Mar 11 '13 at 19:34
  • Also my svg file is external and I am calling it with tag, is it better to make it in-line? – hyperexpert Mar 11 '13 at 19:37
  • I would not make it inline if I had the choice. The object tag might be fine, depending on your specific scenario. See this thread for a link to the W3C SVG Primer. http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files This tutorial also discuss a few options. http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial – raybiss Mar 11 '13 at 21:15