yoksel / url-encoder Goto Github PK
View Code? Open in Web Editor NEW🛸 Url-encoder, useful for SVG
Home Page: http://yoksel.github.io/url-encoder
🛸 Url-encoder, useful for SVG
Home Page: http://yoksel.github.io/url-encoder
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 ?
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.:
https://yoksel.github.io/pt
instead of https://yoksel.github.io/url-encoder/pt/
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)
Line 143 in dadb691
Just add a before pseudo element to the div you want to add the image and do content: url(mySvg);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.