1

I have an SVG image element in my code.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>

The image mail-dark.png is "Black" in color now. I need to change its color. For example say to "green".I have tried using css as

<style>
#svg_social-link { 
    fill: green;
}
</style>

But its not worked. Is there any way to do this.

Mad Angle
  • 2,347
  • 1
  • 15
  • 33
  • 1
    PNG is not the same as SVG. SVG is a vector format and PNG is raster. For changing color of a PNG you can have a look here http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – Niklas Lindblad Mar 28 '14 at 10:06
  • Is it the only reason we cant change the color.? If the image is a jpeg is it possible ? – Mad Angle Mar 28 '14 at 10:21
  • If all your SVG contains is an image, then there is no point in having an SVG in the first place. Just use `mail-dark.png` directly in the page. – Paul LeBeau Mar 28 '14 at 14:09

1 Answers1

1

AFAIK, You can not change the background color in a SVG image, you could do it if the image is the HTML code (out of SVG).

However you could do it in SVG with a workaround, using a rect as background:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="20" y="20" width="17" height="17" id="bk_rect" style="fill:#800000;"/>
    <image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>

You can set the bk color inline or modify it using JS or CSS

$('#bk_rect').css('fill', '#aaaaaa');

I created JSFiddle: http://fiddle.jshell.net/7dcnZ/1/ To show it

Roberto
  • 8,586
  • 3
  • 42
  • 53
  • Is there any possible method to convert an image into corresponding SVG paths? (Then I can apply the fill color). – Mad Angle Mar 28 '14 at 11:44
  • 1
    You can do it with Inkscape (http://www.inkscape.org/), The exact command is "Trace Bitmap", Depending on the bitmap the resulting path could be more or less accurate. – Roberto Mar 28 '14 at 11:47
  • Ok Thanks. Is there any way to do it through code using any api or something like that? – Mad Angle Mar 28 '14 at 11:49
  • Inkscape can by extended with Python, It has an API, but I'm not familiar with it. You could take a look to: http://wiki.inkscape.org/wiki/index.php/PythonEffectTutorial and http://wiki.inkscape.org/wiki/index.php/Script_extensions – Roberto Mar 28 '14 at 12:05