Use SVG Images in IMG Tags
How to Use SVG Images in HTML <img> Tags?
✍: FYIcenter.com
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.
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.
Also note that the namespace declaration xmlns="http://www.w3.org/2000/svg" is required when including SVG document as a "src" attribute.
⇒ Use IMG "width" and "height" to Crop SVG Images
⇐ Insert SVG Images in HTML Documents
2022-10-25, 814🔥, 0💬
Related Topics:
