Insert SVG Images in HTML Documents
How to Insert SVG Images in HTML Documents?
✍: FYIcenter.com
You can insert a SVG image in an HTML document by
inserting the SVG XML document directly any where
in the HTML document.
Here is a simple example of inserting a SVG XML document inside an HTML document. Save it in a file called, square.html.
<html><body> <p>Black <svg xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="100" height="100"/> </svg> Square... </p> </body></html>
When you open the above HTML file, square.html, in a Web browser, you see a black square inserted inside a text line.
But some how 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 optional when inserting SVG document into an HTML document directly.
⇐ What Is SVG (Scalable Vector Graphics)
2022-10-25, 818🔥, 0💬
Related Topics:
