yoksel / url-encoder

🛸 Url-encoder, useful for SVG

Url encoder for SVG

http://yoksel.github.io/url-encoder

Usage

1. Take svg.
2. Encode it with url-encoder.
3. Use code as background-image or border-image or mask.
4. Enjoy!

Demo: https://codepen.io/yoksel/full/WNrLpYW.

How to add translate

1. Create translation file (use src/translate/en.json as example) and place it to src/translate/
2. Add new language to section langs in all translation files
3. Add item with your language to section translates in gulpfile.js.
4. Run npm start in console (wait until project will be opened in browser) and check all pages:
   • Link to new page must appear in all pages
   • In the page with new translate new language in list must looks like current (bold and black)
5. Send pull request

url-encoder's Issues

Add an option for quotes

I have single quotes in my CSS code style and you encode it with single quotes too. It means that I can’t wrap it in single quotes. It would be good to have a small single/double switcher somewhere.

Allow option to output url-encoded URLs

Reasoning: based on my understanding, spaces are allowed in css data urls. However, some (older?) css minifiers strip the whitespace out. And url-encoded data urls appear to work correctly.

adding drag & drop functionality to page

Hi
May I suggest you add drag & drop functionality to the input field on the main page?

function dropfile(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    init.value = e.target.result;
	init.dispatchEvent(new Event("input"));
  };
  reader.readAsText(file, "UTF-8");
}

document.getElementById("init").ondrop = function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  dropfile(file);
};

"escape" function deprecated

Hi,

The function "escape()" used in your code is deprecated.
Is that normal to use this function ? does "encodeURIComponent()" could do a better job ?

Cannot escape '<' in attributes

Minimal buggy svg:

<svg xmlns='http://www.w3.org/2000/svg'><rect width='100' height='100' fill='red' data-name='<' /></svg>

Doesn't work

GET http://yoksel.github.io/url-encoder/ru/script.js 404 (Not Found)

Redesigning the page

Hello there, I saw this tool and I found it really helpful. I'd love to work on redesigning with css to look a little more modern, user friendly and usable.

there is a much better way to handle this without having to rely on fixed height/width

Just add a before pseudo element to the div you want to add the image and do content: url(mySvg);

Thank you for great instrument!

Thank you for great instrument! Have a nice day!
PS: Please close the issue immediately after read.

Add charset=utf8 to "Ready for CSS"

Hi!
Thank you for a nice tool :)

For IE it's important to add 'charset=utf8' for background-image property like this
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
If you don't do this, the image will not be displayed.

It would be nice to add charset automatically, what do you think?

Undefined variable `escape`

url-encoder/script.js

Line 143 in dadb691

return data.replace( symbols, escape );

Paste by right-click

When a user inserts a SVG, using the context menu by right-clicking, the encoding does not work

What is the License?

The code is clearly open source. However, it is not clear what are conditions for copy/paste?

SimpleCoffee

add CLI

I added to CLI version: https://github.com/maxlibin/url-encoder

Should escape " " to "%20"

Spaces are not URL safe.

Incorrect url paths at En version

Thanks for a handy tool, Julia!

I've noticed that language switcher urls on https://yoksel.github.io/url-encoder/ have incorrect values leading to 404, e.g.:

• «Br» leads to https://yoksel.github.io/pt instead of https://yoksel.github.io/url-encoder/pt/
• «Рус» leads to https://yoksel.github.io/ru instead of https://yoksel.github.io/url-encoder/ru/

and so on.

However pages in any language other than «En» contain correct urls («Br» leads to https://yoksel.github.io/url-encoder/pt/, etc.)

Add conversion from CSS to SVG

I want to edit an icon inside a CSS file with my favourite SVG editor.

It could be fine if when we paste text into the CSS box, it update SVG box 😃

Why aren't you changing the UI?

A fresh UI [Not an Issue]

Created this new User Interface! Hope You Like it!?

I could have created PR but I don't want to code JavaScript part and also my html code is super different from yours.

P.S - I can share the code with you if you want.

large svg blurry when converted

Any ideas / suggestions about why, after run through your tool, firefox renders this blurry?
(The large width and height are needed... many other shapes will be drawn.)

<svg xmlns="http://www.w3.org/2000/svg" width="137000" height="137000">
<polygon points="60,60 -40,60 -40,-40 60,-40" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Encoding will not allow the SVG 'evenodd' method to work - lost animation/transitioning does not work after encoding

Hi Yoksel,

I'm stuck, I have an Accordion which uses the [+/-] svg as a toggle button.

I've got it working the way I want, but want to remove the HTML's in-line ,
and place it into the CSS, Or at least have it as a <style> in the Header.
[see working good: 1.0 default [current ver - no mod].html]

Placing it in the Header <style> works BUT I loose the animation.
[not working: 2.0 default [in header].html]

Ultimately I really want it in the CSS file, to get it completely out of the HTML.
[not working: 3.0 default [in css main2].html]

It could be that the 'encoding' will not allow the 'evenodd' method to work,
or I have it placed wrong, The animation/transitioning does not work.

The Button's CSS starts at line: 1495

Example DL here: http://msgr.info/In-Line_SVG_to_CSS.zip
152 KB (155,648 bytes)

[Note this 'example' is stripped down from the Original Site to lessen the load, it's a bit dirty-code - the best I could do to make an example]

Thank you for your help!
J.Khan

P.S.: you can delete this request upon response - thnx

---

End