גרפיקה וקטורית היא שיטה להצגת סדרה של צורות, קואורדינטות ונתיבים להקשר העיבוד שלהן. ההוראות הן סדרה של הוראות לציור. כשגודל התמונה גדל או קטן, קבוצת הנקודות והקווים שהתמונה מייצגת משורטטת מחדש בהתאם לקנה המידה. עקומה חלקה בין שתי נקודות תיווצר מחדש בצורה חלקה בכל גודל שהוא - בדומה לאופן שבו שרטוט גבול שהוגדר על ידי CSS ברכיב HTML בזמן שינוי הגודל של הרכיב הזה באזור התצוגה.
Scalable Vector Graphics (SVG) הוא שפת סימון מבוססת XML שפותחה על ידי W3C. זהו פורמט של תמונה וקטורית שמיועד לאינטרנט המודרני.
כל תוכנת עיצוב שמיועדת לעריכת גרפיקה וקטורית תאפשר לייצא תמונה כקובץ SVG. אבל מכיוון ששפת סימון סטנדרטית וקריאה לבני אדם, אפשר ליצור ולערוך בפורמט SVG גם כל תוכנה לעריכת טקסט, ללא קשר לתוכנה ששימשה ליצירתו. עם זאת, מהר מאוד זה הופך להיות לא מציאותי כשמדובר בתמונות בעלות מורכבות אמיתית. אפשר לעצב SVG באמצעות CSS או להכיל JavaScript שיוצר התנהגויות ואינטראקציות בתמונות עצמן.
פורמט SVG הוא גם פורמט חזק במיוחד בכל הנוגע לחוויית משתמש הקצה, אפילו מעבר לביקוש המובהק עבור מעצבים ומפתחים. המידע התיאורי הכלול במקור SVG הוא בדרך כלל קומפקטי מאוד בהשוואה למידע מבוסס-רשת של תמונות בפורמט רסטר, במקרה של צורות פשוטות - כדי לפשט במידה מסוימת את ההבדל בין לומר לדפדפן "שרטוט קו אדום של 1 פיקסל בין 1x1 ל-1x5" לבין"1x1 הוא פיקסל אדום ". 1x2 הוא פיקסל אדום. 1x3 הוא פיקסל אדום. 1x4 הוא פיקסל אדום. 1x5 הוא פיקסל אדום." הצד השני: האופי התיאורי של SVG דורש יותר פרשנות – יותר "חשיבה" - מהדפדפן. לכן קובצי SVG מורכבים עשויים להקשות על העיבוד. באותו עור, תמונה מורכבת במיוחד יכולה לכלול רצף של הוראות וגודל העברה גדול.
זה יכול לקחת קצת ניסיון וטעייה עד שתוכלו לזהות מיד מועמד שצורף למקור תמונה כתמונה שמספקת שירות טוב יותר באמצעות SVG במקום בפורמט רגיל של רשת נקודות. עם זאת, יש כמה הנחיות: רכיבי ממשק כמו סמלים כמעט תמיד מוצגים בצורה טובה על ידי SVG. ככל הנראה גרפיקה עם קווים חדים, צבעים אחידים וצורות מוגדרות בבירור תהיה מועמדת חזקה ל-SVG.
SVG הוא נושא עצום: שפת סימון שלמה שנועדה להתקיים לצד HTML, עם אפשרויות סגנון ויכולות ייחודיות. למבוא מפורט יותר ל-SVG, תוכלו לעיין במדריך MDN SVG.