דלג לתוכן הראשי

ממטב ומכווץ SVG בחינם

הסר מטא-נתונים, כווץ רווחים ועגל עשרוניות להקטנה דרמטית בגודל קובץ SVG — הפחתות טיפוסיות של 30-70%. תצוגה מקדימה ויזואלית מאמתת שכלום לא נשבר.

פועל לא-מקוון לאחר טעינה

שחרר קובץ כאן, או לחץ כדי לעיין

SVG · מעובד במכשיר שלך

או הקישו Ctrl+V כדי להדביק מהלוח

עיין בקבצים
— או הדביקו SVG למטה —

הקבצים שלך לעולם לא עוזבים את המכשיר. כל העיבוד מתבצע מקומית בדפדפן שלך.

שימושים נפוצים

  • אופטימיזציה צפיפויות SVG לייצורהסר מטא-נתונים מיותרים מ-SVG של צפיפויות לפני שליחה — הפחתה אופיינית של 50-80%.
  • אופטימיזציה לוגו SVG של מותגהקטן את גודל קובץ SVG של הלוגו לטעינת אתר מהירה ללא קורבן איכות.
  • אופטימיזציה איורים ו-Hero SVGלאיורים גדולים יותר (heroes, גרפיקה דקורטיבית), אופטימיזציה יכולה לחסוך 30-70% מגודל הקובץ.
  • הפחת גודל חבילת JavaScriptכאשר SVG מיובאים כרכיבי React או מובנים בקוד, אופטימיזציה מכווצת את החבילה JS שלך.
  • נקה ייצוא SVG של Figma / Sketchייצוא SVG של Figma ו-Sketch מכיל מטא-נתונים נרחבים. הסר אותו לפני שימוש בייצור.

כיצד זה עובד

כלי זה מקטין גודל קובץ SVG באמצעות מייעל כתוב-יד שפועל כולו בדפדפן שלך — ללא ספריות, ללא שרת. הוא משלב שני מעברים: DOMParser/XMLSerializer המובנים של הדפדפן לעבודת דיוק ברמת-מאפיין, והחלפות ביטוי רגולרי ממוקדות להסרת הערות, הסרת מטא-נתונים, וכיווץ רווח.

  1. 1
    DOMParser מטהר את ה-SVG
    לפני כל אופטימיזציה, DOMParser המובנה של הדפדפן קורא את ה-SVG כ-XML ועובר על כל אלמנט. תגיות script, מטפלי אירוע (כל מאפיין on*), אלמנטי אנימציה, והפניות כתובת חיצוניות מוסרים ללא תנאי — זה קורה ללא קשר לאילו אפשרויות אופטימיזציה תבחר.
  2. 2
    עיגול עשרוני מבוסס-DOM
    אם עיגול עשרוני מופעל, המייעל עובר על ה-DOM המפוענח פעם שנייה ומחיל עיגול רק על מאפיינים מספריים ידועים (נתוני path d, קואורדינטות, ערכי transform, רוחבי stroke וכו'), באמצעות ביטוי רגולרי שמתאים מספרי נקודה-צפה בודדים בלי לפגוע בערכי נתיב משורשרים כמו .5.5.
  3. 3
    מעברי ביטוי רגולרי מנקים את הסימון שהומר למחרוזת
    XMLSerializer מפיק XML מנורמל, ואז החלפות מחרוזת ממוקדות מסירות הערות HTML, מטא-נתוני עורך Inkscape/Sodipodi, את הצהרת ה-XML, מאפייני ברירת מחדל מיותרים (כמו version="1.1"), ורווח בין-תגיות — כל מעבר בתחום צר כך שתוכן צומת-טקסט לעולם לא נפגע.
  4. 4
    גודל Gzip ופורמטי ייצוא
    CompressionStream API של הדפדפן מחשב את גדלי ה-gzip האמיתיים של הקלט והפלט, מכיוון שזה מה שבאמת קובע את עלות ההעברה באינטרנט. ה-SVG הממוטב ניתן להורדה, העתקה כ-SVG גולמי, המרה למאפייני camelCase מוכני-React JSX, או קידוד ככתובת נתוני CSS — כל ההמרות קורות מקומית.

ה-SVG שלך נקרא ומעובד כולו בתוך לשונית הדפדפן שלך — בייטי הקובץ לעולם לא יוצאים מהמכשיר שלך.

כלים קשורים

שאלות נפוצות