ככל שפה מסוג XML, מסמך SVG בנוי מתגיות – סדרה של מקטעיטקסט, המייצגיםמידע לגבי אופן ההצגה של המסמך – המהוותהוראות ליצירת האלמנטים (אובייקטים) השונים של ה-DOM. למסמך עצמו צורהמלבנית.ראשית הצירים ממוקמת בפינה השמאלית-עליונה, וערכי ה-X וה-Y גדלים ככל שזזים ימינה או כלפי מטה.
קיימים מספר סוגי אלמנטים אפשריים.אלמנטים גרפיים (graphics elements), למשל, הםעצמים גרפיים, המוצגים על המסך, כמואליפסות,קווים ומלבנים. שאר סוגי האלמנטים נחלקים לקטגוריות שונות: אחדים אחראיים עלאנימציה או על רקע מורכב של אלמנטים גרפיים, בעוד שאחרים עשויים להעביר מידע על המסמך עצמו, כמו תיאור טיב המסמך. לתגיות האלמנטים עשוי להיות מצורף מידע נוסף (תכונות, או מאפיינים (attributes)), המתאר את האלמנט שהתגית מייצגת.
בתור שפת XML, ניתן גם לדמיין את מבנה המסמך של קובץ SVG כ"עץ", שהגזע שלו הוא "האלמנט הראשי", ושאר האלמנטים הם הסתעפויות של הגזע הראשי או של ענפים משניים.
תגית ה-svg מהווה את ה"שורש" של מסמך ה-SVG, ועוטפת את כל יתר התגיות המהוות חלק מאותו מסמך. תגית ה-svg תכלול פרמטרים (properties), שקובעים, בין היתר, את ממדי המסמך, את סוג המסמך (namespace), ולעיתים גם הרחבות למבנה הבסיסי של SVG (כדוגמתXLink).
דוגמה למבנה האלמנט:
<svgxmlns="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 היא אחת הבסיסיות בתקן, ומשמשת ליצירתמלבן (אוריבוע). בנוסף לקביעת ממדי המלבן ומיקומו, ניתן גם לקבוע את מידת הקימור של הפינות (רדיוס העקומה העגלגלה של הפינה;פינות ישרות, כברירת מחדל).
הפרמטרים cx ו-cy מייצגים את מיקום מרכז האליפסה (נקודה). rx מייצג את הרדיוס האופקי של האליפסה (אורך קו הרוחב), ו-ry מייצג את הרדיוס האנכי (אורך קו האורך).
תגית ה-polygon מגדירהמצולע. התגית מציינת את מיקום הקודקודים של המצולע (כזוגות סדורים, ללא סוגריים), מחברת אותם לפי סדר כתיבתם, ולבסוף, מחברת את נקודת הסוף (הנקודה האחרונה) אל נקודת ההתחלה (הנקודה הראשונה).
לדוגמה:
<polygonpoints="10,10 20,10 20,30 10,30"/>
המצולע שבדוגמה למעלה הוא למעשה מלבן אנכי. נעשה בדוגמה שימוש ברווח כפול בין הנקודות, כדי להבליט את ההבדלים ביניהן, על אף שתקינות המסמך נשמרת גם ללא רווחים כפולים.
תגית ה-polyline יוצרת סדרה של קווים ישרים שבורים המחוברים אחד לשני. מבנה התגית זהה לתגית ה-polygon, אך ההבדל העיקרי בין השתיים הוא שהנקודה האחרונה ב-polyline לא בהכרח מחוברת בחזרה אל הנקודה הראשונה.
תגית ה-path מאפשרת שרטוטעקומות מסוגים שונים. התגית בנויה מרשימת פקודות. כל פקודה מתחילה באות אנגלית, המייצגת את סוג העקומה שתמשיך את המסלול (כמוקו ישר אוקשת), וכן את שאר הפרמטרים הנדרשים לבניית אותה פקודה (כמו נקודת הסיום של הפקודה). כאשר שם הפקודה נכתב באות גדולה, מיקום הנקודה יהיה אבסולוטי (מוחלט) ביחס לראשית הצירים; שימוש באות קטנה יתאר את הנקודה החדשה ביחס לקצה הפקודה הקודמת (הנקודה האחרונה).
ניתן, למעשה, להחליף את כל התגיות הגרפיות עם עקומה זהה של תגית ה-path, אך זה לרוב לא פרקטי, כיוון שהתחביר של שאר התגיות נוטה להיות קצר ופשוט יותר.
בפסקה זו מוצגים סוגי הפקודות, תפקידן והמבנה שלהן.[1] שם הפקודה מיוצג באות גדולה אחרי שם הפקודה. כפי שהוזכר, יש הבדל בין שימוש באות גדולה לבין שימוש באות קטנה, אך הדבר נעשה כאן אך ורק לשם ההדגמה ומתן שם הפקודה.
התחלת העקומה (M)
הנקודה שבה מתחילה העקומה. הפרמטרים שהפקודה מקבלת הם מיקום ה-X ומיקום ה-Y של נקודת ההתחלה:
פקודות הקווים הן הבסיסיות ביותר. תפקידן ליצור נקודה חדשה במסמך (שרטוט), ולחבר בקו ישר בינה לבין קצה הפקודה הקודמת (הנקודה האחרונה).
קו אופקי (H)
קואופקי. הפרמטר היחיד שמועבר אל הפקודה הוא שיעור ה-X של נקודת הסיום של הקו:
Hx
שימוש באות גדולה יציין את שיעור ה-X של הנקודה, בעוד ששימוש באות קטנה יציין את מרחקה מנקודת הסיום של הפקודה האחרונה.
קו אנכי (Vׂׂׂׂ)
קואנכי. התחביר זהה לתחביר פקודת הקו האופקי, אך מייצג את שיעור ה-Y של נקודת הסיום של הפקודה. כמקודם, שימוש באות גדולה יציין את שיעור ה-Y של הנקודה, בעוד ששימוש באות קטנה יציין את מרחקה מנקודת הסיום של הפקודה האחרונה.
קו חופשי (L)
קו (אלכסון) המחבר בין סוף הפקודה האחרונה לבין נקודה חדשה. הפרמטרים הנדרשים הם שיעורי ה-X וה-Y של הנקודה החדשה:
Lxy
סיום העקומה (Z)
חיבור קצה העקומה לתחילתה. האות Z נכתבת בפני עצמה, וללא פרמטרים. אין הבדל בין שימוש באות גדולה או באות קטנה בפקודה זו.
קיימות 3 פקודות ליצירת קו מפותל. שתיים מהן הןעקומות בזייה, והשלישית היא קשת של אליפסה. לכל פקודת עקום בזייה נלוות גם פקודה נוספת אופציונלית, המאפשרת המשכיות חלקה לעקומה.
עקום בזייה ריבועי (Q)
עקום בזייה ריבועי (מהמעלה השנייה) משתמש בארבעה פרמטרים: שניים לתיאור נקודת בקרה, ושניים נוספים לתיאור נקודת הסיום. העקום יוצא מנקודת סיום הפקודה הקודמת לכיוון נקודת הבקרה, ומשם ימשיך להתקרב אל נקודת הסיום. מבנה הפקודה:
Qx1y1xy
בדוגמה זו, x1 ו-y1 הן מיקום נקודת הבקרה, ו-x ו-y הן מיקום נקודת סיום הפקודה.
המשכיות חלקה לעקום בזייה ריבועי (T)
לאחר הפקודה מסוג Q, ניתן גם להצהיר על פקודה מסוג T, שהיא למעשה עקום בזייה ריבועי, בו הפרמטרים היחידים הם של מיקום נקודת סיום הפקודה. נקודת הבקרה היא שיקוף של נקודת הבקרה של הפקודה הקודמת, ביחס לנקודת הסיום הקודמת. כלומר, נקודת הסיום הקודמת מהווה את אמצע הקטע המחבר את שתי נקודות הבקרה - הקודמת והנוכחית.
תחביר הפקודה:
Txy
כמו כן, ניתן ליצור רצף של פקודות T, כאשר בכל פעם נקודת הבקרה החדשה מחושבת כשיקוף של נקודת הבקרה הקודמת. אם פקודת T מוצהרת לאחר פקודה שאינה מסוג Q או T אחרת, היא תפורש כקו ישר בין נקודת ההתחלה לנקודת הסיום.
עקום בזייה ממעלה שלישית (C)
עקום בזייה ממעלה שלישית דומה בתחבירו לעקום בזייה הריבועי, אך דורש 2 נקודות בקרה במקום אחת. עקום זה יתחיל מנקודת הסיום של הפקודה הקודמת, יתקרב אל נקודת הבקרה הראשונה, משם ימשיך ויתקרב אל נקודת הבקרה השנייה, ולאחר מכן, יתקרב ויתחבר אל נקודת הסיום.
תחביר הפקודה:
Cx1y1x2y2xy
כאשר x1 ו-y1 מייצגים את מיקום נקודת הבקרה הראשונה, x2 ו-y2 מייצגים את מיקום נקודת הבקרה השנייה, ו-x ו-y מייצגים את מיקום נקודת הסיום.
המשכיות חלקה לעקום בזייה מהמעלה השלישית (S)
כמו שעקומה מסוג T מהווה המשכיות חלקה לעקום בזייה ריבועי, קיימת פקודה דומה עבור עקום מהמעלה השלישית.
תחביר הפקודה:
Sx2y2xy
נקודת הבקרה השנייה מיוצגת על ידי x2 ו-y2, ונקודת הסיום מיוצגת על ידי x ו-y. כמו בפקודה מסוג T, גם כאן, נקודת הבקרה מחושבת אוטומטית, אך במקרה זה היא מהווה שיקוף של נקודת הבקרה השנייה של הפקודה הקודמת (מסוג C או S).
קשת של אליפסה (Aׂ)
פקודת הקשת יוצרת קשת של אליפסה.
תחביר הפקודה:
Arxryx-axis-rotationlarge-arc-flagsweep-flagxy
זוהי הפקודה בעלת המספר הרב ביותר של פרמטרים:
x ו-y – נקודת הסיום של האליפסה. האליפסה למעשה "תישען" על נקודות ההתחלה (הנקודה הנוכחית שהגענו אליה בשרטוט) והסיום. כלומר, היקף האליפסה חייב להכיל גם את הנקודות הללו.
rx ו-ry – רדיוסי האליפסה (האופקי והאנכי, בהתאמה).
x-axis-rotation – סיבוב האליפסה (במעלות) סביב מרכזה. ערך חיובי יסובב עםכיוון השעון, ערך שלילי יסובב נגד כיוון השעון, והצבת הערך 0 לא תסובב את האליפסה כלל (כלומר, הרדיוס האופקי יקביל לציר ה-X והרדיוס האנכי יקביל לציר ה-Y).
large-arc-flag – האליפסה, לפי הרדיוסים שלה וסיבובה, יכולה להישען על נקודות ההתחלה והסיום בשתי דרכים, כאשר בכל אחת מהדרכים הללו, האליפסה מחולקת לקשת אחת גדולה וקשת נוספת קטנה יותר. ערךדגל זה קובע אם תיבחר אחת מהקשתות הקטנות (כאשר הערך הוא 0) או אחת מהקשתות הגדולות (כאשר הערך הוא 1).
sweep-flag – לאחר שנקבע אם הקשת תהיה הקטנה או הגדולה, יש לבחור את האליפסה שלה שייכת קשת זו (כפי שצוין, ישנן 2 אליפסות, היכולות להישען על נקודת ההתחלה ונקודת הסיום). הצבת הערך "1" בפרמטר זה תשרטט את הקשת עם כיוון השעון, והצבת הערך "0" תשרטט את הקשת נגד כיוון השעון.
לצד תגית ה-text, ישנן שתי תגיות טקסט נוספות, שמאפשרות מבנה גמיש יותר של הטקסט במסמך. הראשונה היא תגית ה-tspan, שמאפשרת בחירה של מקטע מתוך תגית ה-text. לדוגמה, ניתן להשתמש בתגית על-מנת להדגיש טקסט:
תגית ה-defs מציינת אזור במסמך, שבו יש תגיות המגדירות אובייקטים מסוימים, על-מנת לאפשר את השימוש בהן גם במקום אחר במסמך. דבר זה מאפשר שימוש חוזר באותו/ם אובייקט/ים, מבלי שיהיו חזרות מיותרות במסמך.
תגית ה-use משמשת להצהרה על "שכפול" תגית מסוימת ושימוש חוזר בה. בחירת התגית לשכפול נעשית על ידי ציון ערך ה-id של התגית (שם שהמתכנת בוחר לסמנה ולקרוא לה בו) שבה רוצים להשתמש – פרמטר אופציונלי, שנעשה בו שימוש כאשר יש צורך לתת לתגית מסוימת ערך מציין ייחודי.
בדוגמה זו, שמור בתוך אובייקט ה-defs ריבוע אדום, שאורך צלעו 8 פיקסלים, ושערך (שם) ה-id שלו הוא "my-square". מחוץ לאובייקט ה-defs מצויה תגית מסוג use, המשתמשת באובייקט שה-id שלו הוא "my-square", וממקמת אותו בנקודה (8,16).
תגית ה-use אינה מאפשרתרקורסיה. במקרה כזה, תגית ה-use המהווה את התחלת הרקורסיה לא תוצג כלל.
כאשר הדפדפן (או כלתוכנה אחרת הפותחת מסמכי SVG) מציג קובץ SVG, המסמך "ייסרק" מראשיתו ועד סופו. תגיות שמופיעות קודם במסמך, יוצגו מתחת לתגיות שבאות לאחר מכן. על-מנת "להעלות" או "להוריד" תגית, יש לשנות את מיקומה במסמך.
SVG מאפשר גם הנפשה של אלמנטים גרפיים. אחת הדרכים להנפשת אלמנט היא באמצעות תגיות מיוחדות שלSMIL, המוכנסות לתוך האלמנט שמעוניינים להנפיש; לעומת זאת, אנימציות SMIL ב-SVG אינן תקן שאושר על ידי ה-W3C, ולכן הדפדפניםגוגל כרום ופיירפוקס מציגים אזהרה כאשר נעשה שימוש באנימציות SMIL בדף אינטרנט.[2] השיטה המועדפת כיום היא באמצעותהנפשות CSS, ושיטה נוספת להנפשת אלמנטים היא שימוש ב-JavaScript
תכונת ה-transform מאפשרת את הזזת האלמנט (באלמנטים גרפיים בלבד), שינוי ממדיו, סיבובו, הטייתו, או שילוב בין כמה סוגי שינויים, המהווים, למעשה, מעין פקודות. כל פקודה שכזו נכתבת כשם הפקודה, שלאחריו יופיעו צמדסוגריים, ובתוכם ייכתבו הפרמטרים הנדרשים להחלת השינוי.
סוג השינוי
תפקיד
מבנה
תחביר
הסבר
translate
הזזת האובייקט על המסך
translate(x y)
הזזת האובייקט x פיקסלים ימינה ו-y פיקסלים כלפי מטה. שימוש ביחידות שליליות יזיז לכיוון הנגדי. כאשר מושמט הערך y, לא תהיה תזוזה אנכית.
scale
שינוי ממדי האובייקט
scale(x y)
הכפלת רוחב האובייקט ב-x והכפלת גובהו ב-y. ערך שלילי גם יהפוך את האלמנט אופקית (x) או אנכית (y). כאשר הערך הוא 0, האובייקט לא יוצג כלל על המסך. השמטת הערך y תכפיל את גובה ורוחב האובייקט באותו מספר (הערך x).
rotate
סיבוב האובייקט
rotate(angle x y)
סיבוב האובייקט angle מעלות עם כיוון השעון (ערך שלילי יוביל לסיבוב בכיוון הנגדי). מוקד הסיבוב הוא ראשית הצירים. על ידי הוספת הערכים x ו-y, ניתן לקבוע נקודה אחרת על המסמך שסביבה ייעשה הסיבוב (למשל, מרכז הצורה).
skewX
הטיה אופקית של האובייקט
skewX(angle)
הזזת חלקו התחתון של האובייקט במקביל לציר ה-X, כך שצדו הימני של האובייקט ייצור עם גובהו זווית של angle מעלות.
skewY
הטיה אנכית של האובייקט
skewY(angle)
דומה ל-skewX, אך נעשית הזזה אנכית של צדו הימני של האובייקט.
יצירה של מטריצת מעבר – סדרה של ערכים, הקובעים את מיקומו החדש של האובייקט במרחב ואת צורתו. ניתן גם לשלב מספר שינויים בפקודת matrix אחת, על ידי חישוב השינויים בזה אחר זה.
להלן דוגמה למסמך SVG (כל תכונה נכתבה בשורה חדשה, על מנת להקל על הקריאה; הכיתובים בתוך התגית המיוחדת "< !-- -- >" הן הערות פנימיות לצורך שיפור הקריאות, והמחשב מתעלם מהן):
התוצאה:
<svgxmlns="http://www.w3.org/2000/svg"width="200"height="200"version="1.1"><!-- מלבן --><rectwidth="20"height="30"x="20"y="60"fill="red"stroke="black"/><!-- מעגל --><circlecx="50"cy="40"r="20"fill="orange"stroke="black"/><!-- קו --><linex1="25"y1="100"x2="56"y2="72"stroke="purple"stroke-width="3"/><!-- מצולע --><polygonpoints="120,5 160,5 170,40 120,40"fill="gray"stroke="lime"stroke-width="2"/><!-- קו שבור --><polylinepoints="140,140 150,150 140,160 150,170 140,180 150,190"fill="none"stroke="brown"stroke-width="3"/><!-- אליפסה --><ellipsecx="55"cy="150"rx="20"ry="34"fill="yellow"stroke="black"transform="rotate(-30 55 150)"/><!-- נתיב --><pathd="M 110 70 l 30 46 c -11 14, -49 14, -60 0 z"fill="lime"stroke="black"/><!-- כיתוב --><textx="90"y="60"font-size="12"font-family="Arial">טקסטלדוגמה</text></svg>
