SVG

Scalable Vector Graphics (בקיצור SVG) הוא שמה של שפת XML, המשמשת לתיאור גרפיקה וקטורית דו-ממדית סטטית או דינמית. השפה היא תקן פתוח והיא מוגדרת על ידי ה-World Wide Web Consortium.

מבנה המסמך

ככל שפה מסוג XML, מסמך SVG בנוי מתגיות – סדרה של מקטעי טקסט, המייצגים מידע לגבי אופן ההצגה של המסמך – המהוות הוראות ליצירת האלמנטים (אובייקטים) השונים של ה-DOM. למסמך עצמו צורה מלבנית. ראשית הצירים ממוקמת בפינה השמאלית-עליונה, וערכי ה-X וה-Y גדלים ככל שזזים ימינה או כלפי מטה.
קיימים מספר סוגי אלמנטים אפשריים. אלמנטים גרפיים (graphics elements), למשל, הם עצמים גרפיים, המוצגים על המסך, כמו אליפסות, קווים ומלבנים. שאר סוגי האלמנטים נחלקים לקטגוריות שונות: אחדים אחראיים על אנימציה או על רקע מורכב של אלמנטים גרפיים, בעוד שאחרים עשויים להעביר מידע על המסמך עצמו, כמו תיאור טיב המסמך. לתגיות האלמנטים עשוי להיות מצורף מידע נוסף (תכונות, או מאפיינים (attributes)), המתאר את האלמנט שהתגית מייצגת.
בתור שפת XML, ניתן גם לדמיין את מבנה המסמך של קובץ SVG כ"עץ", שהגזע שלו הוא "האלמנט הראשי", ושאר האלמנטים הם הסתעפויות של הגזע הראשי או של ענפים משניים.

svg

תגית ה-svg מהווה את ה"שורש" של מסמך ה-SVG, ועוטפת את כל יתר התגיות המהוות חלק מאותו מסמך. תגית ה-svg תכלול פרמטרים (properties), שקובעים, בין היתר, את ממדי המסמך, את סוג המסמך (namespace), ולעיתים גם הרחבות למבנה הבסיסי של SVG (כדוגמת XLink).
דוגמה למבנה האלמנט:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" version="1.1">
<!-- this is a comment --></svg>
בדוגמה זו, תוכן המסמך מוכל בין התגית הפותחת ("<svg>", שגם כוללת בתוכה פרמטרים) לבין התגית הסוגרת של אלמנט ה-SVG ‏("</svg>"). בדוגמה זו, הרוחב (width) הוא 400 פיקסלים, והגובה (height) הוא 300 פיקסלים. הפרמטרים xmlns ו-version מגדירים שזהו מסמך SVG וגרסת התקן היא 1.1 (פרמטרים אלו אינם נדרשים, לרוב, כאשר קובץ ה-SVG נכתב כחלק ממסמך HTML).

rect

תגית ה-rect היא אחת הבסיסיות בתקן, ומשמשת ליצירת מלבן (או ריבוע). בנוסף לקביעת ממדי המלבן ומיקומו, ניתן גם לקבוע את מידת הקימור של הפינות (רדיוס העקומה העגלגלה של הפינה; פינות ישרות, כברירת מחדל).
לדוגמה:
<rect width="6" height="8" x="0" y="0" />

circle

תגית ה-circle מגדירה מעגל, על ידי קביעת מיקום מרכז המעגל ורדיוסו.
לדוגמה:
<circle cx="10" cy="20" r="3" fill="red" />
בדוגמה למעלה, מוצג מעגל אדום שרדיוסו שלושה פיקסלים, ומרכזו בנקודה (10,20).

ellipse

תגית ה-ellipse מגדירה אליפסה.
מבנה התגית הוא:
<ellipse cx="30" cy="30" rx="10" ry="20" />
הפרמטרים cx ו-cy מייצגים את מיקום מרכז האליפסה (נקודה). rx מייצג את הרדיוס האופקי של האליפסה (אורך קו הרוחב), ו-ry מייצג את הרדיוס האנכי (אורך קו האורך).

polygon

