A virtual teacher who reveals to you the great secrets of Base64

SVG to Base64

Comments: 25 | Rating: 4.6/5

Convert SVG to Base64 online and use it as a generator, which provides ready-made examples for data URI, img src, CSS background-url, and others. The SVG to Base64 converter is identical to Image to Base64, with the only difference that it forces the mime type to be “image/svg+xml” (even if the uploaded file has a different content type or it cannot be detected). Please note that the SVG to Base64 encoder accepts any images types with a size of up to 50 MB. If you are looking for the reverse process, check Base64 to SVG.

How to convert SVG to Base64 online

  1. Choose the source of image from the “Datatype” field.
  2. Paste the URL or select a SVG image from your computer.
  3. If necessary, select the desired output format.
  4. Press the “Encode SVG to Base64” button.
  5. Download or copy the result from the “Base64” field.

About SVG

  • Name: Scalable Vector Graphics
  • Developer: W3C
  • MIME types: image/svg+xml
  • File Extensions: .svg, .svgz
  • Uniform Type Identifier: public.svg-image
  • Type of Format: Vector graphics

Output formats

If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded SVG image formatted in each of the available formats (as an example image I use a one-pixel red dot SVG file):

• Plain text:
PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==
• Data URI:
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==
• CSS Background Image:
.base64 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==")
}
• HTML Favicon:
<link rel="shortcut icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==" />
• HTML Hyperlink:
<a href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg=="></a>
• HTML Image:
<img alt="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==" />
• HTML Iframe:
<iframe src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==">
  The “iframe” tag is not supported by your browser.
</iframe>
• JavaScript Image:
var img = new Image();
img.src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==";
document.body.appendChild(img);
• JavaScript Popup:
window.onclick = function () {
  this.open("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==");
};
• JSON:
{
  "image": {
    "mime": "image/svg+xml",
    "data": "PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg=="
  }
}
• XML:
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <image mime="image/svg+xml">PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==</image>
</root>

If I missed an important output format for Base64-encoded SVG images, please let me know — I would love to implement it.

Comments (25)

