4

On my page I'm using the img tag to embed SVG images. Now I wanted to apply some css onto them. This works well as long as you copypaste the SVG source code directly into your page. However, if I embed them using the img src attribute, it doesn't.

Is there a way to make that work?

<style type="text/css">
path:hover {
    fill:white;
}
</style>

<img src="my.svg" />

Thanks in advance!

André R.
  • 427
  • 7
  • 17

2 Answers2

10

Well it can be achieved through JQuery ( Work Around ) , this Jquery function will convert <img> tag that hold current svg image into a <svg> inline tags, you can view it in your browser debugger.In short it will mimic as if directly inserted the SVG image.

<script type="text/javascript">

    $(document).ready(function() {
        $('#img').each(function(){
            var img         = $(this);
            var image_uri   = img.attr('src');

            $.get(image_uri, function(data) {
                var svg = $(data).find('svg');
                svg.removeAttr('xmlns:a');
                img.replaceWith(svg);
            }, 'xml');

        });
    });
</script>


<img id='img' src="my.svg" />
Dimag Kharab
  • 4,439
  • 1
  • 24
  • 45
  • Thanks! I didn't quite use your method, but did it via the server side code, but that seems to be the only possibility. It works now. – André R. Feb 03 '15 at 14:24
1

I do not think this is possible. You are correct in that using inline-SVG will allow you to manipulate the parts of the svg, but including it in an img tag will not. See http://css-tricks.com/using-svg/

Barry T. Smith
  • 1,021
  • 7
  • 10