SVG to Base64 & Data URI
Embed SVGs straight into CSS or HTML. Get URL-encoded and Base64 data URIs, ready-made CSS snippets and an <img> tag.
- No uploads
- Works offline
- Free, no sign-up
- Files never leave your browser
Drop SVG files here
or paste SVG code in the editor. You can open several files at once.
Your SVG stays on this device. Nothing is uploaded.
How to use the SVG to Base64 / Data URI
- 1
Paste your SVG
Paste SVG code or drop a file. You can also paste an existing data URI to decode it back to SVG.
- 2
Pick an output
Choose a URL-encoded data URI (usually smallest), Base64, CSS background, CSS mask or an HTML <img> tag.
- 3
Copy
Copy the snippet into your stylesheet or markup. The size of each option appears next to it.
When to inline an SVG as a data URI
A data URI puts the whole image inside your CSS or HTML, so the browser doesn't make a separate request for it. That suits small, frequently used graphics: icons in CSS, custom checkboxes and select arrows, background patterns and placeholders.
For large illustrations, a separate .svg file is usually better: the browser can cache it on its own and it doesn't bloat your stylesheet.
URL-encoded vs Base64 SVG
Base64 turns every 3 bytes into 4 characters, so it always adds about 33% to the size. A URL-encoded SVG only escapes the few characters that are unsafe in a URL (<, >, #, % and quotes), so it stays readable and is usually smaller, especially after gzip. viewsvg shows both, with their sizes, so you can choose.
Everything you need to work with SVG
The SVG to Base64 / Data URI is part of one workspace to view, edit, optimize and convert SVG files, with no sign-up, no ads and no uploads.
Instant preview
Zoom up to 6400%, pan, fit to screen, and check your SVG on transparent, white, black or any custom background.
Live code editor
Syntax highlighting, error line markers, format and minify, search, and full undo history.
Outline & pixel grid
See every path in outline mode, and check pixel alignment with the grid when zoomed in.
Inspect
File and gzip size, viewBox, element tree with hover highlighting, and one-click color replacement.
Optimize with SVGO
Shrink files with before and after previews and adjustable precision. Optimize every open file at once.
PNG, JPG, WebP & ICO
Export at any size up to 16384px, with transparency, or copy the PNG straight to your clipboard.
React, Vue & Svelte
Clean JSX/TSX, React Native, Vue and Svelte components with currentColor and props support.
Many files at once
Open many SVGs as tabs, then batch optimize or download them as a ZIP of SVGs or PNGs.
Private & offline
No uploads, no account. Your work is saved in your browser, and the app works offline after the first visit.
Frequently asked questions
Should I use Base64 or URL-encoded SVG data URIs?
For SVG, a URL-encoded data URI is usually 20–30% smaller than Base64 and compresses better with gzip. Base64 is handy where special characters cause problems.
How do I recolor an SVG icon used in CSS?
Use the CSS mask snippet. The SVG becomes a mask and the element's background-color, set to currentColor by default, fills it, so you can change the icon color with CSS.
Can I convert a data URI back to SVG?
Yes. Paste a data:image/svg+xml URI or a raw Base64 string into the editor and viewsvg decodes it to SVG automatically.
Are my SVG files uploaded anywhere?
No. viewsvg runs entirely in your browser. Files are read, rendered, optimized and converted on your device, and nothing is sent to a server. After the first visit it even works offline.
Is viewsvg free?
Yes. Every feature is free with no sign-up, no watermarks and no file limits.