RedMadRobot / figma-export

Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project
MIT License
719 stars 115 forks source link

Support SVG Optimizer. #94

Open vadimbryl opened 3 years ago

vadimbryl commented 3 years ago

Do you plan to add SVG Optimizer support?

Problem: can't use figma-export when you have many link warnings in your Icon Set and usually you fix it manually, but figma-export doesn't support it. ⚠️ VectorPath: Long vector paths.(Very long vector path, which is bad for performance. Considering reducing precision, removing minor details, or rasterizing vector.)

Possible Solution: it will be great to add a step to optimize SVG before exporting to XML. There is a good SVG Optimizer for it.

subdan commented 3 years ago

Could you please show me an example of complex SVG file with "Long vector paths"?

vadimbryl commented 3 years ago
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 4C20 10.2612 16.1631 15.6309 10.7057 17.8773L6.12272 13.2943C8.36909 7.83696 13.7388 4 20 4ZM4.11039 12.9439C3.91019 13.4689 4.0573 14.0573 4.45459 14.4546L9.54542 19.5454C9.94271 19.9427 10.5311 20.0898 11.0561 19.8896C11.2559 19.8134 11.454 19.7335 11.6501 19.6501L12.12 20.12L13.0022 21.0022L13.162 21.1619L13.6267 21.6267L13.6272 21.6272C14.4512 22.4504 15.8579 22.0612 16.142 20.9321L16.1426 20.9298L16.3567 20.0731L16.6158 19.0367L16.7892 18.343L17.4925 15.53C20.2905 12.4999 22 8.44958 22 4C22 3.76595 21.9953 3.533 21.9859 3.30125C21.9576 2.60007 21.3999 2.04245 20.6988 2.0141C20.467 2.00473 20.2341 2 20 2C15.5505 2 11.5002 3.70947 8.47007 6.50747L5.65704 7.21073L4.96335 7.38415L3.92691 7.64326L3.07019 7.85744L3.06921 7.85769C1.93883 8.14104 1.54913 9.54911 2.37333 10.3733L2.8381 10.8381L2.99777 10.9978L3.88001 11.88L4.34992 12.3499C4.26647 12.546 4.1866 12.7441 4.11039 12.9439ZM5.29418 10.4657C5.55698 10.0139 5.84001 9.57522 6.14203 9.15103L4.41199 9.58355L5.29418 10.4657ZM14.8489 17.858C14.4248 18.16 13.9861 18.443 13.5343 18.7058L14.4164 19.588L14.8489 17.858ZM13 12C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10C12.4477 10 12 10.4477 12 11C12 11.5523 12.4477 12 13 12ZM13 14C14.6569 14 16 12.6569 16 11C16 9.34315 14.6569 8 13 8C11.3431 8 10 9.34315 10 11C10 12.6569 11.3431 14 13 14ZM4.20711 18.2071C4.59763 17.8166 4.59763 17.1834 4.20711 16.7929C3.81658 16.4024 3.18342 16.4024 2.79289 16.7929L1.79289 17.7929C1.40237 18.1834 1.40237 18.8166 1.79289 19.2071C2.18342 19.5976 2.81658 19.5976 3.20711 19.2071L4.20711 18.2071ZM6.20711 18.7929C5.81658 18.4024 5.18342 18.4024 4.79289 18.7929L1.79289 21.7929C1.40237 22.1834 1.40237 22.8166 1.79289 23.2071C2.18342 23.5976 2.81658 23.5976 3.20711 23.2071L6.20711 20.2071C6.59763 19.8166 6.59763 19.1834 6.20711 18.7929ZM8.20711 22.2071C8.59763 21.8166 8.59763 21.1834 8.20711 20.7929C7.81658 20.4024 7.18342 20.4024 6.79289 20.7929L5.79289 21.7929C5.40237 22.1834 5.40237 22.8166 5.79289 23.2071C6.18342 23.5976 6.81658 23.5976 7.20711 23.2071L8.20711 22.2071Z" fill="black"/>
</svg>

or

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L5.6223 7.03651C4.10177 8.12035 2.86872 9.58143 2.05979 11.2831C1.84416 11.7367 1.84416 12.2633 2.05979 12.7169C3.82576 16.4318 7.61296 19 12 19C13.6371 19 15.1906 18.6424 16.5868 18.001L19.2929 20.7071C19.6834 21.0976 20.3166 21.0976 20.7071 20.7071C21.0976 20.3166 21.0976 19.6834 20.7071 19.2929L4.70711 3.29289ZM15.0544 16.4686L14.0315 15.4457C13.871 15.5404 13.7037 15.6239 13.5307 15.6955C13.0454 15.8965 12.5253 16 12 16C11.4747 16 10.9546 15.8965 10.4693 15.6955C9.98396 15.4945 9.54301 15.1999 9.17157 14.8284C8.80014 14.457 8.5055 14.016 8.30448 13.5307C8.10346 13.0454 8 12.5253 8 12C8 11.4747 8.10346 10.9546 8.30448 10.4693C8.37611 10.2963 8.45963 10.129 8.55428 9.96849L7.06074 8.47495C5.73223 9.34859 4.64834 10.565 3.93502 12C5.41004 14.9673 8.46957 17 12 17C13.0719 17 14.1004 16.8126 15.0544 16.4686ZM10.0681 11.4824C10.023 11.6508 10 11.8248 10 12C10 12.2626 10.0517 12.5227 10.1522 12.7654C10.2528 13.008 10.4001 13.2285 10.5858 13.4142C10.7715 13.5999 10.992 13.7472 11.2346 13.8478C11.4773 13.9483 11.7374 14 12 14C12.1752 14 12.3492 13.977 12.5176 13.9319L10.0681 11.4824ZM18.4843 14.2417C19.1185 13.5832 19.6534 12.828 20.065 12C18.5899 9.03269 15.5304 7 12 7C11.7548 7 11.5119 7.0098 11.2716 7.02904L9.52269 5.28009C10.3189 5.09683 11.1481 5 12 5C16.387 5 20.1742 7.56818 21.9402 11.2831C22.1558 11.7367 22.1558 12.2633 21.9402 12.7169C21.4218 13.8074 20.7293 14.799 19.8985 15.6559L18.4843 14.2417Z" fill="black"/>
</svg>
subdan commented 3 years ago

I don’t plan to add support for SVG optimizer.