How do I make an HTML img from SVG Base64?

Paste SVG and click Copy HTML img. The tag uses src="data:image/svg+xml;base64,…".

Do I need width and height on the img?

Optional. The sample SVG has no root width/height, so you size the img in HTML or CSS.

If the host allows data URI images, yes. Many READMEs block them — then keep a .svg file instead.

SVG Base64 Data URI Image copies only the image string.

— free browser tool, no upload." /> — free browser tool, no upload." /> — free browser tool, no upload." />

FAQ

Quick answers

How do I make an HTML img from SVG Base64?: Paste SVG and click Copy HTML img. The tag uses src="data:image/svg+xml;base64,…".
Do I need width and height on the img?: Optional. The sample SVG has no root width/height, so you size the img in HTML or CSS.
Will this work in Markdown?: If the host allows data URI images, yes. Many READMEs block them — then keep a .svg file instead.
Want the URI without the tag?: SVG Base64 Data URI Image copies only the image string.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B