Inkscape is open source, file a feature request?
Worth noting it deems itself "SVGOs missing GUI" (and does a splendid job at that). If one needs to batch process files or sth like that, svgo's CLI is still there.
Props to Jake Archibald!
Thanks for posting it and thank you all for your kind words.
Let me know if you have any questions!
In most of the examples, there's many paths with long sequences of numbers, so it's not obvious which path corresponds to which shape in the image.
I wonder if you could make it temporarily change the color or outline of a path when the cursor is on its code in the editor? (and similarly for text selections)
Why would a react dev use the react export feature over inlining an svg?
There are very minor differences between what's a valid SVG and what's valid JSX, and web apps like this one will often offer to translate those fields for you as well as add the rest of the "component stuff" to make it copy-pastable.
[1] The problems that I had with some SVG's is that they seemed to stretch the page wide while loading (in a flash) and then finally settling on their intended size after a split second. I remember that I searched for solutions and fiddled with viewbox, widht and height, but to no avail (they were in the hundreds of pixels). What can I do to mitigate this initial 'stretch'?
What would happen if you started your SVG output by drawing a canvas-dimensioned border?
This could do with some better examples to start editing with, using different primitives than just path. A grid would be nice too.
Examples, a search icon is a 'circle' and a 'line' with a 'viewbox' to get right, if you place the origin in the centre of the circle then you don't need x and y values, just a radius. In this way a silly level of optimisation can be made.
A typical search icon will have hundreds of points defined with 'NASA numbers' (six decimal places) and that mashed into a path. Really you just need a circle defined in integers, not Adobe Illustrator exported nonsense.
SVG is an artistic medium and I really like it. However, artists don't see it that way and neither do developers. Hence most SVGs are not really in the spirit of what is possible. It is more than just a file format.
I started down a Qt/QML desktop frontend path that led into wondering how much of it I could do with just a SVG imagemap-style setup.
Getting Jupyter up and running with a connection to data and SVG tools was an illuminating experience.
But what does it mean to optimize an SVG?
Thank you to the dev
Love little tools like this it fits the spirit of HN perfectly.
There's a slightly more optimal way to encode SVGs as data URI: https://yoksel.github.io/url-encoder/
The library of SVGs on the left is a great feature in itself. I wish a couple of sites like this become super popular so that all of us can both contribute and utilize great vector art.
Apart from that, they let you store and share SVGs on their servers, so it’s not purely client-side.
And although that sort of thing would mean you can just download it straight from where it's being hosted from a technical point of view (for things where there isn't any backend or hidden logic in code at all) there's still the legal question as shown in logic8's comment.
I was expecting the optimization feature to rewrite the SVG to be smaller (less kb).
All the optimize button did was remove whitespace & cartridge returns.
Haven’t yet done it myself and can’t verify right now, but I wouldn’t be surprised if it worked well to brainstorm a favicon or some other symbol.
ill choose the one that i cant get vendor locked out of, or that gives me a different result tomorrow than it does today.