1. Online Base64 Encoders & Decoders
  2. Base64 Encoders
  3. Encode SVG to Base64

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>