What is a data URI image from SVG?

A string that starts with data:image/svg+xml;base64, and decodes to the vector graphic — browsers treat it like an image file.

How do I copy an SVG as a data URI image?

Use the photo-mark sample or paste your SVG, then click Copy image data URI.

No. The MIME type is image/svg+xml, so it stays vector. For PNG, use the PNG tab instead.

FAQ

Quick answers

What is a data URI image from SVG?: A string that starts with data:image/svg+xml;base64, and decodes to the vector graphic — browsers treat it like an image file.
How do I copy an SVG as a data URI image?: Use the photo-mark sample or paste your SVG, then click Copy image data URI.
Is this a raster image?: No. The MIME type is image/svg+xml, so it stays vector. For PNG, use the PNG tab instead.
Want an img tag around the URI?: Open SVG to Base64 HTML Img.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B