I hope you enjoy this discussion. In any case, I ask you to join it.

  • SeoSeongwon,
    Thank you for your kindness.
    reply
  • Mauro,
    Excelentisimo! The best tool to convert remote svg to data:image!!
    reply
  • Elrinth,
    Doh, so I implemented this for myself aswell. Mainly to be able to quickly drag svg images into a webpage and get the CSS for background-image. Soooo the difference from here is that I simply drag n drop the files on the whole page rather than clicking Local file*. I also support remote url, but it requires CORS chrome plugin allowance. :P

    I'd like to further develop it to identify all colors in the SVG-data and create inputfields with colors pickers, allowing you to change the SVG colors on the fly and see the difference on the fly.

    So if there is some text: "fill:#f0f;" then it would drag out the #f0f color from the svg-data and allow you to change all occurances of that color.

    This to quickly develop for example a hover-color for the svg.

    Had I known this webpage existed before, I'd probably never have thought about doing all this. LoL
    reply
    • Administrator, ↑
      Hey! Thank you for your comment.
      By the way, this encoder supports remote files as well as drag and drop feature.
      reply
      • Elrinth, ↑
        Yeah I noticed. But drop area ain't whole page and ain't direct upload. Mine simply drag drop and it directly works. Much faster workflow. Verifies it's mimetype and give a Nice message if it isnt right mine type etc etc.

        But yeah it still has room for improvement. I still need to open InkScape and sometimes need to add color to the svg before i Drag drop it and get the CSS background-image. Hur really felt like I shouldnt have spent the time when this page already existens. :P

        But yeah this would have been Good enough if I had found it before :)

        Great job!
        reply
        • Administrator, ↑
          Thank you for details and kind words!

          I completely agree that a drag and drop on whole page as well as autosubmit are a faster solution. Unfortunately, I'm not sure that I can implement it for this page (at least definitely not autosubmit).

          Anyway, I'm very glad that you found this webpage useful, even if it has some limitations :)
          reply
          • Elrinth, ↑
            At first I did some ASP.NET file uploader, because I am using Windows and IIS Express is builtin and fast get working in VSCode as webserver. HOWEVER, the fine thing is that with the FileReader API, you never need to upload the actual SVG file to the server! So you can just drag a image to the browser and see the image and get information about it all in javascript before it's even uploaded! So it's all just a plain html file now! :) I'm gonna put it on githabb and I'll share it with you so you can see it.

            Seems IE doesn't have the proper support for the FileReader API tho: https://caniuse.com/#feat=filereader
            reply
      • Programmer, ↑
        <script>alert('2')</script>
        reply
  • Tom,
    Your work is appreciated!
    reply
  • Zomboyashik,
    I used it a couple of times and it helps my greatly.
    reply
  • thanner,
    Perfect! Thanks!
    reply
  • FrViPofm,
    Maybe you could add the Markdown output :
    ![](data:image/svg+xml;<data>)
    reply
  • raje,
    Thanks for this page! :-) I was doing some tests and this one helped me to complete it successfully.
    For SVG, since it's text-based xml data, note also that URL encoding works for the data:..., like data:image/svg+xml,%3Csvg%20width=…. However the data becomes a bit more longer, in my (single) test it was 19 % longer data-string vs base64. May be good to know.
    Cheers
    reply
  • Eulescu,
    check this method(isn't the same iframe!)
    <iframe src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIj4NCiAgPGZvcmVpZ25PYmplY3QgY2xhc3M9Im5vZGUiIHg9IjQ2IiB5PSIyMiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzMDAiPg0KICAgIDxib2R5IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj4NCiAgICA8aWZyYW1lIHNyYz0iZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQRDk0Yld3Z2RtVnljMmx2YmowaU1TNHdJaUJsYm1OdlpHbHVaejBpVlZSR0xUZ2lJSE4wWVc1a1lXeHZibVU5SW01dklqOCtDanh6ZG1jS0lDQWdlRzFzYm5NNlpHTTlJbWgwZEhBNkx5OXdkWEpzTG05eVp5OWtZeTlsYkdWdFpXNTBjeTh4TGpFdklnb2dJQ0I0Yld4dWN6cGpZejBpYUhSMGNEb3ZMMk55WldGMGFYWmxZMjl0Ylc5dWN5NXZjbWN2Ym5Naklnb2dJQ0I0Yld4dWN6cHlaR1k5SW1oMGRIQTZMeTkzZDNjdWR6TXViM0puTHpFNU9Ua3ZNREl2TWpJdGNtUm1MWE41Ym5SaGVDMXVjeU1pQ2lBZ0lIaHRiRzV6T25OMlp6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lDaUFnSUhodGJHNXpQU0pvZEhSd09pOHZkM2QzTG5jekxtOXlaeTh5TURBd0wzTjJaeUlLSUNBZ2QybGtkR2c5SWpRd2JXMGlDaUFnSUdobGFXZG9kRDBpTkRCdGJTSUtJQ0FnZG1sbGQwSnZlRDBpTUNBd0lEUXdJRFF3SWdvZ0lDQjJaWEp6YVc5dVBTSXhMakVpQ2lBZ0lHbGtQU0p6ZG1jNElqNEtJQ0E4WkdWbWN3b2dJQ0FnSUdsa1BTSmtaV1p6TWlJZ0x6NEtJQ0E4YldWMFlXUmhkR0VLSUNBZ0lDQnBaRDBpYldWMFlXUmhkR0UxSWo0S0lDQWdJRHh5WkdZNlVrUkdQZ29nSUNBZ0lDQThZMk02VjI5eWF3b2dJQ0FnSUNBZ0lDQnlaR1k2WVdKdmRYUTlJaUkrQ2lBZ0lDQWdJQ0FnUEdSak9tWnZjbTFoZEQ1cGJXRm5aUzl6ZG1jcmVHMXNQQzlrWXpwbWIzSnRZWFErQ2lBZ0lDQWdJQ0FnUEdSak9uUjVjR1VLSUNBZ0lDQWdJQ0FnSUNCeVpHWTZjbVZ6YjNWeVkyVTlJbWgwZEhBNkx5OXdkWEpzTG05eVp5OWtZeTlrWTIxcGRIbHdaUzlUZEdsc2JFbHRZV2RsSWlBdlBnb2dJQ0FnSUNBZ0lEeGtZenAwYVhSc1pUNDhMMlJqT25ScGRHeGxQZ29nSUNBZ0lDQThMMk5qT2xkdmNtcytDaUFnSUNBOEwzSmtaanBTUkVZK0NpQWdQQzl0WlhSaFpHRjBZVDRLSUNBOFp3b2dJQ0FnSUdsa1BTSnNZWGxsY2pFaUNpQWdJQ0FnZEhKaGJuTm1iM0p0UFNKMGNtRnVjMnhoZEdVb0xUWTVMalU0TURNMkxDMDRNaTQwTXpFMU5ERXBJajRLSUNBZ0lEeGphWEpqYkdVS0lDQWdJQ0FnSUhOMGVXeGxQU0ptYVd4c09pTm1aakF3TURBN1ptbHNiQzF5ZFd4bE9tVjJaVzV2WkdRN2MzUnliMnRsTFhkcFpIUm9PakF1TWpZME5UZ3pJZ29nSUNBZ0lDQWdhV1E5SW5CaGRHZ3hNQ0lLSUNBZ0lDQWdJR040UFNJNE9TNDFPREF6TmlJS0lDQWdJQ0FnSUdONVBTSXhNREl1TkRNeE5UUWlDaUFnSUNBZ0lDQnlQU0l5TUNJZ0x6NEtJQ0E4TDJjK0Nqd3ZjM1puUGdvPSI+DQogIFdJTEwgQkUgQUJTVVJEIHRoZSAiaWZyYW1lIiB0YWcgaXMgbm90IHN1cHBvcnRlZCBieSB5b3VyIGJyb3dzZXIuDQo8L2lmcmFtZT4NCiAgICA8L2JvZHk+DQogIDwvZm9yZWlnbk9iamVjdD4NCjwvc3ZnPg==">
      The "iframe" tag is not supported by your browser.
    </iframe>

    inside html5 ..

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    reply
    • jessee, ↑
      hey. how did you get the result for the first 3 letters to start with 'PHN'?
      i really need help on that. i tried all the possible conversion methods but i couldn't get the same result as your red circle example. any help would be appreciated. thanks
      reply
  • Franck,
    Pure genius ! It worked like a charm ! Thank you !
    reply
    • Programmer, ↑
      <button>Hello world</button>
      reply
  • Takeda,
    so how do i change the entire color of the svg??
    reply
  • FarhanAli,
    This is Really Awesome
    reply
  • Dave,
    I'm working on building a web component that is a single js module file and wanted to include a default image directly inside of the file. This was helpful for converting it so that it could be saved as a string within the file.

    Thank you.
    reply
  • Webwerf,
    Great tool, many thanks!
    reply
  • nqhXncMU,
    0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
    reply
  • nqhXncMU,
    1
    reply
  • Jerimiah,
    it isn't about WW2 >:( 1/10
    reply
  • Mehadi,
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA3IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTA3IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMiAxMkMyMC4yOTUgNi4zNTQ0NCA2Ni41MDggLTIuOTE1MjIgMTA1IDUuMTcwNjkiIHN0cm9rZT0iI0VGMEYzQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==);
    reply
Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.

Recent blog posts