SVG encoding
SVG to Base64 Converter
Convert SVG files to Base64 data URIs for HTML img tags, CSS backgrounds, and JavaScript strings.
4.8 / 5 124 ratings
SVG to Base64 workspace
Upload an SVG and copy a data URI for inline use in code.
Drag and drop an SVG here, or click to choose a file
Max file size 2 MB
Need help using SVG Base64 in code? Read the HTML, CSS, and JavaScript guide
Convert SVG to Base64
SVG files are XML-based vector images. When you convert svg to base64, you turn the file into a single text string you can paste into JSON, JavaScript, or legacy templates.
This tool outputs a data:image/svg+xml;base64,... URI that you can copy from the Data URI tab.
SVG Data URI Format
The encoded URI keeps the SVG MIME type so browsers render it as a vector image.
If you need a data image svg xml base64 value, copy the full URI from the converter output and paste it into your code.
Use the HTML or CSS tabs when you want a ready-made snippet instead of the raw string.
Base64 SVG vs Inline SVG
Inline SVG markup is easier to style with CSS and often produces smaller page weight.
Base64 SVG works better when you need one encoded string for configs, JavaScript variables, or systems that do not accept raw XML blocks.
Using SVG Base64 in HTML and CSS
In HTML, place the data URI inside an img tag src attribute when you need a base64 img tag pattern for vector icons.
In CSS, use background image base64 values with background-image: url("data:image/svg+xml;base64,..."); for icons, badges, and decorative assets.
Common SVG Encoding Issues
Large SVG files create long Base64 strings that are hard to read and maintain in source code.
Some SVG features behave differently when you load the image through an img tag instead of inline SVG.
Related Pages
Frequently Asked Questions
Only when you need a single encoded string. For most web pages, inline SVG is simpler and more flexible.
Yes. Use the encoded URI as the value for background-image in CSS.