Encode SVG to Base64
The converter helps to encode Scalable Vector Graphics (SVG) File to Base64 data then to copy or download a result data in several formats. If you want decode use Base64 to SVG Decoder.
How to encode SVG file (.svg) to Base64 Data
- Select or drag & drop one or several SVG files;
- Press Encode button (you will see result below);
- Select output format (Plain Text, Data Url, CSS background, HTML Image Tag, HTML Favicon, HTML Iframe Tag, HTML Hyperlink Tag);
- Copy or Download Base64 data;
- Done!
Output Formats
- Plain Text - Only Base64 data;
- Data Url - Base64 in data url format (data:[<MIME-type>][;charset=<encoding>][;base64],<base64 data>)
- CSS Background - CSS Class with Data Url data in bacground property.
- HTML Image Tag - HTML Tag <img> with Data Url data in SRC property.
- HTML Favicon - HTML Tag <link rel="shortcut icon"/> with Data Url data in HREF property.
- HTML Hyperlink Tag - HTML Tag <a> with Data Url data in HREF roperty.
- HTML IFarme Tag - HTML Tag <iframe> with Data Url data in SRC property.
Output Format Examples for SVG (truncated data for example)
Plain Text:
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...
Data Url:
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...
CSS Background:
.base64{background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...");}
HTML Image Tag:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...">
HTML Favicon:
<link rel="shortcut icon" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv..." />
HTML Hyperlink Tag:
<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...">Click</a>
HTML IFrame Tag:
<iframe src="data:svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv..."></iframe>
How to add SVG file to my site (HTML page)
If you want add SVG in web site, you should encode SVG file and select formats:
- HTML Image Tag;
- CSS Background;
- HTML Hyperlink Tag
Example HTML Image Tag:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...">
Copy Paste this code to <body> tag of your web page. You can set addition <img> tag's attributes are width, height. More info about img tag.
If you want use SVG image in background, use Base64 data in CSS like this code for style .base64:
.base64{background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...");}
If you want download SVG file by HTML Hyperlink Tag, add attribute download="<file-name>.svg"
<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv..." download="image.svg">Download</a>