עקוב אחר דוגמה מעשית זו, ולאחר מכן התאם את אותם פקדים לתמונה שלך. פתח את דוחס SVG.
העלה SVG סטטי או הדבק את הסימון
פתח את מדחס SVG ובחר קובץ SVG או נסה דוגמה. הדוגמה היא svg-compressor.svg, סימן מסלול של 985 בתים עם viewBox של 512 × 512, מילוי הדרגתי, כותרת ותיאור. השתמש ב-הדבק SVG כאשר הסימון כבר נמצא בעורך או בלוח.
הכלי מקבל עד 20 קבצים בגודל 2 MB כל אחד. הוא מנתח מסמך SVG מלא ומסיר הצהרות מסמך SVG סטנדרטיות מבלי לטעון קבצים חיצוניים. XML פגום, הצהרות ישות מותאמות אישית ותתי-מסמכים פנימיים נדחים. קבצים מורכבים מאוד יכולים גם להגיע למגבלת האלמנטים או זמן העיבוד.
תהליך עבודה זה מייצר גרפיקת וקטור סטטית. סקריפטים, מטפלי אירועים, משאבים חיצוניים, אנימציה ותמונות רסטר מוטמעות מוסרים. התצוגה המקדימה המקורית כבר מטוהרת, לכן אין לפרש אותה כעיבוד בלתי מוגבל של כל תכונה בקובץ המקור.
שמור עותק של ה-SVG המקורי. איור אינטראקטיבי או SVG המכיל תצלום הם מקרה שימוש שונה מוקטור סטטי.
השווה את התוצאה והגדר דיוק עשרוני
שני לוחות התצוגה המקדימה מציגים את המקור המטוהר ואת התוצאה המותאמת. גדלים ליד מקורי ומותאם וסיכום הבתים משווים את קובץ המקור עם הפלט המוגמר. הוא מדווח על עלייה כאשר אופטימיזציה הופכת קובץ מסוים לגדול יותר במקום להבטיח הפחתה בכל פעם.
פתח הגדרות והגדר דיוק עשרוני ל-2 עבור הדוגמה. הדיוק נע בין 1 ל-5 ומתחיל ב-3. ערכים נמוכים יותר יכולים לפשט גיאומטריה מספרית אך עלולים להזיז עקומות עדינות, רווחים קטנים או קצוות מיושרים. העלה אותו כאשר התצוגה המקדימה מאבדת פרטים חשובים.
דוגמה זו משתמשת בגיאומטריה פשוטה, לכן דיוק 2 שומר על צורתה המוכרת. קבצי SVG אחרים עם קואורדינטות עשרוניות מורכבות עשויים להשתנות יותר. הצג סימון SVG מותאם חושף את הטקסט בפועל שיוורד; זהו אינו ייצוג נפרד של המקור.
בדוק וקטור בגודל התצוגה המיועד שלו ובתצוגה גדולה יותר. שינוי עדין יכול להיות קשה לראייה בתמונה ממוזערת קטנה.
הדוגמה במדריך זה
נסה דוגמה: svg-compressor.svg, 985 בתים, 512 × 512 viewBox. דיוק עשרוני 2; שמור כותרות/תיאורים נגישים וקצר מזהים פנימיים מופעלים; ממדים רספונסיביים וסימון פלט קריא מושבתים. הורד SVG: 635 בתים.
- מקור SVG
- 985 בתים
- אופטימיזציה של SVG
- 635 בתים
- הפחתה שנמדדה
- 35.5%
- הקשר שנשמר
- כותרת, תיאור ו-512 × 512 viewBox
שמור תיאורים ושקול מזהים חיצוניים
השאר את שמור כותרות ותיאורים נגישים מופעל עבור הדוגמה המעובדת. זה שומר על הכותרת והתיאור של SVG תוך הסרת מטא-נתוני עורך מיותרים ופישוט סימון זכאי. אלו הם סוגים שונים של מידע ואין להתייחס אליהם כניתנים להחלפה.
קצר מזהים פנימיים מופעל כברירת מחדל. האופטימיזטור מעדכן הפניות בתוך ה-SVG, אך CSS חיצוני או JavaScript עשויים עדיין להסתמך על המזהים המקוריים. כבה אפשרות זו כאשר הקובץ הוא חלק מאפליקציה גדולה יותר שנותנת שמות לאלמנטים שלה, ובדוק את ה-SVG המוגמר בהקשר זה.
השאר את 'ממדים רספונסיביים' ו'סימון פלט קריא' כבויים עבור דוגמה זו. 'ממדים רספונסיביים' מסירים רוחב וגובה קבועים כאשר ה-viewBox של הקואורדינטות יכול לספק גודל ניתן להרחבה. 'פלט קריא' מוסיף הזחה ושימושי לתחזוקה, אך עלול להגדיל את גודל הטקסט.
עבור קובץ אייקון עצמאי, ניקוי מזהים פנימיים הוא בדרך כלל פשוט. עבור תרשים עם סקריפט חיצוני, שמירה על מזהים עשויה להיות חשובה יותר מכמה בתים שנחסכו.
הורד ואמת את הווקטור המוגמר
בחר 'התחל', ולאחר מכן 'הורד'. הפלט המעובד הוא 635 בתים בהשוואה למקור של 985 בתים: הפחתה של 35.5%. הכותרת והתיאור שלו נשארים, וההשוואה המוצגת מרונדרת מהמקור האמיתי ומה- SVG שהורד.
המאמר מרנדר את שני הווקטורים ב-1,024 פיקסלים להמחשה חדה של התוצאה; גודל הקואורדינטות הלוגי שלהם נשאר 512 × 512. תצוגה מקדימה גדולה יותר אינה מוסיפה תוכן רסטר ל-SVG שנשמר. סקור את הווקטור בפועל בדף היעד שלך לפני החלפת נכס ייצור קיים.
קובץ אחד יורד כ-SVG עם שם הבסיס המקורי שלו. אצווה יורדת כקובץ ZIP אחד, עם סיומות ממוספרות עבור שמות קבצים כפולים. העיבוד מתבצע בדפדפן. שמור את המקור אם ברצונך לנסות הגדרות אופטימיזציה שונות מאוחר יותר.
חיסכון בגודל הקובץ נמדד מול דוגמה זו בלבד. SVG שעבר אופטימיזציה כבר עשוי להראות שיפור מועט או להפוך למעט גדול יותר.
שאלות נפוצות
האם ה-SVG המותאם ייראה בדיוק אותו דבר?
האופטימיזטור שואף לשמר מראה סטטי, אך עיגול והסרה של תוכן לא נתמך עלולים לשנות קובץ. השווה את התצוגות המקדימות ובדוק את ה-SVG שנשמר בפרויקט שלך.
מה משנה דיוק עשרוני?
הוא שולט בדיוק המשמש לנתוני גיאומטריה ונתיבים מספריים. ערכים נמוכים יכולים להקטין את הגודל אך עלולים להזיז פרטים עדינים. ברירת המחדל היא 3.
האם זה שומר על הכותרת והתיאור?
כן, כברירת מחדל. השאר את 'שמור כותרות ותיאורים נגישים' מופעל כדי לשמר את האלמנטים האלה SVG.
מדוע סקריפטים או תמונות רסטר חסרים?
כלי זה יוצר פלט וקטורי סטטי. סקריפטים, אירועים, משאבים חיצוניים, אנימציה ותמונות רסטר מוטמעות מוסרים בכוונה במהלך הניקוי.
האם אוכל לשמור מזהים שאליהם מתייחס CSS?
כבה את 'קצר מזהים פנימיים' כאשר קוד חיצוני תלוי במזהים ספציפיים. אמת את הקובץ המותאם בדף היעד לפני החלפת המקור.
האם קבצי SVG מועלים לצורך אופטימיזציה?
לא. הכלי מבצע ניתוח ואופטימיזציה בדפדפן ומוריד את התוצאה באופן מקומי.
האם אוכל להעלות SVG עם DOCTYPE?
הצהרת מסמך SVG סטנדרטית מתקבלת ומוסרת ללא הבאת המזהה החיצוני שלה. הצהרות ישות מותאמות אישית ותתי-קבוצות של מסמכים פנימיים נדחים.
הפוך את הווקטור לקל יותר, עם תוצאה שניתן לבדוק.
נסה דוגמה או השתמש בקובץ משלך, ועיין בתוצאה לפני השיתוף.
