מה זה קובץ SVG? מדריך פשוט לעקרונות הגרפיקה הווקטורית והשימושים בה

ראשית: מהו SVG?

SVG הוא הקיצור של Scalable Vector Graphics (גרפיקה וקטורית ניתנת להגדלה), פורמט גרפיקה וקטורית פתוח המבוסס על XML שתקניו נקבעו בארגון W3C. ובניגוד ל-PNG ול-JPG שמקבעים את התמונה כרשת של פיקסלים, SVG מתאר צורות באמצעות נוסחאות מתמטיות: קו ישר, מעגל ועקומת בזיר נכתבים בקובץ כקואורדינטות ופקודות נתיב.

ולכן קובץ SVG אינו מטושטש בכל הגדלה: הדפדפן מצייר מחדש את הנוסחאות במידות החדשות במקום למתוח פיקסלים. זהו המשמעות של המילה ״ווקטורי״.

שנית: ההבדל בין SVG ל-PNG / JPG

נושא להשוואה	SVG	PNG / JPG
אופן השמירה	נתיבים מתמטיים (ווקטור)	רשת פיקסלים (רסטר)
בהגדלה	הגדלה בלתי מוגבלת ללא עיוות	מופיעים שיניים וטשטוש
גודל הקובץ	קטן מאוד לצורות פשוטות (כמה קילובייטים)	גדל לינארית עם הרזולוציה
ניתנות לעריכה	טקסט ניתן לעריכה, לשינוי צבע ולאנימציה	דורש תוכנה לעיבוד תמונות
מתאים ל	אייקונים, לוגו, איורים, תרשימים	תמונות ותאורה מורכבת

שלישית: שימושים נפוצים ב-SVG

• אייקונים באתרים ולוגו: קובץ SVG אחד מתאים לכל צפיות מסך ונשאר חד במסכי Retina;
• איורים ותרשימים: ספריות הצגת נתונים כמו ECharts ו-Recharts מפיקות SVG כברירת מחדל;
• דפוס וחריטה: מכונות חריטה בלייזר, מכונות חיתוך ומדפיסי UV מקבלים נתיבי SVG באופן נרחב;
• אנימציה: אפשר להניע נתיבי SVG ישירות באמצעות CSS / SMIL / JavaScript, למשל אפקט של ציור קו.

רביעית: איך פותחים ועורכים קובצי SVG?

דפדפנים (Chrome / Edge / Firefox / Safari) פותחים קובצי SVG ישירות, ותוכנות עיצוב כמו Illustrator, Figma ו-Inkscape (חינמית) עורכים אותם. אם רק רוצים להחליף צבע, להסיר רקע או למחוק חלק מהאיור, אפשר להשתמש בעורך ה-SVG האונליין של PolySVG, ללא התקנת תוכנה כלשהו.

חמישית: איך הופכים PNG / JPG שיש לי ל-SVG?

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

סיכום: SVG הוא פורמט ש״מצייר בנוסחאות״, ולכן הוא מתאים מעצם טבעו לאייקונים, ללוגו ולכל צורה שצריך להגדיל; לתוכן תמונתי עדיין מומלץ להמשיך להשתמש ב-JPG / WEBP.