Skip to content
This repository has been archived by the owner on Nov 4, 2022. It is now read-only.

Icons should be made with compound paths #21

Open
Moodycomputer opened this issue Nov 18, 2015 · 1 comment
Open

Icons should be made with compound paths #21

Moodycomputer opened this issue Nov 18, 2015 · 1 comment

Comments

@Moodycomputer
Copy link

Turning an icon in to a compound path affords a handful of benefits. A group can be accidentally ungrouped pretty easily in a working session, while a compound path is a little more resilient.

We also save a few bits when exporting a compound path SVG vs multiple elements. As an example, the zoom icon as multiple elements is 429 bytes:

<g>
    <path d="M44,0C19.7,0,0,19.7,0,44c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44C88,19.7,68.3,0,44,0z M44,84C21.9,84,4,66.1,4,44
        S21.9,4,44,4c22.1,0,40,17.9,40,40S66.1,84,44,84z"/>
    <rect x="91.5" y="80.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -41.4214 100)" width="17" height="39.6"/>
    <circle cx="80" cy="80" r="4"/>
    <polygon points="48,20 40,20 40,40 20,40 20,48 40,48 40,68 48,68 48,48 68,48 68,40 48,40    "/>
</g>

vs as a compound path at 316 bytes:

<path d="M44,0C19.7,0,0,19.7,0,44c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44C88,19.7,68.3,0,44,0z M44,84C21.9,84,4,66.1,4,44
    S21.9,4,44,4c22.1,0,40,17.9,40,40S66.1,84,44,84z M120,108l-12,12L80,92l12-12L120,108z M80,84c-2.2,0-4-1.8-4-4s1.8-4,4-4
    s4,1.8,4,4S82.2,84,80,84z M48,40h20v8H48v20h-8V48H20v-8h20V20h8V40z"/>
@seejamescode
Copy link
Collaborator

@Moodycomputer Can the compound path be done at our automated Illustrator build stage or does it need to be done by an individual in Illustrator?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants