איך לייצא קובץ SVG
קהילת אלמנטור ישראל
מערכת קהילת אלמנטור ישראל

איך לייצא קבצי 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
הפוסט שמרכז את הנושא בקהילה

אהבתם ?

אל תשכחו לשתף איתנו תגובות באתר, בערוץ היוטיוב שלנו או בקהילה שלנו בפייסבוק

שיתוף ב linkedin
שיתוף ב twitter
שיתוף ב email
שיתוף ב whatsapp
שיתוף ב facebook

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

עדכונים מהקהילה

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

* בדיוק כמוכם גם אנחנו לא אוהבים ספאם – מבטיחים לעדכן רק בדברים מעניינים

דילוג לתוכן