SVG

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

== מבנה המסמך ==
ככל שפה מסוג XML, מסמך SVG בנוי מתגיות – סדרה של מקטעי טקסט, המייצגים מידע לגבי אופן ההצגה של המסמך – המהוות הוראות ליצירת האלמנטים (אובייקטים) השונים של ה-DOM. למסמך עצמו צורה מלבנית. ראשית הצירים ממוקמת בפינה השמאלית-עליונה, וערכי ה-X וה-Y גדלים ככל שזזים ימינה או כלפי מטה.

קיימים מספר סוגי אלמנטים אפשריים. אלמנטים גרפיים (graphics elements), למשל, הם עצמים גרפיים, המוצגים על המסך, כמו אליפסות, קווים ומלבנים. שאר סוגי האלמנטים נחלקים לקטגוריות שונות: אחדים אחראיים על אנימציה או על רקע מורכב של אלמנטים גרפיים, בעוד שאחרים עשויים להעביר מידע על המסמך עצמו, כמו תיאור טיב המסמך. לתגיות האלמנטים עשוי להיות מצורף מידע נוסף (תכונות, או מאפיינים (attributes)), המתאר את האלמנט שהתגית מייצגת.

בתור שפת XML, ניתן גם לדמיין את מבנה המסמך של קובץ SVG כ"עץ", שהגזע שלו הוא "האלמנט הראשי", ושאר האלמנטים הם הסתעפויות של הגזע הראשי או של ענפים משניים.

== תגיות XML עיקריות ==
=== svg ===
תגית ה-svg מהווה את ה"שורש" של מסמך ה-SVG, ועוטפת את כל יתר התגיות המהוות חלק מאותו מסמך. תגית ה-svg תכלול פרמטרים (properties), שקובעים, בין היתר, את ממדי המסמך, את סוג המסמך (namespace), ולעיתים גם הרחבות למבנה הבסיסי של SVG (כדוגמת XLink).

דוגמה למבנה האלמנט:
<syntaxhighlight lang="xml">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" version="1.1">
	
</svg>
</syntaxhighlight>
בדוגמה זו, תוכן המסמך מוכל בין התגית הפותחת ("<svg>", שגם כוללת בתוכה פרמטרים) לבין התגית הסוגרת של אלמנט ה-SVG ("</svg>"). בדוגמה זו, הרוחב (width) הוא 400 פיקסלים, והגובה (height) הוא 300 פיקסלים. הפרמטרים <code>xmlns</code> ו-<code>version</code> מגדירים שזהו מסמך SVG וגרסת התקן היא 1.1 (פרמטרים אלו אינם נדרשים, לרוב, כאשר קובץ ה-SVG נכתב כחלק ממסמך HTML).

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

לדוגמה:
<syntaxhighlight lang="xml">
<rect width="6" height="8" x="0" y="0" />
</syntaxhighlight>

=== circle ===
תגית ה-circle מגדירה מעגל, על ידי קביעת מיקום מרכז המעגל ורדיוסו.

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

=== ellipse ===
תגית ה-ellipse מגדירה אליפסה.

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

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

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

=== line ===
תגית ה-line מגדירה קו ישר, על ידי קביעת מיקום שתי נקודות הקצה שלו.

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

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

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

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

==== סוגי פקודות ====
בפסקה זו מוצגים סוגי הפקודות, תפקידן והמבנה שלהן. שם הפקודה מיוצג באות גדולה אחרי שם הפקודה. כפי שהוזכר, יש הבדל בין שימוש באות גדולה לבין שימוש באות קטנה, אך הדבר נעשה כאן אך ורק לשם ההדגמה ומתן שם הפקודה.
:; התחלת העקומה (M)
הנקודה שבה מתחילה העקומה. הפרמטרים שהפקודה מקבלת הם מיקום ה-X ומיקום ה-Y של נקודת ההתחלה:
<syntaxhighlight lang="xml">
M x y
</syntaxhighlight>

