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

  1. Select or drag & drop one or several SVG files;
  2. Press Encode button (you will see result below);
  3. Select output format (Plain Text, Data Url, CSS background, HTML Image Tag, HTML Favicon, HTML Iframe Tag, HTML Hyperlink Tag);
  4. Copy or Download Base64 data;
  5. 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>