וקטור SVG (.svg)
W3C תקןהפורמט Scalable Vector Graphics (SVG) הוא פורמט תמונות וקטוריות מבוסס XML עבור גרפיקה דו-ממדית, הכולל תמיכה באינטראקטיביות, עיצוב CSS ואנימציה.
המר SVG ל-PNG
ממיר חינמי מ-SVG ל-PNG פועל בדפדפן. המר קבצים באופן מיידי במכשיר שלך.
כיווץ SVG אונליין
פרטי - הקבצים לעולם אינם עוזבים את המכשיר שלך
בדיקה ומטא-נתונים
מערכות הפעלה ומנתחי קבצים מזהים קבצי SVG על ידי בדיקת רצף הבייטים הבינארי הראשוני:
חתימת כותרת ברמת הבייט (Magic Bytes)
מערכות הפעלה ומנתחי קבצים מזהים קבצי SVG על ידי בדיקת רצף הבייטים הבינארי הראשוני:
חתימת HEX (היסט 0):
3C 73 76 67ייצוג ASCII: <svg
תקינה: W3C Recommendation (SVG 1.1 / SVG 2)
מפרט טכני
| מבנה המכולה | מסמך סימון טקסטואלי מבוסס XML המגדיר גיאומטריית וקטור דו-ממדית |
| דחיסה | דחיסת טקסט Gzip / Brotli (קובצי SVGZ משתמשים בדחיסת gzip) |
| סדר בתים (Endianness) | לא רלוונטי (זרם תווים מבוסס טקסט UTF-8 / UTF-16) |
| מרחבי צבע | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| ערוצים ומבנה | צורות וקטוריות ברזולוציה בלתי מוגבלת, עקומות בזייה, טיפוגרפיה ומסכות שקיפות |
| ממדים מרביים | בלתי תלוי ברזולוציה (מתאים את עצמו אינסופית לכל חלון תצוגה ללא היווצרות של פיקסלים) |
| שקיפות | שקיפות אלפא משתנה מלאה ומצבי שילוב של CSS |
| הזרמה ופרוגרסיביות | ניתוח זרם טקסט פרוגרסיבי נתמך על ידי מנתח ה-XML של הדפדפן |
מטריצת השוואה טכנית: SVG מול מתחרים
| תכונה טכנית | SVG (נוכחי) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| מודל עיבוד | עץ DOM וקטורי במצב שמור | משטח מפת סיביות במצב מיידי | מיכל עמוד קבוע במצב שמור | רשת פיקסלים רסטרית |
| עיצוב ו-CSS | אפשר לעצב במלואו באמצעות מחלקות ומשתני CSS | דורש ציור מחדש באמצעות ממשק ה-API של קנבס ב-JavaScript | ללא עיצוב CSS דינמי | פיקסלים רסטריים קבועים |
| יכולת שינוי קנה מידה ללא הגבלה | כן (עקומות וקטוריות מתמטיות) | דורש שינוי ידני של הרזולוציה | כן (רכיבים וקטוריים) | לא (מטושטש בעת הגדלה) |
| אינטראקטיביות | אירועי DOM מובנים (מעבר עכבר, לחיצה והנפשות) | דורש חישובים ידניים לזיהוי נקודת פגיעה | מסמך סטטי | דורש מפת תמונה או קנבס |
מצבי השחתה נפוצים ומדריך שחזור הקסדצימלי (Hex)
הדפדפן מציג שגיאת ניתוח XML: תגית סגירה חסרה או תגית לא תואמת.
גורם שורש: תחביר XML פגום, תגיות סגירה חסרות, או סימני אמפרסנד שלא עברו escaping ('&' במקום '&').
שחזור: בצע אימות באמצעות בודק תחביר XML (כגון xmllint file.svg) ותקן תגיות לא מאוזנות.
ניתוח אבטחה ווקטורי תקיפה נגד מנתחי פורמטים (parsers)
מכיוון ש-SVG הוא קוד XML בר-הרצה התומך בתגיות '<script>' ובישויות חיצוניות, הצגתו של SVG שאינו מהימן כרוכה בסיכוני XSS ו-SSRF משמעותיים.
ווקטורי תקיפה ידועים
- התקפת סקריפטים חוצי אתרים (XSS) מאוחסנת באמצעות תגיות '<script>' מוטמעות או מטפלי אירועים 'onload='.
- התקפות ישות XML חיצונית (XXE) הקוראות קובצי שרת מקומיים בעת ניתוח בשרתים עורפיים.
- הרחבת ישויות XML מסוג Billion Laughs הגורמת למניעת שירות.
שיטות מומלצות להגנה: נקה תמיד קובצי SVG באמצעות DOMPurify לפני הטמעה, או הגש קובצי SVG עם כותרת 'Content-Security-Policy: default-src 'none'' או כתגיות '<img>' המנטרלות סקריפטים באופן אוטומטי.
היסטוריה ואבני דרך
יתרונות מרכזיים
- אי-תלות ברזולוציה: קווים וטיפוגרפיה נשארים חדים בכל תצוגה ובכל קנה מידה להדפסה.
- קובצי SVG קטנים במיוחד עבור לוגואים, סמלים ורכיבי ממשק משתמש.
- ניתן להוסיף לו סקריפטים ולעצב אותו במלואו באמצעות CSS ו-JavaScript בתוך ה-DOM של הדפדפן.
מגבלות טכניות וחסרונות
- אינו מתאים לצילומים או לתמונות מורכבות בעלות גוונים רציפים.
- נתיבים וקטוריים מורכבים עם אלפי צמתים עלולים לגרום להשהיית עיבוד מעבד ולצריכת סוללה גבוהה.
- אופי ה-XML מאפשר הטמעת סקריפטים, ולכן נדרשים ניקוי וחיטוי קפדניים לפני עיבוד של העלאות ממקורות לא מהימנים.
עובדות טכניות מעניינות
- Gzip יכול להקטין במידה ניכרת קבצים מסוימים של SVG; מידת ההקטנה תלויה בתוכן המסמך ובהגדרות הדחיסה.
- מאפיין ה-viewBox מגדיר מרחב קואורדינטות אבסטרקטי הממופה באופן דינמי לפיקסלים פיזיים של המסך.
- דפדפני אינטרנט מוקדמים לא כללו מנועי SVG מובנים, ולכן Adobe הפיצה את התוסף Adobe SVG Viewer לפני שהתבססה תמיכה מובנית בדפדפנים, בסביבות 2011.
שאלות טכניות נפוצות
האם קובצי SVG יכולים להכיל קוד זדוני?
כן. מכיוון ש-SVG הוא XML תקני, הוא יכול להכיל קוד JavaScript מוטמע ('<script>') המופעל אם ה-SVG נטען ישירות בדפדפן או נפתח בתוך אלמנט '<svg>' פנימי. הגשת קובצי SVG דרך תגית '<img>' מנטרלת אוטומטית את הרצת הסקריפט.
מתי כדאי להשתמש ב-SVG במקום ב-PNG?
השתמש ב-SVG עבור סמלים, לוגואים, תרשימים, איורים וטיפוגרפיה שבהם נדרשים קנה מידה חד בכל גדלי המסך וקובצי מדיה קטנים. השתמש ב-PNG או WebP עבור צילומים.
כיצד אוכל לבצע אופטימיזציה לקובצי SVG גדולים או מורכבים?
אפשר לנקות נתיבים וקטוריים באמצעות הסרת מטא-נתונים מיותרים, הערות מעורכים (כגון Inkscape או Illustrator), קבוצות בלתי נראות והצהרות מרחב שמות שאינן בשימוש, בכלים כמו SVGO או באמצעות דחיסת SVG.
זוגות המרה קשורים ל-SVG
המרת קובצי SVG וקטוריים לתמונות PNG רסטריות הופכת גרפיקה מבוססת קוד, שניתנת לשינוי גודל, לרשת פיקסלים קבועה לתאימות עם מגוון רחב של יישומים.
הטמעת תמונות רסטר מסוג PNG בתוך מכולת SVG XML וקטורית מאפשרת שינוי גודל רספונסיבי באינטרנט ושילוב בפריסות התואמות לגרפיקה וקטורית.
המרת רשומות ציור וקטוריות בנות 16 סיביות של Windows GDI לנתיבי SVG מודרניים וניתנים להרחבה, ללא אובדן רזולוציה.
המרת גרפיקת Enhanced Metafile של Windows בת 32 סיביות לגרפיקה וקטורית נקייה בפורמט SVG, הניתנת להתאמה לכל גודל, לשימוש באינטרנט ובתוכנות עיצוב.
המרת שרטוט DXF לייצוא CAD בפורמט SVG הופכת נתוני וקטור הנדסיים מורכבים לגרפיקת XML קלת משקל עבור דפדפני אינטרנט ועורכי וקטור.
המרת קובצי Scalable Vector Graphics לפורמט Drawing Exchange Format ממירה גרפיקה וקטורית המותאמת לאינטרנט לקואורדינטות מתמטיות מדויקות הנדרשות לתוכנות תכנון בעזרת מחשב.
שתף לוגו או איור בפורמט SVG כקובץ PDF בן עמוד אחד. הנתיבים הווקטוריים הופכים לתמונה בעלת רזולוציה קבועה, כך שקירוב (זום) אינו יכול לשחזר את פרטי הווקטור.