CODEWITHSUNDEEP
svg
Brett Drake
Brett Drake

Reputation: 331

Why is xlink used with an svg instead of just using an image tag?

I was just told to replace an img tag with an svg image to an svg tag with a use tag and it is showing the image in the wrong color now and broke the css (it needs a relative position that is pretty darn strange). Why use the svg tag with xlink? what do we gain from using svg tag with xlink?

<img class='my-image' src='blah.svg' />

is the original code.

<svg class='my-image'>
    <use xlink:href='#blah'></use>
</svg>

is the new code. It changed the color of the image and wrecked the css, but it did display the image.

Upvotes: 0

Views: 670

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101938

The first one (<img>) refers to an external file. The whole file is displayed as it is, with no opportunity to restyle it.

The second variant lets you include the SVG in your page, and then use individual pieces of it throught your page. So you could include an SVG with a dozen icon definitions. Then use those icons on different parts of the page. You can also restyle the icons with CSS if you want.

Upvotes: 1

Related Questions