Use base64 s64 image as css content source

Question

I am trying to use both css content and an image (base64), but when I load the page it loads like a broken link image.

Now I use a website to upload a base64 image, and this is the css that I use that gives me broken images:

.default:after{ content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+'); position:absolute; width:100px; height:100px; } 

if I open the “broken” base 64 image on a new chrome tab, this will be the result of the error:

This page contains the following errors:

an error in line 10 in column 1: additional content at the end of the document The following is the rendering of the page before the first error.

Now, I have never used base64 images, but do I need to do something special, or just copy and paste the autogenerated code?

in advance for help

** PS: I am developing in localhost, I do not know if this could be the reason or not.

Answer 1

This is what it says, you encoded a document + some extra garbage at the end.

It would seem that this is the correct encoding that I got by decoding through http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/ garbage disposal, and then encoding using the same site.

PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+==

Answer 2

You can easily convert the SVG file to the original base64 value for the CSS background attribute with this simple bash command:

 echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;" 

Tested on Mac OS X. This way you also avoid randomly exiting URLs.

Remember that the base64 encoding of an SVG file increases its size, see the css-tricks.com blog post