Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a XML-based markup language for describing two-dimensional graphics.

Embedding SVG to Page

Ways to embed SVG in HTML.

Using an <img> Tag

SVG image can be embedded in a HTML page through an <img> tag.

Using a SVG file as Source

The SVG image file can be used as the source of an <img> tag.

Syntax

<img src="image.svg" alt="image" />

Example

<img class="xw200" src="./../sideway/images/computer/software/digitization/2D/inkscape/001/hatch_45degree_001a.svg" alt="image" />

Using SVG image data as Source

The SVG image data can be used as the source of an <img> tag directly through data URIs.

Syntax

<img src="data:image/svg+xml;utf8,%3Csvg%20⋯%3E⋯%3C/svg%3E" alt="image" />
<img src="data:image/svg+xml;base64, ⋯ " alt="image" />

Example

<img src="data:image/svg+xml;utf8,%3Csvg%20width='300'%20height='300'%20version='1.1'%20xmlns='http%3A//www.w3.org/2000/svg'%3E%3Ccircle%20cx='150'%20cy='150'%20r='100'%20stroke='black'%20fill='transparent'%20stroke-width='2'/%3E%3C/svg%3E" alt="image" />

Example

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCcgdmVyc2lvbj0nMS4xJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzE1MCcgY3k9JzE1MCcgcj0nMTAwJyBzdHJva2U9J2JsYWNrJyBmaWxsPSd0cmFuc3BhcmVudCcgc3Ryb2tlLXdpZHRoPScyJy8+PC9zdmc+" alt="image" />

Sources and References

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web