0

Is there any way to manage SVG inline well?

I'm trying to use img tag with SVG, but CSS can't control the hover style.

I wish to make HTML more simple, not so many inline SVG.

JSFIDDLE

pcs
  • 1,864
  • 4
  • 25
  • 49
Red Chou
  • 1
  • http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – Akshay May 13 '15 at 04:56

2 Answers2

2

The SVG has to be inline in the DOM to be styleable via CSS.

You can achive this by using an SVG injector, that replaces the <img> tag with the SVG. For example with SVGInject you can simply add the SVG like this:

<img src="image.svg" onload="SVGInject(this)" />

The attribute onload="SVGInject(this)" makes sure that the injection is done after the SVG has loaded.

Disclaimer: I am one of the authors of the mentioned SVG injector.

Waruyama
  • 3,267
  • 1
  • 32
  • 42
0

You can convert your svg file into a font so that you can apply more hover styles that you want. I wish this helps. Try going to this site icomoon.io

John
  • 425
  • 5
  • 19