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 and then to copy or download the result data in several formats. If you want to 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 the 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 background 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 property.
  • 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 an SVG file to my site (HTML page)

If you want to add SVG to the website, you should encode an SVG file and select the formats: 

  • HTML Image Tag;
  • CSS Background;
  • HTML Hyperlink Tag

Example HTML Image Tag:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv...">

Copy and Paste this code to your web page's <body> tag. You can set the addition <img> tag's attributes: width and height. More info about the image tag.

If you want to use an SVG image in the 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 to download an 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>