Base64 to svg converter not working with this, how come?

I’m trying to convert this and it’s not working:

How come?
@coothead

1.)
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22%235181B8%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8%207.596c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596H8.607A.602.602%200%200%201%208%2016.404V7.596zm5%200c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596h-1.786a.602.602%200%200%201-.607-.596V7.596z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

In here:

This should’ve been in there:
After I put that long string in there: 1.)

But it wasn’t.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="12" fill="#5181B8"/><path fill="#FFF" d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z"/></g></svg>


What part of this gets put in there?

`("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22%235181B8%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8%207.596c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596H8.607A.602.602%200%200%201%208%2016.404V7.596zm5%200c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596h-1.786a.602.602%200%200%201-.607-.596V7.596z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")`

In here:

(function(w,d) {
   'use strict';
   var base64 = '
                                                        ';
   var decode = w.atob( base64 );

   d.getElementById( 'html' ).value = decode;

}(window, document));

Your base64 syntax is incorrect. Try the following experiment:
1: Copy this base64 SVG code into your JSFiddle:

PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iDQogICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KDQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iNDY3IiBoZWlnaHQ9IjQ2MiI+DQogIDxyZWN0IHg9IjgwIiB5PSI2MCIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIyNTAiIHJ4PSIyMCINCiAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7IHN0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoycHg7IiAvPg0KICANCiAgPHJlY3QgeD0iMTQwIiB5PSIxMjAiIHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIiByeD0iNDAiDQogICAgICBzdHlsZT0iZmlsbDojMDAwMGZmOyBzdHJva2U6IzAwMDAwMDsgc3Ryb2tlLXdpZHRoOjJweDsNCiAgICAgIGZpbGwtb3BhY2l0eTowLjc7IiAvPg0KPC9zdmc+

2: Click on RUN and generate the SVG code in your output box:

<svg xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

Paste this code into an HTML page and view the page. The image generated is two overlapping boxes.

This is the code I was trying to get to work in there:


data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22%235181B8%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8%207.596c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596H8.607A.602.602%200%200%201%208%2016.404V7.596zm5%200c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596h-1.786a.602.602%200%200%201-.607-.596V7.596z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E

In here:

I understand that, but as it is not working the syntax must be wrong. If you want to generate the correct base64 string try dropping your SVG image into THIS program and encode it. You will then be able to see the correct code and copy it into your JSFiddle. :grin:

It works when I drop it into here:

@asasass I am unfamiliar with passing data to the “value” attribute of <textarea> elements. What are the limitations?

1 Like

This string works:
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9InJlZCIvPgogPC9zdmc+

This string doesn’t work:

data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22%235181B8%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8%207.596c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596H8.607A.602.602%200%200%201%208%2016.404V7.596zm5%200c0-.33.277-.596.607-.596h1.786c.335%200%20.607.267.607.596v8.808a.605.605%200%200%201-.607.596h-1.786a.602.602%200%200%201-.607-.596V7.596z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E

In here:

Maybe only letters and numbers work in it.

Here you go…

Base64 code :-

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIA0KICAgd2lkdGg9IjI0IiANCiAgIGhlaWdodD0iMjQiIA0KICAgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9IiM1MTgxQjgiLz4NCiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCA3LjU5NmMwLS4zMy4yNzctLjU5Ni42MDctLjU5NmgxLjc4NmMuMzM1IDAgLjYwNy4yNjcuNjA3LjU5NnY4LjgwOGEuNjA1LjYwNSAwIDAgMS0uNjA3LjU5Nkg4LjYwN0EuNjAyLjYwMiAwIDAgMSA4IDE2LjQwNFY3LjU5NnptNSAwYzAtLjMzLjI3Ny0uNTk2LjYwNy0uNTk2aDEuNzg2Yy4zMzUgMCAuNjA3LjI2Ny42MDcuNTk2djguODA4YS42MDUuNjA1IDAgMCAxLS42MDcuNTk2aC0xLjc4NmEuNjAyLjYwMiAwIDAgMS0uNjA3LS41OTZWNy41OTZ6Ii8+DQogICA8L2c+DQo8L3N2Zz4=

Fiddly Thing working :-

https://jsfiddle.net/z25mjtc7/1/

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.