CODEWITHSUNDEEP
htmlsvg
hyperexpert
hyperexpert

Reputation: 532

Is there a way to re-purpose an SVG file?

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?

Upvotes: 2

Views: 132

Answers (2)

methodofaction
methodofaction

Reputation: 72395

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;
}

Upvotes: 1

raybiss
raybiss

Reputation: 401

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

Upvotes: 1

Related Questions