===== קווים רגילים =====
פקודות הקווים הן הבסיסיות ביותר. תפקידן ליצור נקודה חדשה במסמך (שרטוט), ולחבר בקו ישר בינה לבין קצה הפקודה הקודמת (הנקודה האחרונה).
:; קו אופקי (H)
קו אופקי. הפרמטר היחיד שמועבר אל הפקודה הוא שיעור ה-X של נקודת הסיום של הקו:
<syntaxhighlight lang="xml">
H x
</syntaxhighlight>
שימוש באות גדולה יציין את שיעור ה-X של הנקודה, בעוד ששימוש באות קטנה יציין את מרחקה מנקודת הסיום של הפקודה האחרונה.

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

:; קו חופשי (L)
קו (אלכסון) המחבר בין סוף הפקודה האחרונה לבין נקודה חדשה. הפרמטרים הנדרשים הם שיעורי ה-X וה-Y של הנקודה החדשה:
<syntaxhighlight lang="xml">
L x y
</syntaxhighlight>

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

===== פקודות פיתול =====
קיימות 3 פקודות ליצירת קו מפותל. שתיים מהן הן עקומות בזייה, והשלישית היא קשת של אליפסה. לכל פקודת עקום בזייה נלוות גם פקודה נוספת אופציונלית, המאפשרת המשכיות חלקה לעקומה.

:; עקום בזייה ריבועי (Q)
עקום בזייה ריבועי (מהמעלה השנייה) משתמש בארבעה פרמטרים: שניים לתיאור נקודת בקרה, ושניים נוספים לתיאור נקודת הסיום. העקום יוצא מנקודת סיום הפקודה הקודמת לכיוון נקודת הבקרה, ומשם ימשיך להתקרב אל נקודת הסיום. מבנה הפקודה:
<syntaxhighlight lang="xml">
Q x1 y1 x y
</syntaxhighlight>
בדוגמה זו, x1 ו-y1 הן מיקום נקודת הבקרה, ו-x ו-y הן מיקום נקודת סיום הפקודה.

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

תחביר הפקודה:
<syntaxhighlight lang="xml">
T x y
</syntaxhighlight>
כמו כן, ניתן ליצור רצף של פקודות T, כאשר בכל פעם נקודת הבקרה החדשה מחושבת כשיקוף של נקודת הבקרה הקודמת. אם פקודת T מוצהרת לאחר פקודה שאינה מסוג Q או T אחרת, היא תפורש כקו ישר בין נקודת ההתחלה לנקודת הסיום.

:; עקום בזייה ממעלה שלישית (C)
עקום בזייה ממעלה שלישית דומה בתחבירו לעקום בזייה הריבועי, אך דורש 2 נקודות בקרה במקום אחת. עקום זה יתחיל מנקודת הסיום של הפקודה הקודמת, יתקרב אל נקודת הבקרה הראשונה, משם ימשיך ויתקרב אל נקודת הבקרה השנייה, ולאחר מכן, יתקרב ויתחבר אל נקודת הסיום.

תחביר הפקודה:
<syntaxhighlight lang="xml">
C x1 y1 x2 y2 x y
</syntaxhighlight>
כאשר x1 ו-y1 מייצגים את מיקום נקודת הבקרה הראשונה, x2 ו-y2 מייצגים את מיקום נקודת הבקרה השנייה, ו-x ו-y מייצגים את מיקום נקודת הסיום.

:; המשכיות חלקה לעקום בזייה מהמעלה השלישית (S)
כמו שעקומה מסוג T מהווה המשכיות חלקה לעקום בזייה ריבועי, קיימת פקודה דומה עבור עקום מהמעלה השלישית.

תחביר הפקודה:
<syntaxhighlight lang="xml">
S x2 y2 x y
</syntaxhighlight>
נקודת הבקרה השנייה מיוצגת על ידי x2 ו-y2, ונקודת הסיום מיוצגת על ידי x ו-y. כמו בפקודה מסוג T, גם כאן, נקודת הבקרה מחושבת אוטומטית, אך במקרה זה היא מהווה שיקוף של נקודת הבקרה השנייה של הפקודה הקודמת (מסוג C או S).

:; קשת של אליפסה (Aׂ)
פקודת הקשת יוצרת קשת של אליפסה.

