SVG to Data URL

Features

• Produces both a base64 data:image/svg+xml URI and a CSS-friendly URL-encoded data:image/svg+xml;utf8 URI.
• Inline an icon as a CSS background-image or src without an extra HTTP request.
• Shows the byte count for each encoding plus a live thumbnail so you can pick the smaller one.

How it works

1. Paste SVG markup or drop a .svg file into the encoder.
2. Read off the base64 data URI and the URL-encoded data URI, comparing their byte sizes.
3. Click copy on the encoding you need and paste it into your CSS or HTML.

Related tools

• SVG viewerDrop or paste any SVG to preview it live, inspect its dimensions, and read its source — safely sandboxed.
• SVG to PNG / JPG / WebPRasterize any SVG to a high-quality PNG, JPG, or WebP at the exact size you want — with live preview.
• SVG editorEdit SVG markup, dimensions, viewBox, colors, and transforms — with live preview. A panel-based editor that keeps your source clean.
• Favicon from SVGGenerate a full favicon bundle from a single SVG: favicon.ico, apple-touch-icon, Android Chrome icons, and a webmanifest snippet — in one ZIP.

Topics covered

• svg to data url
• svg to base64
• svg data uri
• css background svg
• url encode svg
• inline svg encoder