svg-path-editor
svg-path-editor copied to clipboard
Calculate optimal path
Your tool is mentioned by SuperTinyIcons which in turn got some attention in Newsletters.
See https://github.com/edent/SuperTinyIcons/issues/504 I used your editor to play with scale and precision, ended up with precision in the viewBox notation:
I wonder, would it be possible to do some calculations in your editor, see a list which scale settings make a smaller minified path. Maybe even calculate which results overlap very well with the original.
Ever seen such a tool?
That would be great, but it's something very advanced and complex to automate. If we start considering destructive transformations, there are a lot of operations that could be combined:
- changing precision
- changing scale
- relative or absolute commands (
M10 10V11
=>M10 10v1
) - scientific notation (
1000
=>1e3
) - translations (
M1.55 1.55V2.55
=>M1 1V2
) - command simplification (
l 3 0
=>h 3
)
Before doing that, there are still some basic, non-destructive optimisations, that are not yet implemented, like this one:
l-1-1l-2-3l-4-5
=> l-1-1-2-3-4-5
Yes, I do those edits trial and error by hand
Does SVGO recalculate paths?
showing path length
FYI, I hook into your path textarea to display the path length (knowing only GZip size on delivery really counts)
setTimeout(function() {
let textarea = document.querySelector('[placeholder*="Paste"]');
let title = textarea.closest("[paneltitle]");
let span = title.querySelector(".title span")
let update=()=>setTimeout(()=>{
span.innerText= "Path: "+textarea.value.length + " Bytes";
},100);
document.addEventListener("keyup",update);
document.addEventListener("click",update);
console.warn("loaded PathLengthObserver", textarea);
}, 200);
Related issue ~
- Loading the highly optimised
github.svg
... - Toggle
Minify Output
on/off/on. - Minified output is now larger than original. It has added extra
c
commands, which original skips.
Suggestion:
- If no changes are made, check minified output is actually smaller than input file, otherwise revert to original.
- Avoid inclusion of extra
c
curve commands when avoidable.
PS- Thanks for sharing this fantastic tool! :-)