תחביר הפקודה:
<syntaxhighlight lang="xml">
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
</syntaxhighlight>
זוהי הפקודה בעלת המספר הרב ביותר של פרמטרים:
* x ו-y – נקודת הסיום של האליפסה. האליפסה למעשה "תישען" על נקודות ההתחלה (הנקודה הנוכחית שהגענו אליה בשרטוט) והסיום. כלומר, היקף האליפסה חייב להכיל גם את הנקודות הללו.
* rx ו-ry – רדיוסי האליפסה (האופקי והאנכי, בהתאמה).
* x-axis-rotation – סיבוב האליפסה (במעלות) סביב מרכזה. ערך חיובי יסובב עם כיוון השעון, ערך שלילי יסובב נגד כיוון השעון, והצבת הערך 0 לא תסובב את האליפסה כלל (כלומר, הרדיוס האופקי יקביל לציר ה-X והרדיוס האנכי יקביל לציר ה-Y).
* large-arc-flag – האליפסה, לפי הרדיוסים שלה וסיבובה, יכולה להישען על נקודות ההתחלה והסיום בשתי דרכים, כאשר בכל אחת מהדרכים הללו, האליפסה מחולקת לקשת אחת גדולה וקשת נוספת קטנה יותר. ערך דגל זה קובע אם תיבחר אחת מהקשתות הקטנות (כאשר הערך הוא 0) או אחת מהקשתות הגדולות (כאשר הערך הוא 1).
* sweep-flag – לאחר שנקבע אם הקשת תהיה הקטנה או הגדולה, יש לבחור את האליפסה שלה שייכת קשת זו (כפי שצוין, ישנן 2 אליפסות, היכולות להישען על נקודת ההתחלה ונקודת הסיום). הצבת הערך "1" בפרמטר זה תשרטט את הקשת עם כיוון השעון, והצבת הערך "0" תשרטט את הקשת נגד כיוון השעון.

==== דוגמה ====
דוגמה לשימוש בתגית. ניתן לראות את התוצאה בשרטוט משמאל:
<syntaxhighlight lang="xml">
<path d="M 20 60 h 40 v 50 L 80 99 a 30 40 -30 1 1 15 25 l -65 22 z" fill="orange" stroke="purple" stroke-width="2" />
</syntaxhighlight>
תוצאת הדוגמה. העיגול מסמן את נקודת התחלת ה[[עקומה.]]
בדוגמה זו, העקומה הכוללת מתנהגת באופן הבא (שמות הפקודות מודגשים בסוגריים):
# נקודה התחלתית (M) בנקודה (20,60).
# תזוזה אופקית יחסית (h) למרחק של 40 פיקסלים ימינה.
# תזוזה אנכית יחסית (v) למרחק של 50 פיקסלים.
# תזוזה חופשית אבסולוטית (L) לנקודה (80,99).
# יצירת קשת יחסית של אליפסה (a) ש:
#* הרדיוסים האופקי והאנכי שלה באורך 30 ו-40 פיקסלים, בהתאמה.
#* היא מסובבת 30° של האליפסה נגד כיוון השעון (ערך שלילי).
#* בחירה בקשת הגדולה עם כיוון השעון (large-arc-flag = 1, sweep-flag = 1).
#* נקודת הסיום של הקשת במרחק 10 פיקסלים ימינה ו-10 פיקסלים כלפי מטה, ביחס לנקודת ההתחלה שלה.
# תזוזה חופשית יחסית (l) למרחק של 40 פיקסלים שמאלה ו-80 פיקסלים למטה.
# חיבור העקומה לתחילתה (z).

=== text ===
תגית ה-text מציגה טקסט על המסך.

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

=== tspan ו-tref ===
לצד תגית ה-text, ישנן שתי תגיות טקסט נוספות, שמאפשרות מבנה גמיש יותר של הטקסט במסמך. הראשונה היא תגית ה-tspan, שמאפשרת בחירה של מקטע מתוך תגית ה-text. לדוגמה, ניתן להשתמש בתגית על-מנת להדגיש טקסט:
<syntaxhighlight lang="xml">
<text x="30" y="40" font-size="12" font-family="Arial">
	Do <tspan font-weight="bold">not</tspan> miss the train!
</text>
</syntaxhighlight>
בדוגמה זו, התוצאה תהיה "Do not miss the train!". התגית דומה בתפקידה לתגית ה-span ב-HTML.

