אופטימיזציית SVG
נקו SVG לפני שהוא נכנס לרכיב, ערכת אייקונים או חבילת נכסים סטטיים.
הגדרות אופטימיזציה
דיוק נמוך יותר יכול לכווץ את הקובץ עוד יותר, אבל עיגול אגרסיבי עלול לעוות נתיבים. ערך של 2 או 3 הוא ברירת מחדל טובה.
איך SVG אופטימיזציה עובדת
הסירו נתונים שלא משפיעים על הרינדור
ייצוא עיצובים כולל לרוב מטא נתונים, הערות, מרחבי שמות של עורך וסימון בלתי נראה שמוסיף בתים מבלי לשנות את התמונה המעובדת.
הפחיתו דיוק נתיבים
לעתים קרובות ניתן לעגל קואורדינטות כגון 10.5432109 ל-10.54 ללא הבדל נראה לעין, במיוחד עבור סמלים המוצגים בגדלים קטנים.
בדקו לפני הפרסום
אופטימיזציה צריכה לשמור על תקינות viewBox, fill, stroke, תוויות ARIA ומזהים חשובים כשהם משפיעים על רינדור, סגנון, אנימציה או נגישות.
שאלות נפוצות
האם ה-SVG הממוטב ייראה מטושטש?
לא. SVG מבוסס וקטור, כך שהאופטימיזציה חותכת את הסימון במקום לרסטר את התמונה. הסיכון היחיד הוא עיגול ערכי נתיב בצורה אגרסיבית מדי.
מדוע SVG מותאם יכול לפעמים להיות גדול יותר?
אם הקובץ המקורי כבר היה דחוס היטב או מותאם באופן ידני, ייתכן שנותר מעט להסרה. במקרים אלה, הפלט יכול להיות דומה בגודלו או מדי פעם קצת יותר גדול.
האם זה תומך באופטימיזציה של אצווה?
דף זה מיועד לבדיקה וכוונון של קובץ בודד. לאופטימיזציה באצווה, השתמשו בכלי build כמו SVGO בתהליך שלכם.
האם אופטימיזציה SVG יכולה לשבור אנימציות או סגנון?
כן, אם כלי אופטימיזציה מסיר מזהים, classes, מטא-דאטה או דיוק שעליהם CSS או JavaScript מסתמכים. צפו בתצוגה מקדימה של התוצאה ושמרו תכונות חשובות כאשר ה-SVG אינטראקטיבי.
האם קובצי SVG דקורטיביים צריכים לכלול תוויות נגישות?
בדרך כלל ניתן להסתיר קובצי SVG דקורטיביים מטכנולוגיה מסייעת. סמלים ואיורים אינפורמטיביים צריכים לשמור על כותרות משמעותיות, תוויות או טקסט מסביב.