svg-path-editor icon indicating copy to clipboard operation
svg-path-editor copied to clipboard

Calculate optimal path

Open Danny-Engelman opened this issue 4 years ago • 3 comments

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?

Danny-Engelman avatar Dec 03 '20 17:12 Danny-Engelman

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

Yqnn avatar Dec 08 '20 07:12 Yqnn

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

Danny-Engelman avatar Dec 08 '20 19:12 Danny-Engelman

Related issue ~

  1. Loading the highly optimised github.svg...
  2. Toggle Minify Output on/off/on.
  3. 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! :-)

ace-dent avatar Nov 01 '21 17:11 ace-dent