התגית הנוספת המשמשת להוספת טקסט היא תגית ה-tref. היא מאפשרת שימוש מרובה במקטע טקסט שהוגדר מראש באזור הdefs של המסמך. לדוגמה:
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>
נכון ל-2015, תגית זו לא נתמכת בדפדפנים.

=== g ===
תגית ה-g מאגדת מספר תגיות נוספות. היא מאפשרת, למשל, להזיז או להגדיל מספר אובייקטים, מבלי לשנות כל אחד מהם בנפרד.

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

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

=== use ===
תגית ה-use משמשת להצהרה על "שכפול" תגית מסוימת ושימוש חוזר בה. בחירת התגית לשכפול נעשית על ידי ציון ערך ה-id של התגית (שם שהמתכנת בוחר לסמנה ולקרוא לה בו) שבה רוצים להשתמש – פרמטר אופציונלי, שנעשה בו שימוש כאשר יש צורך לתת לתגית מסוימת ערך מציין ייחודי.

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

תכונות נכתבות בתוך תגית הפתיחה של האלמנט, עם רווח לפניהן, באופן הבא:
<syntaxhighlight lang="xml">
<tag attribute1="some value 1" attribute2="some value 2" attribute3="some value 3" ... attributeN="some value N" />
</syntaxhighlight>
תגית יכולה להכיל תכונה אחת, מספר תכונות, או לא להכיל תכונות כלל.

התכונות הנפוצות במסמכי SVG:
{| class="wikitable"
|-
! שם התכונה !! תפקיד !! הערה
|-
| id || נותן שם מזהה ייחודי לאלמנט מסוים במסמך || אין להעניק למספר תגיות את אותו ערך id
|-
| widthheight || ממדי האובייקט (רוחב, גובה) ||נמדד בפיקסלים
|-
| x ו-y || מיקום האובייקט בתמונה ||קואורדינטות של נקודה
|-
| cx ו-cy || מיקום של מעגל או אליפסה || מיקום מרכז הצורה
|-
| r || רדיוס של מעגל || באליפסה נעשה שימוש בתכונות rx ו-ry, המציינות את רדיוס האליפסה בחלק הרחב ובחלק הצר (הרדיוסים נחתכים במרכז האליפסה, כאשר הם מאונכים זה לזה)
|-
| transform || שינוי מיקומו או צורתו של האובייקט במרחב || תכונה זו מאפשרת את הזזת האובייקט, שינוי ממדיו, סיבובו, הטייתו, או שילוב בין כמה סוגי שינויים
|-
| x1 ו-y1x2 ו-y2 || מיקום נקודת התחלה ונקודת סיום של קו || נעשה שימוש בתכונות אלה באלמנט line (ציור קו) וכן באלמנט linearGradient (יצירת רקע, המכיל מספר צבעים המשתלבים בהדרגתיות)
|-
| d || מכילה את שרשרת הפקודות של תגית ה-path ||
|-
| fill || צבע המילוי של אלמנט || צבע שחור, כברירת מחדל
|-
| stroke || צבע קו המתאר של האלמנט || שקוף, כברירת מחדל
|-
| stroke-width || רוחב קו המתאר של האלמנט || 1 פיקסל, כברירת מחדל
|}

