CODEWITHSUNDEEP
htmlcsssvg
Red Chou
Red Chou

Reputation: 1

How to manage SVG inline in HTML well

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

Upvotes: 0

Views: 201

Answers (2)

Waruyama
Waruyama

Reputation: 3533

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.

Upvotes: 2

John
John

Reputation: 425

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

Upvotes: 0

Related Questions