How do I embed SVG as Base64 in HTML?

Paste the SVG and click Copy Base64 HTML. The snippet is an img tag with a data URI src.

Why img instead of inline ?

A data URI img is one attribute — useful in CMS fields, emails that allow data URIs, or when the host only accepts an image URL.

Yes at any CSS size, because the payload is still vector. Set width/height on the img, not on the root SVG.

SVG to Base64 HTML Img uses the same snippet with img-focused copy.

FAQ

Quick answers

How do I embed SVG as Base64 in HTML?: Paste the SVG and click Copy Base64 HTML. The snippet is an img tag with a data URI src.
Why img instead of inline <svg>?: A data URI img is one attribute — useful in CMS fields, emails that allow data URIs, or when the host only accepts an image URL.
Does the img keep SVG sharpness?: Yes at any CSS size, because the payload is still vector. Set width/height on the img, not on the root SVG.
Need the img wording more specific?: SVG to Base64 HTML Img uses the same snippet with img-focused copy.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B