=== transform ===
תכונת ה-transform מאפשרת את הזזת האלמנט (באלמנטים גרפיים בלבד), שינוי ממדיו, סיבובו, הטייתו, או שילוב בין כמה סוגי שינויים, המהווים, למעשה, מעין פקודות. כל פקודה שכזו נכתבת כשם הפקודה, שלאחריו יופיעו צמד סוגריים, ובתוכם ייכתבו הפרמטרים הנדרשים להחלת השינוי.
{| class="wikitable"
|-
! rowspan="2"| סוג השינוי !! rowspan="2"| תפקיד !! colspan="2"| מבנה
|-
! תחביר !! הסבר
|-
| translate || הזזת האובייקט על המסך || style="text-align: left; direction: ltr;"| translate(x y) || הזזת האובייקט x פיקסלים ימינה ו-y פיקסלים כלפי מטה. שימוש ביחידות שליליות יזיז לכיוון הנגדי. כאשר מושמט הערך y, לא תהיה תזוזה אנכית.
|-
| scale || שינוי ממדי האובייקט || style="text-align: left; direction: ltr;"| scale(x y) || הכפלת רוחב האובייקט ב-x והכפלת גובהו ב-y. ערך שלילי גם יהפוך את האלמנט אופקית (x) או אנכית (y). כאשר הערך הוא 0, האובייקט לא יוצג כלל על המסך. השמטת הערך y תכפיל את גובה ורוחב האובייקט באותו מספר (הערך x).
|-
| rotate || סיבוב האובייקט || style="text-align: left; direction: ltr;"| rotate(angle x y) || סיבוב האובייקט angle מעלות עם כיוון השעון (ערך שלילי יוביל לסיבוב בכיוון הנגדי). מוקד הסיבוב הוא ראשית הצירים. על ידי הוספת הערכים x ו-y, ניתן לקבוע נקודה אחרת על המסמך שסביבה ייעשה הסיבוב (למשל, מרכז הצורה).
|-
| skewX || הטיה אופקית של האובייקט || style="text-align: left; direction: ltr;"| skewX(angle) || הזזת חלקו התחתון של האובייקט במקביל לציר ה-X, כך שצדו הימני של האובייקט ייצור עם גובהו זווית של angle מעלות.
|-
| skewY || הטיה אנכית של האובייקט || style="text-align: left; direction: ltr;"| skewY(angle) || דומה ל-skewX, אך נעשית הזזה אנכית של צדו הימני של האובייקט.
|-
| matrix || החלת מספר שינויים בעזרת מטריצת מעבר || style="text-align: left; direction: ltr;"| matrix(a b c d e f) || יצירה של מטריצת מעבר – סדרה של ערכים, הקובעים את מיקומו החדש של האובייקט במרחב ואת צורתו. ניתן גם לשלב מספר שינויים בפקודת matrix אחת, על ידי חישוב השינויים בזה אחר זה.
|}

== דוגמה ==
להלן דוגמה למסמך SVG (כל תכונה נכתבה בשורה חדשה, על מנת להקל על הקריאה; הכיתובים בתוך התגית המיוחדת "< !-- -- >" הן הערות פנימיות לצורך שיפור הקריאות, והמחשב מתעלם מהן):

התוצאה:
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

== תוכנות התומכות בתקן זה ==
=== דפדפנים ===
* גוגל כרום
* ספארי
* מוזילה פיירפוקס וכל שאר הדפדפנים המבוססים על מנוע Gecko של קרן מוזילה
* אינטרנט אקספלורר - מגרסה 9 (עד גרסה 8 באמצעות תוסף חיצוני של אדובי)
* אופרה
* Konqueror

=== תוכנות לעריכת קובצי SVG ===
קובץ SVG הוא קובץ XML; כלומר, הוא קובץ טקסטואלי, ולכן, ניתן לערוך אותו בכל עורך טקסט, אך יש יתרון לעריכתו באמצעות עורך ייעודי.

מספר גדל והולך של תוכנות תומך בפורמט זה. ביניהן:
* Open Office - חבילת תוכנות חופשית, המקבילה ל-Microsoft Office
* Inkscape - תוכנה חופשית, המיועדת לעריכת קובצי SVG
* אדובי אילוסטרייטור - תוכנת איור של חברת אדובי, תומכת בייבוא וייצוא של קובצי SVG
כמו כן, קיימים כלים רבים באינטרנט, המאפשרים עריכה, יצירה ושמירה של קובצי SVG.

== מקורות ==
* https://developer.mozilla.org/en-US/docs/Web/SVG

== גלריה ==
<gallery>
SVG Path Element construction.gif|הדגמה של שלבי הבניה של תגית מסוג path
</gallery>

==קישורים חיצוניים==

* 
* [http://www.w3.org/TR/SVG/Overview.html תקן ה-SVG] באתר ה-W3C

== הערות שוליים ==

קטגוריה:ערכים שבהם תבנית בריטניקה אינה מתאימה
קטגוריה:פורמטים גרפיים
קטגוריה:XML