Insert SVG Images in HTML Documents

Q

How to Insert SVG Images in HTML Documents?

✍: FYIcenter.com

A

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 a 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.

Insert SVG Image Directly in HTML
Insert SVG Image Directly in HTML

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.

 

Use SVG Images in IMG Tags

What Is SVG (Scalable Vector Graphics)

Introduction to SVG (Scalable Vector Graphics)

⇑⇑ SVG (Scalable Vector Graphics)

2022-10-25, 317🔥, 0💬