MaterialDesign icon indicating copy to clipboard operation
MaterialDesign copied to clipboard

Please use arcs instead of curves

Open KTibow opened this issue 2 years ago • 3 comments

What is your question?

Many icons use curves for circular shapes. These should be arcs, as arcs are smaller. Should I make a PR to switch them to arcs? From what I read it sounds like external contributions aren't allowed. If that's the case, it would be nice if people with contribution permissions could do this.

KTibow avatar Nov 04 '23 21:11 KTibow

@KTibow We use a script on our side to optimize paths in the database. Note we only store paths as absolute values also. Can you share an example icon and the path optimization and we can look into fixing our database values and re-exporting the icons with a comparison.

Templarian avatar Nov 13 '23 15:11 Templarian

Note: I think we had issues with some arcs in the font generation script, but it's been many years so that is probably resolved in the library we use to generate fonts.

Templarian avatar Nov 13 '23 15:11 Templarian

Example 1 Current icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>backup-restore</title><path d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" /></svg>

Expected icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>backup-restore</title><path d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 7.94,17.7L6.5,19.14A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" /></svg>

Here I changed one of the closing curves to an arc in the circle.

Example 2 (more extreme) Current icon:

<svg xmlns="http://www.w3.org/2000/svg" id="mdi-account-music" viewBox="0 0 24 24"><path d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11,12C9.92,12 9,11.61 8.18,10.83C7.38,10.05 7,9.11 7,8C7,6.92 7.38,6 8.18,5.18C9,4.38 9.92,4 11,4C12.11,4 13.05,4.38 13.83,5.18C14.61,6 15,6.92 15,8C15,9.11 14.61,10.05 13.83,10.83C13.05,11.61 12.11,12 11,12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15C17.86,15 18.19,15.07 18.5,15.21V10Z" /></svg>

Expected icon:

<svg xmlns="http://www.w3.org/2000/svg" id="mdi-account-music" viewBox="0 0 24 24"><path d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11 12A4 4 0 01 11 4A4 4 0 01 11 12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15A2.5,2.5 0 0,1 18.5 15.21V10Z" /></svg>

Here I changed a closing curve as well as converting the head to use arcs.

Note These icons are unoptimized in some other ways, and that's partially fine because I can use an external tool like SVGO to optimize them. However there are some things it can't do, including converting non-perfect curves into arcs, which is why I had to open this issue.

Note Using the SVG <circle> tag would be even more optimized, however given that MDI publishes versions that are just paths, it seems like all icons have to be represented as a single path, so this is probably not applicable.

KTibow avatar Nov 13 '23 23:11 KTibow