A virtual teacher who reveals to you the great secrets of Base64
How to convert SVG to Base64 online
- Choose the source of image from the “Datatype” field.
- Paste the URL or select a SVG image from your computer.
- If necessary, select the desired output format.
- Press the “Encode SVG to Base64” button.
- Download or copy the result from the “Base64” field.
- 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
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):
If I missed an important output format for Base64-encoded SVG images, please let me know — I would love to implement it.
I hope you enjoy this discussion. In any case, I ask you to join it.
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. 😛
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
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. 😛
But yeah this would have been Good enough if I had found it before 🙂
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 🙂
We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere.
SVG must have attribute xmlns like this: xmlns=’http://www.w3.org/2000/svg’ . If it doesn’t exist, it will be added automagically.
Encoded SVG can be used in background (demos) and border-image (demo).
I’m setting a SVG as background-image for a pseudo element:
but for some reason it does not show up on Firefox. I do not wanna use a base64 data-url. Isn’t this possible at all in Firefox?
3 Answers 3
The # character in a URL is reserved to indicate the start of a fragment identifier.
You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23
You can use the encodeURIComponent(uri) function of JS.
This function encodes special characters and can encodes also the following characters: , / ? : @ & = + $ #
For anyone having this encoding issue when trying to use url with sass variables (for fills, for instance), the following is quite useful: https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be
Note, you may need to edit the output url from inline-svg depending on your needs (in my case, I was using data:image/svg+xml;utf8 instead)
Not the answer you’re looking for? Browse other questions tagged css image firefox svg or ask your own question.
Hot Network Questions
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2019 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2019.11.15.35459