IBM-Design / icons

IBM Design Language Icons
http://www.ibm.com/design/language/resources/icon-library
Other
194 stars 41 forks source link

Icons should be made with compound paths #21

Open Moodycomputer opened 9 years ago

Moodycomputer commented 9 years ago

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 commented 8 years ago

@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?