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).
דוגמה למבנה האלמנט:
<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, אך זה לרוב לא פרקטי, כיוון שהתחביר של שאר התגיות נוטה להיות קצר ופשוט יותר.
סוגי פקודות
בפסקה זו מוצגים סוגי הפקודות, תפקידן והמבנה שלהן.[1] שם הפקודה מיוצג באות גדולה אחרי שם הפקודה. כפי שהוזכר, יש הבדל בין שימוש באות גדולה לבין שימוש באות קטנה, אך הדבר נעשה כאן אך ורק לשם ההדגמה ומתן שם הפקודה.
- התחלת העקומה (M)
הנקודה שבה מתחילה העקומה. הפרמטרים שהפקודה מקבלת הם מיקום ה-X ומיקום ה-Y של נקודת ההתחלה:
M x y
קווים רגילים
פקודות הקווים הן הבסיסיות ביותר. תפקידן ליצור נקודה חדשה במסמך (שרטוט), ולחבר בקו ישר בינה לבין קצה הפקודה הקודמת (הנקודה האחרונה).
- קו אופקי (H)
קו אופקי. הפרמטר היחיד שמועבר אל הפקודה הוא שיעור ה-X של נקודת הסיום של הקו:
H x
שימוש באות גדולה יציין את שיעור ה-X של הנקודה, בעוד ששימוש באות קטנה יציין את מרחקה מנקודת הסיום של הפקודה האחרונה.
- קו אנכי (Vׂׂׂׂ)
קו אנכי. התחביר זהה לתחביר פקודת הקו האופקי, אך מייצג את שיעור ה-Y של נקודת הסיום של הפקודה. כמקודם, שימוש באות גדולה יציין את שיעור ה-Y של הנקודה, בעוד ששימוש באות קטנה יציין את מרחקה מנקודת הסיום של הפקודה האחרונה.
- קו חופשי (L)
קו (אלכסון) המחבר בין סוף הפקודה האחרונה לבין נקודה חדשה. הפרמטרים הנדרשים הם שיעורי ה-X וה-Y של הנקודה החדשה:
L x y
- סיום העקומה (Z)
חיבור קצה העקומה לתחילתה. האות Z נכתבת בפני עצמה, וללא פרמטרים. אין הבדל בין שימוש באות גדולה או באות קטנה בפקודה זו.
פקודות פיתול
קיימות 3 פקודות ליצירת קו מפותל. שתיים מהן הן עקומות בזייה, והשלישית היא קשת של אליפסה. לכל פקודת עקום בזייה נלוות גם פקודה נוספת אופציונלית, המאפשרת המשכיות חלקה לעקומה.
- עקום בזייה ריבועי (Q)
עקום בזייה ריבועי (מהמעלה השנייה) משתמש בארבעה פרמטרים: שניים לתיאור נקודת בקרה, ושניים נוספים לתיאור נקודת הסיום. העקום יוצא מנקודת סיום הפקודה הקודמת לכיוון נקודת הבקרה, ומשם ימשיך להתקרב אל נקודת הסיום. מבנה הפקודה:
Q x1 y1 x y
בדוגמה זו, x1 ו-y1 הן מיקום נקודת הבקרה, ו-x ו-y הן מיקום נקודת סיום הפקודה.
- המשכיות חלקה לעקום בזייה ריבועי (T)
לאחר הפקודה מסוג Q, ניתן גם להצהיר על פקודה מסוג T, שהיא למעשה עקום בזייה ריבועי, בו הפרמטרים היחידים הם של מיקום נקודת סיום הפקודה. נקודת הבקרה היא שיקוף של נקודת הבקרה של הפקודה הקודמת, ביחס לנקודת הסיום הקודמת. כלומר, נקודת הסיום הקודמת מהווה את אמצע הקטע המחבר את שתי נקודות הבקרה - הקודמת והנוכחית.
תחביר הפקודה:
T x y
כמו כן, ניתן ליצור רצף של פקודות T, כאשר בכל פעם נקודת הבקרה החדשה מחושבת כשיקוף של נקודת הבקרה הקודמת. אם פקודת T מוצהרת לאחר פקודה שאינה מסוג Q או T אחרת, היא תפורש כקו ישר בין נקודת ההתחלה לנקודת הסיום.
- עקום בזייה ממעלה שלישית (C)
עקום בזייה ממעלה שלישית דומה בתחבירו לעקום בזייה הריבועי, אך דורש 2 נקודות בקרה במקום אחת. עקום זה יתחיל מנקודת הסיום של הפקודה הקודמת, יתקרב אל נקודת הבקרה הראשונה, משם ימשיך ויתקרב אל נקודת הבקרה השנייה, ולאחר מכן, יתקרב ויתחבר אל נקודת הסיום.
תחביר הפקודה:
C x1 y1 x2 y2 x y
כאשר x1 ו-y1 מייצגים את מיקום נקודת הבקרה הראשונה, x2 ו-y2 מייצגים את מיקום נקודת הבקרה השנייה, ו-x ו-y מייצגים את מיקום נקודת הסיום.
- המשכיות חלקה לעקום בזייה מהמעלה השלישית (S)
כמו שעקומה מסוג T מהווה המשכיות חלקה לעקום בזייה ריבועי, קיימת פקודה דומה עבור עקום מהמעלה השלישית.
תחביר הפקודה:
S x2 y2 x y
נקודת הבקרה השנייה מיוצגת על ידי x2 ו-y2, ונקודת הסיום מיוצגת על ידי x ו-y. כמו בפקודה מסוג T, גם כאן, נקודת הבקרה מחושבת אוטומטית, אך במקרה זה היא מהווה שיקוף של נקודת הבקרה השנייה של הפקודה הקודמת (מסוג C או S).
- קשת של אליפסה (Aׂ)
פקודת הקשת יוצרת קשת של אליפסה.
תחביר הפקודה:
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
זוהי הפקודה בעלת המספר הרב ביותר של פרמטרים:
- x ו-y – נקודת הסיום של האליפסה. האליפסה למעשה "תישען" על נקודות ההתחלה (הנקודה הנוכחית שהגענו אליה בשרטוט) והסיום. כלומר, היקף האליפסה חייב להכיל גם את הנקודות הללו.
- rx ו-ry – רדיוסי האליפסה (האופקי והאנכי, בהתאמה).
- x-axis-rotation – סיבוב האליפסה (במעלות) סביב מרכזה. ערך חיובי יסובב עם כיוון השעון, ערך שלילי יסובב נגד כיוון השעון, והצבת הערך 0 לא תסובב את האליפסה כלל (כלומר, הרדיוס האופקי יקביל לציר ה-X והרדיוס האנכי יקביל לציר ה-Y).
- large-arc-flag – האליפסה, לפי הרדיוסים שלה וסיבובה, יכולה להישען על נקודות ההתחלה והסיום בשתי דרכים, כאשר בכל אחת מהדרכים הללו, האליפסה מחולקת לקשת אחת גדולה וקשת נוספת קטנה יותר. ערך דגל זה קובע אם תיבחר אחת מהקשתות הקטנות (כאשר הערך הוא 0) או אחת מהקשתות הגדולות (כאשר הערך הוא 1).
- sweep-flag – לאחר שנקבע אם הקשת תהיה הקטנה או הגדולה, יש לבחור את האליפסה שלה שייכת קשת זו (כפי שצוין, ישנן 2 אליפסות, היכולות להישען על נקודת ההתחלה ונקודת הסיום). הצבת הערך "1" בפרמטר זה תשרטט את הקשת עם כיוון השעון, והצבת הערך "0" תשרטט את הקשת נגד כיוון השעון.
דוגמה
דוגמה לשימוש בתגית. ניתן לראות את התוצאה בשרטוט משמאל:
<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" />
בדוגמה זו, העקומה הכוללת מתנהגת באופן הבא (שמות הפקודות מודגשים בסוגריים):
- נקודה התחלתית (M) בנקודה (20,60).
- תזוזה אופקית יחסית (h) למרחק של 40 פיקסלים ימינה.
- תזוזה אנכית יחסית (v) למרחק של 50 פיקסלים.
- תזוזה חופשית אבסולוטית (L) לנקודה (80,99).
- יצירת קשת יחסית של אליפסה (a) ש:
- הרדיוסים האופקי והאנכי שלה באורך 30 ו-40 פיקסלים, בהתאמה.
- היא מסובבת 30° של האליפסה נגד כיוון השעון (ערך שלילי).
- בחירה בקשת הגדולה עם כיוון השעון (large-arc-flag = 1, sweep-flag = 1).
- נקודת הסיום של הקשת במרחק 10 פיקסלים ימינה ו-10 פיקסלים כלפי מטה, ביחס לנקודת ההתחלה שלה.
- תזוזה חופשית יחסית (l) למרחק של 65 פיקסלים שמאלה ו-22 פיקסלים למטה.
- חיבור העקומה לתחילתה (z).
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 בדף אינטרנט.[2] השיטה המועדפת כיום היא באמצעות הנפשות CSS, ושיטה נוספת להנפשת אלמנטים היא שימוש ב-JavaScript
תכונות
לתגיות במסמך SVG יכולות להיות תכונות המשויכות להן (attributes). תכונה מחולקת לשם התכונה ולערכה (value), ותפקידה למסור מידע אודות האלמנט שהתגית מייצגת.
תכונות נכתבות בתוך תגית הפתיחה של האלמנט, עם רווח לפניהן, באופן הבא:
<tag attribute1="some value 1" attribute2="some value 2" attribute3="some value 3" ... attributeN="some value N" />
תגית יכולה להכיל תכונה אחת, מספר תכונות, או לא להכיל תכונות כלל.
התכונות הנפוצות במסמכי SVG:
| שם התכונה | תפקיד | הערה |
|---|---|---|
| id | נותן שם מזהה ייחודי לאלמנט מסוים במסמך | אין להעניק למספר תגיות את אותו ערך id |
| width height | ממדי האובייקט (רוחב, גובה) | נמדד בפיקסלים |
| x ו-y | מיקום האובייקט בתמונה | קואורדינטות של נקודה |
| cx ו-cy | מיקום של מעגל או אליפסה | מיקום מרכז הצורה |
| r | רדיוס של מעגל | באליפסה נעשה שימוש בתכונות rx ו-ry, המציינות את רדיוס האליפסה בחלק הרחב ובחלק הצר (הרדיוסים נחתכים במרכז האליפסה, כאשר הם מאונכים זה לזה) |
| transform | שינוי מיקומו או צורתו של האובייקט במרחב | תכונה זו מאפשרת את הזזת האובייקט, שינוי ממדיו, סיבובו, הטייתו, או שילוב בין כמה סוגי שינויים |
| x1 ו-y1 x2 ו-y2 | מיקום נקודת התחלה ונקודת סיום של קו | נעשה שימוש בתכונות אלה באלמנט line (ציור קו) וכן באלמנט linearGradient (יצירת רקע, המכיל מספר צבעים המשתלבים בהדרגתיות) |
| d | מכילה את שרשרת הפקודות של תגית ה-path | |
| fill | צבע המילוי של אלמנט | צבע שחור, כברירת מחדל |
| stroke | צבע קו המתאר של האלמנט | שקוף, כברירת מחדל |
| stroke-width | רוחב קו המתאר של האלמנט | 1 פיקסל, כברירת מחדל |
transform
תכונת ה-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 | החלת מספר שינויים בעזרת מטריצת מעבר | matrix(a b c d e f) | יצירה של מטריצת מעבר – סדרה של ערכים, הקובעים את מיקומו החדש של האובייקט במרחב ואת צורתו. ניתן גם לשלב מספר שינויים בפקודת matrix אחת, על ידי חישוב השינויים בזה אחר זה. |
דוגמה
להלן דוגמה למסמך 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>
תוכנות התומכות בתקן זה
דפדפנים
- גוגל כרום
- ספארי
- מוזילה פיירפוקס וכל שאר הדפדפנים המבוססים על מנוע Gecko של קרן מוזילה
- אינטרנט אקספלורר - מגרסה 9 (עד גרסה 8 באמצעות תוסף חיצוני של אדובי)
- אופרה
- Konqueror
תוכנות לעריכת קובצי SVG
קובץ SVG הוא קובץ XML; כלומר, הוא קובץ טקסטואלי, ולכן, ניתן לערוך אותו בכל עורך טקסט, אך יש יתרון לעריכתו באמצעות עורך ייעודי.
מספר גדל והולך של תוכנות תומך בפורמט זה. ביניהן:
- Open Office - חבילת תוכנות חופשית, המקבילה ל-Microsoft Office
- Inkscape - תוכנה חופשית, המיועדת לעריכת קובצי SVG
- אדובי אילוסטרייטור - תוכנת איור של חברת אדובי, תומכת בייבוא וייצוא של קובצי SVG
כמו כן, קיימים כלים רבים באינטרנט, המאפשרים עריכה, יצירה ושמירה של קובצי SVG.
מקורות
גלריה
הדגמה של שלבי הבניה של תגית מסוג path
קישורים חיצוניים
אתר האינטרנט הרשמי של SVG (באנגלית)- תקן ה-SVG באתר ה-W3C
הערות שוליים
- ↑ Paths - Line commands באתר MDN Web Docs
- ↑ SVG SMIL animation באתר Can I use...
