Use SVG Images in IMG Tags

Q

How to Use SVG Images in HTML <img> Tags?

✍: FYIcenter.com

A

If you want to use SVG images in HTML <img> Tags, you can save SVG images in .svg files and include SVG image file names in the "src" attribute of <img> Tags.

You can follow this tutorial to test this.

1. Save the following SVG image in a file called, square.svg:

 
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="100" height="100"/>
</svg>

2. Save the following HTML document in another file called, square2.html:

<html><body>
<p>Black
<img src="/square.svg"/> 
Square...
</p>
</body></html>

When you open the above HTML file, square2.html, in a Web browser, you see a black square inserted inside a text line.

Use SVG File in HTML IMG Tag
Use SVG File in HTML IMG Tag

Similar to square.html in the previous tutorial, extra white spaces are padded below and after image. The the 100px x 100px square occupied an area of 300px x 150px.

See next tutorial on how to remove padded space around the SVG image.

 

Use IMG "width" and "height" to Crop SVG Images

Insert SVG Images in HTML Documents

Introduction to SVG (Scalable Vector Graphics)

⇑⇑ SVG (Scalable Vector Graphics)

2022-10-25, 307🔥, 0💬