תגית ה-polygon מגדירה מצולע. התגית מציינת את מיקום הקודקודים של המצולע (כזוגות סדורים, ללא סוגריים), מחברת אותם לפי סדר כתיבתם, ולבסוף, מחברת את נקודת הסוף (הנקודה האחרונה) אל נקודת ההתחלה (הנקודה הראשונה).
לדוגמה:
<polygon points="10,10  20,10  20,30  10,30" />
המצולע שבדוגמה למעלה הוא למעשה מלבן אנכי. נעשה בדוגמה שימוש ברווח כפול בין הנקודות, כדי להבליט את ההבדלים ביניהן, על אף שתקינות המסמך נשמרת גם ללא רווחים כפולים.

line

תגית ה-line מגדירה קו ישר, על ידי קביעת מיקום שתי נקודות הקצה שלו.
לדוגמה:
<line x1="1" y1="1" x2="8" y2="5" stroke-width="2.5" />
בדוגמה זו, מועבר קו ישר בין הנקודה (1,1) לנקודה (8,5), שעוביו 2.5 פיקסלים.

polyline

תגית ה-polyline יוצרת סדרה של קווים ישרים שבורים המחוברים אחד לשני. מבנה התגית זהה לתגית ה-polygon, אך ההבדל העיקרי בין השתיים הוא שהנקודה האחרונה ב-polyline לא בהכרח מחוברת בחזרה אל הנקודה הראשונה.

path

תגית ה-path מאפשרת שרטוט עקומות מסוגים שונים. התגית בנויה מרשימת פקודות. כל פקודה מתחילה באות אנגלית, המייצגת את סוג העקומה שתמשיך את המסלול (כמו קו ישר או קשת), וכן את שאר הפרמטרים הנדרשים לבניית אותה פקודה (כמו נקודת הסיום של הפקודה). כאשר שם הפקודה נכתב באות גדולה, מיקום הנקודה יהיה אבסולוטי (מוחלט) ביחס לראשית הצירים; שימוש באות קטנה יתאר את הנקודה החדשה ביחס לקצה הפקודה הקודמת (הנקודה האחרונה).
ניתן, למעשה, להחליף את כל התגיות הגרפיות עם עקומה זהה של תגית ה-path, אך זה לרוב לא פרקטי, כיוון שהתחביר של שאר התגיות נוטה להיות קצר ופשוט יותר.

text

תגית ה-text מציגה טקסט על המסך.
מבנה התגית:
<text x="30" y="40" font-size="12" font-family="Arial">Hello World!</text>
בדוגמה זו, מוצג טקסט "Hello World!" בגופן אריאל ובגובה טקסט של 12 פיקסלים. ערכי ה-X וה-Y של הטקסט הם ביחס לפינה השמאלית-תחתונה של תיבת הטקסט.

tspan ו-tref

לצד תגית ה-text, ישנן שתי תגיות טקסט נוספות, שמאפשרות מבנה גמיש יותר של הטקסט במסמך. הראשונה היא תגית ה-tspan, שמאפשרת בחירה של מקטע מתוך תגית ה-text. לדוגמה, ניתן להשתמש בתגית על-מנת להדגיש טקסט:
<text x="30" y="40" font-size="12" font-family="Arial">
Do <tspan font-weight="bold">not</tspan> miss the train!
</text>
בדוגמה זו, התוצאה תהיה "Do not miss the train!". התגית דומה בתפקידה לתגית ה-span ב-HTML.
התגית הנוספת המשמשת להוספת טקסט היא תגית ה-tref. היא מאפשרת שימוש מרובה במקטע טקסט שהוגדר מראש באזור הdefs של המסמך. לדוגמה:
<defs>
<text id="foo">pizza</text></defs><text x="3" y="20" font-size="20" font-family="Arial">
My favorite food is <tref xlink:href="#foo" />. I eat <tref xlink:href="#foo" /> several times a month.
</text>
נכון ל-2015, תגית זו לא נתמכת בדפדפנים.

g

תגית ה-g מאגדת מספר תגיות נוספות. היא מאפשרת, למשל, להזיז או להגדיל מספר אובייקטים, מבלי לשנות כל אחד מהם בנפרד.
בדוגמה להלן, מוצג שימוש בתגית g על-מנת להזיז שני מעגלים 20 פיקסלים ימינה ו-15 פיקסלים מטה:
<g transform="translate(20, 15)">
<circle cx="0" cy="0" r="10" fill="red" />
<circle cx="23" cy="18" r="8" fill="blue" /></g>

