yoksel / url-encoder Goto Github PK

Minimal buggy svg:

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

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.

Hi,

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

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.

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

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

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?

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.

Spaces are not URL safe.

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.

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>

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.)

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);
};

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

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 😃

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

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

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

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