איך לייצא קבצי SVG מאילוסטרייטר כדי שלא ישנו צבעים

מה זה SVG?

קובץ SVG הוא קובץ ווקטורי אשר לרוב מומלץ לעבוד איתו יותר מאשר גרפיקה רגילה של PNG או JPG (כשאפשר).

הבעיה

לפעמים כאשר אנחנו מעלים יותר מקובץ SVG אחד לאלמנטור, אנחנו מייד נתקלים בבעיה – הצבעים משתנים

למה זה קורה?

הסיבה שזה קורה היא בגלל סוג הייצוא הרגיל מאילוסטרייטור.

בקוד של הקובץ, הוא מוגדר עם Class של כל קבצי ה-SVG באתר, כך שהקובץ האחרון שעולה לאתר, הוא יהיה הקובץ "השולט" והצבעים שלו יחולו על שאר קבצי ה-SVG הקודמים.

הפתרון

ישנן שתי דרכים בהן ניתן לייצא מאילוסטרייטור קבצי SVG ללא ה-class ובעצם לאפשר העלאה של הקבצים ללא השפעה על קבצים אחרים באתר.

דרך ייצוא 1:

Files > Save As > SVG > Newname > More Options> CSS Properties > Style Atributes

דרך ייצוא 2:

• לסמן את כל הצורות > מקש ימני
• Collect For Export > As Single Asset > Newname
• ללחוץ על הריבוע הקטן (ליד כפתור export) > בחירה ב-SVG
• גלגל הגדרות > SVG > מוודאים שאנחנו על In Line Style ולא על CSS
• מוודאים ש Object Id על Uniqe
• Export Assets
• מעלים לאתר וזהו 🙂

קבלו טיפ SVG בהקשר של אלמנטור

• ווידג'ט אייקון יטמיע את תמונת הSVG כחלק מקוד העמוד.
• ווידג'ט תמונה יקרא לקובץ ויטען אובייקט נוסף בדפדפן.

אם יש לכם ריבוי אלמנטים זה חשוב באספקטים של טעינה.תודה ל Roy Eyal מאלמנטור 

עוד בנושא (הקישורים מובילים לקהילה וכדי לצפות בהם תצטרכו להצטרף)

פוסט על שמירה נכונה באילוסטרייטור של SVG – Shimon Shomron
כלים לאופטימזציה של קבצי SVG (כיווץ)
https://www.svgminify.com/
https://jakearchibald.github.io/svgomg/
https://imageoptim.com/mac
הפוסט שמרכז את הנושא בקהילה