defs

תגית ה-defs מציינת אזור במסמך, שבו יש תגיות המגדירות אובייקטים מסוימים, על-מנת לאפשר את השימוש בהן גם במקום אחר במסמך. דבר זה מאפשר שימוש חוזר באותו/ם אובייקט/ים, מבלי שיהיו חזרות מיותרות במסמך.

use

תגית ה-use משמשת להצהרה על "שכפול" תגית מסוימת ושימוש חוזר בה. בחירת התגית לשכפול נעשית על ידי ציון ערך ה-id של התגית (שם שהמתכנת בוחר לסמנה ולקרוא לה בו) שבה רוצים להשתמש – פרמטר אופציונלי, שנעשה בו שימוש כאשר יש צורך לתת לתגית מסוימת ערך מציין ייחודי.
דוגמה לשימוש בתגית use:
<defs>
<rect width="3" height="3" fill="red" id="my-square" /></defs><use xlink:href="#my-square" x="8" y="16" />
בדוגמה זו, שמור בתוך אובייקט ה-defs ריבוע אדום, שאורך צלעו 8 פיקסלים, ושערך (שם) ה-id שלו הוא "my-square". מחוץ לאובייקט ה-defs מצויה תגית מסוג use, המשתמשת באובייקט שה-id שלו הוא "my-square", וממקמת אותו בנקודה (8,16).
תגית ה-use אינה מאפשרת רקורסיה. במקרה כזה, תגית ה-use המהווה את התחלת הרקורסיה לא תוצג כלל.

סדר ההצגה

כאשר הדפדפן (או כל תוכנה אחרת הפותחת מסמכי SVG) מציג קובץ SVG, המסמך "ייסרק" מראשיתו ועד סופו. תגיות שמופיעות קודם במסמך, יוצגו מתחת לתגיות שבאות לאחר מכן. על-מנת "להעלות" או "להוריד" תגית, יש לשנות את מיקומה במסמך.

הנפשות

SVG מאפשר גם הנפשה של אלמנטים גרפיים. אחת הדרכים להנפשת אלמנט היא באמצעות תגיות מיוחדות של SMIL, המוכנסות לתוך האלמנט שמעוניינים להנפיש; לעומת זאת, אנימציות SMIL ב-SVG אינן תקן שאושר על ידי ה-W3C, ולכן הדפדפנים כרום ופיירפוקס מציגים אזהרה כאשר נעשה שימוש באנימציות SMIL בדף אינטרנט. השיטה המועדפת כיום היא באמצעות הנפשות CSS, ושיטה נוספת להנפשת אלמנטים היא שימוש ב-JavaScript

דוגמה

להלן דוגמה למסמך SVG (כל תכונה נכתבה בשורה חדשה, על מנת להקל על הקריאה; הכיתובים בתוך התגית המיוחדת "< !--   -- >" הן הערות פנימיות לצורך שיפור הקריאות, והמחשב מתעלם מהן):
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1">
<!-- מלבן -->
<rect
width="20"
height="30"
x="20"
y="60"
fill="red"
stroke="black" />

<!-- מעגל -->
<circle
cx="50"
cy="40"
r="20"
fill="orange"
stroke="black" />

<!-- קו -->
<line
x1="25" y1="100"
x2="56" y2="72"
stroke="purple"
stroke-width="3" />

<!-- מצולע -->
<polygon
points="120,5  160,5  170,40  120,40"
fill="gray"
stroke="lime"
stroke-width="2" />

<!-- קו שבור -->
<polyline
points="140,140  150,150  140,160  150,170  140,180  150,190"
fill="none"
stroke="brown"
stroke-width="3" />

<!-- אליפסה -->
<ellipse
cx="55"
cy="150"
rx="20"
ry="34"
fill="yellow"
stroke="black"
transform="rotate(-30 55 150)" />

<!-- נתיב -->
<path
d="M 110 70 l 30 46 c -11 14, -49 14, -60 0 z"
fill="lime"
stroke="black" />

<!-- כיתוב -->
<text
x="90"
y="60"
font-size="12"
font-family="Arial">

טקסט לדוגמה
</text></svg>