קובץ SVG גדול מדי? שמונה טיפים לדחיסה ולאופטימיזציה
איך דוחסים קובץ SVG גדול? המאמר מציג שמונה טיפים יושמים: הפחתת נקודות עוגן, מיזוג נתיבים, הסרת מטא־דאטה של העורך, הפחתת דיוק העשרוניות, דחיסה אוטומטית עם SVGO, שימוש חוזר בסמלים, שליטה בשכבות הצבע ודחיסה בהעברה.
קובצי SVG מגיעים לעיתים קרובות למאות קילובייטים ואפילו לכמה מגה־בייטים, והסיבה הרגילה לכך היא יותר מדי נקודות עוגן, נתיבים מיותרים, מטא־דאטה של העורך ודיוק עשרוניות גבוה. שמונת הטיפים שלהלן מסודרות לפי הסדר ״מהמקור עד המסירה״, וכולן ניתנות ליישום.
ראשית: ברמת הנתיב; הפחיתת נקודות עוגן ומיזוג נתיבים
טיפ 1: הפחתת נקודות עוגן (פישוט הנתיב)
ככל שיש יותר נקודות עוגן, הקובץ גדול והתצוגה איטית יותר. בעת ההמרה הגדילו מעט את רכות הקצות כדי להפחית נקודות עוגן כבר מהמקור; לקבצים קיימים אפשר לקצץ נקודות עודנות באמצעות ״אובייקט ← נתיב ← פשט״ ב-Illustrator או ״נתיב ← פשט״ (Ctrl+L) ב-Inkscape. בכלי ההמרה של PolySVG אפשר גם לכוון את הרכות ואת מספר הצבעים ולראות את האיזון בין האיכות לנפח בזמן אמת.
טיפ 2: מיזוג נתיבים ושכבות
מזגו נתיבים בעלי צבע מילוי זהה לנתיב אחד כדי להפחית מאפיינים כפולים; שטחו קבוצות קינון חסרות משמעות, ומחקו שכבות מוסתרות ורכיבים ריקים. בתוכנות עיצוב אפשר להשתמש באפשרות ״איחוד״ של כלי הנתיבים או למזג שכבות לפני הייצוא.
שנית: בתוך הקובץ; מחיקת מטא־דאטה והורדת הדיוק
טיפ 3: הסרת מטא־דאטה של העורך
קובצי SVG שייצאו מ-Illustrator ומ-Inkscape נושאים לעיתים קרובות מרחבי שמות של העורך, <metadata>, הערות והגדרות ייצוא, ואף אחד מהם משפיע על התצוגה; מוחקים אותם ידנית או משאירים את SVGO לנקות אותם אוטומטית. שימו לב לשמור על <title> ו־<desc>, שהם תורמים לנגישות.
טיפ 4: הפחתת דיוק העשרוניות
קואורדינטות הנתיבים נושאות לרוב שש עד שמונה ספרות עשרוניות, ואילו תצוגה על מסך זקוקה לספרה או שתיים בלבד. בהגדרות SVGO הורידו את דיוק המספרים (floatPrecision) ל-1 או 2; הנפח יורד בבירור ללא הבדל נראה לעין. באייקונים קטנים במיוחד היזהרו לא לדחוס את הקואורדינטות יותר מדי, כדי שהצורה לא תתעוות.
שלישית: אוטומציה; דחיסה בלחיצה עם SVGO
טיפ 5: אופטימיזציה אוטומטית עם SVGO
SVGO הוא כלי האופטימיזציה המקובל בתחום, ובו עשרות תוספים: הסרת הערות ומטא־דאטה, מיזוג נתיבים, אופטימיזציה של פקודות נתיב וניקוי מספרים. השימוש הבסיסי:
npx svgo input.svg -o output.svg
גודל הקובץ האופייני יכול להתכווץ ב-30% עד 70%. שימו לב לשני דברים: אל תמחקו את המאפיין viewBox, אחרת ההגדלה תתקבל שבורה; ואם אייקונים אמורים להיצבע באמצעות CSS, שמרו על ירושת ה-fill ואל תקבעו צבע קבוע.
השוו בין גודל הקובץ לפני ואחרי האופטימיזציה, ובין גודל ההעברה בפועל בכלי המפתחים של הדפדפן, כדי לוודא את הרווח; שנו סוג אחד של פרמטרים בכל פעם, כך שאם מתגלה תקלה קל לאתר מקורה.
רביעית: מבנה ושימוש חוזר; סימבוליזציה ושליטה בשכבות צבע
טיפ 6: שימוש חוזר ב-defs וב-use
כאשר אייקון אחד מופיע בדף כמה פעמים, הגדירו אותו פעם אחת בתוך <defs> והפנו אליו בכמה <use>, או אספו אותו לתמונת sprite; כך גם הנפח וגם מספר הבקשות יורדים.
טיפ 7: שליטה בשכבות הצבע והימנעות מהטמעת תמונות רסטר
הורידו את מספר הצבעים בעת הווקטוריזציה כדי לצמצם את שכבות הצבע; השתמשו בצבע אחיד במקום בגרדיאנט מורכב כל עת שאפשר. הימנעו במיוחד מהטמעת תמונות רסטר ב-base64 בתוך SVG, כי הדבר הופך את הקובץ הווקטורי למחזיק תמונה רסטר והנפח יוצא משליטה. נתיבים מיותרים שנותרו אחרי ההמרה אפשר למחוק בלחיצה בעורך האונליין.
חמישית: מסירה; דחיסת העברה ומטמון
טיפ 8: הפעלת gzip/Brotli ומטמון
SVG הוא טקסט, וכאשר gzip/Brotli מופעלים בשרת, גודל ההעברה יורד בדרך כלל ב-60% עד 80% נוספים; הגדירו לקבצים סטטיים כותרות מטמון ארוכות. אייקונים קטנים מאוד אפשר להטמיע ישירות ב-HTML ולחסוך את הבקשה. העיקרון מפורט ביתרונות של SVG; ולמי שרוצה לשלוט בנפח כבר משלב ההמרה, מומלץ לקרוא את שיטות המרת תמונה ל-SVG.
הסדר חשוב: מתחילים במקור, שולטים בנקודות העוגן ובשכבות הצבע, מנקים בתוך הקובץ מטא־דאטה ודיוק, מריצים SVGO ולבסוף דוחסים את ההעברה. שילוב ארבעת השלבים האלה מצמצם את נפח ה-SVG בדרך כלל בסדר גודל.
שאלות נפוצות
האם דחיסת SVGO משנה את מראה הגרפיקה?
בהגדרות ברירת המחדל כמעט לא רואים הבדל. שמרו על viewBox, הימנעו מהורדת דיוק הקואורדינטות מדי באייקונים קטנים, ובמידת הצורך כבו תוספים אגרסיביים אחד אחד.
כמה אפשר לדחוס קובץ SVG בדרך כלל?
זה תלוי בשיעור הכפילויות שבקובץ, והטווח הנפוץ הוא הקטנה של 30% עד 70%; עם gzip/Brotli בשרת, גודל ההעברה יורד עוד ב-60% עד 80%.