I noticed there are two ways to reference SVG images. You can either use the standard <img>
tag
<img src="picture.svg" alt="SVG Image"/>
or you can use <image>
tag
<svg>
<image xlink:href="picture.svg" x="0" y="0" height="50px" width="50px"/>
</svg>
To me, it seems better to simply use the <img>
tag because you get the alt
attribute which makes it more search friendly and you also can apply styles via CSS. I was having trouble applying styles because the SVG <image>
requires attributes.
I was wondering if there was a significant reason why you would use the SVG <image>
tag over the standard <img>
?
The <svg>
element is used for putting inline SVG in your document. So in this case, if you want to avoid having to load an external file, you can put the contents of picture.svg
directly between the <svg>
and </svg>
tags.
If that's not the intended purpose, and you just want to show an image that happens to be in SVG format, there's no real reason to put in inside an SVG block; just use <img>
.