在SVG中使用图标

Question

I have a PNG image, which I use in my HTML as background-image for <i> elements. I need to use this icon inside the SVG. Putting <i> inside of <foreignObject> renders the icon, but causes lots of other problems.

Is there any way to get the icon effect inside SVG without using HTML tags?

Answer 1

SVG has an <image> tag very much like the one in HTML:

<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"></image>

• MDN reference