SVG to Data URI Converter

Paste SVG code and instantly get URL-encoded data URI, Base64 data URI, CSS background-image shorthand, and HTML img src formats — all with a live preview. Embedding SVGs as data URIs eliminates extra HTTP requests and keeps icons self-contained inside your CSS or HTML. URL-encoding is generally preferred over Base64 for SVG as it produces smaller output.

SVG Input244 B

Preview

URL-encoded data URI

326 B

url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233b82f6'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%20%3Cpath%20d='M12%208v4l3%203'/%3E%20%3C/svg%3E")

Base64 data URI

361 B

url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzYjgyZjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPgogIDxwYXRoIGQ9Ik0xMiA4djRsMyAzIi8+Cjwvc3ZnPg==")

CSS background-image

326 B

background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233b82f6'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%20%3Cpath%20d='M12%208v4l3%203'/%3E%20%3C/svg%3E");

HTML img src

361 B

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzYjgyZjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPgogIDxwYXRoIGQ9Ik0xMiA4djRsMyAzIi8+Cjwvc3ZnPg==" alt="" />

Buy me a coffee

When to use each format

URL-encoded — generally smaller than Base64 and faster to decode. Preferred for inline SVG in CSS.
Base64 — universally supported, no special characters to worry about. Best for HTML img tags.
CSS background-image — embed icons in stylesheets without an extra HTTP request. Use with background-size and background-repeat: no-repeat.
Always include the xmlns attribute on the SVG element for cross-browser compatibility.

Related Tools

Unit Converter

Convert between Length, Weight, Temperature, Area, Volume, Speed, Time, and Digital Storage units instantly.

Timezone Converter

Convert any date and time across 27 major world time zones simultaneously. Handles DST automatically.

Loan Calculator

Calculate monthly loan payments, total interest, and total cost. Includes a 12-month amortization table.

Age Calculator

Calculate exact age in years, months, and days from a birth date. Shows total days, weeks, next birthday, and zodiac sign.

IP Address Lookup

Look up any IP address to find its city, region, country, ISP, timezone, and GPS coordinates. Auto-detects your own IP.

IBAN Validator & Formatter

Validate and parse IBAN bank account numbers. Check the checksum and identify the country and bank code.

Image Compressor

Compress JPEG, PNG, and WebP images in your browser. Reduce file size without uploading to any server. Batch up to 5 images.

Image Resizer

Resize JPEG, PNG, and WebP images directly in your browser. Maintain aspect ratio, choose output format. No server upload.

Percentage Calculator

Three percentage calculators: find X% of a number, what percentage X is of Y, and calculate percentage change.

Icon Font Generator

Upload SVG icons and generate a complete icon font package — TTF, WOFF, WOFF2, CSS classes, and HTML demo as ZIP.

Icon Font Extractor

Upload any icon font and extract all glyphs as individual SVG files. Optionally load a CSS file to map icon names. Download as ZIP.

QR Code Generator

Generate QR codes from any URL, text, or contact info. Customize size, colors, and error correction. Download as PNG.

Image Metadata Viewer

Upload any image to see file info and EXIF metadata — camera make, model, date taken, GPS location, ISO, aperture, shutter speed.

URL Analyzer

Decompose any URL into its protocol, hostname, port, pathname, query parameters, and hash. Also encode and decode URL components.

Favicon Generator — ICO, PNG & Web Manifest

Generate a complete favicon package from any image — ICO, iOS, Android, Windows tile, web manifest, and more.

Online Image Converter — PNG, JPEG & WebP

Convert images between PNG, JPEG, and WebP formats in your browser. Batch convert and download as ZIP.

PNG to ICO Converter Online — JPG & Image to ICO

Convert PNG, JPG, or any image to ICO format with multiple sizes in a single file. Perfect for favicons and app icons.

PNG to ICNS Converter Online — macOS App Icon

Convert PNG or any image to macOS ICNS format with all standard Apple icon sizes for app development.

Robots.txt Generator

Build a robots.txt file visually. Set crawl rules per bot, add sitemaps, and use common presets.

Font Converter

Convert fonts between WOFF2, WOFF, TTF, EOT, and SVG formats in your browser. Preview the font and download.

Ebook Converter

Convert ebooks between 25+ formats — EPUB, MOBI, AZW, PDF, RTF, TXT and more. No software to install.

Ebook Reader

Read EPUB ebooks in your browser. Upload MOBI, AZW, FB2, and 20+ other formats — they convert automatically.

Aspect Ratio Calculator

Calculate width, height, or ratio for any aspect ratio. Useful for scaling responsive images and sizing video embeds.

Meta Tag Generator

Generate complete HTML meta tags for SEO, Open Graph, and Twitter Cards in one form.