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).

דוגמה למבנה האלמנט: 

<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" />
תוצאת הדוגמה. העיגול מסמן את נקודת התחלת העקומה.

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

  1. נקודה התחלתית (M) בנקודה (20,60).
  2. תזוזה אופקית יחסית (h) למרחק של 40 פיקסלים ימינה.
  3. תזוזה אנכית יחסית (v) למרחק של 50 פיקסלים.
  4. תזוזה חופשית אבסולוטית (L) לנקודה (80,99).
  5. יצירת קשת יחסית של אליפסה (a) ש:
    • הרדיוסים האופקי והאנכי שלה באורך 30 ו-40 פיקסלים, בהתאמה.
    • היא מסובבת 30° של האליפסה נגד כיוון השעון (ערך שלילי).
    • בחירה בקשת הגדולה עם כיוון השעון (large-arc-flag = 1, sweep-flag = 1).
    • נקודת הסיום של הקשת במרחק 10 פיקסלים ימינה ו-10 פיקסלים כלפי מטה, ביחס לנקודת ההתחלה שלה.
  6. תזוזה חופשית יחסית (l) למרחק של 40 פיקסלים שמאלה ו-80 פיקסלים למטה.
  7. חיבור העקומה לתחילתה (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>

תוכנות התומכות בתקן זה

דפדפנים

תוכנות לעריכת קובצי SVG

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

מספר גדל והולך של תוכנות תומך בפורמט זה. ביניהן:

כמו כן, קיימים כלים רבים באינטרנט, המאפשרים עריכה, יצירה ושמירה של קובצי SVG.

מקורות 

גלריה

  • הדגמה של שלבי הבניה של תגית מסוג path
    הדגמה של שלבי הבניה של תגית מסוג path

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

מיזמי קרן ויקימדיה
ויקימילון ערך מילוני בוויקימילון: SVG

הערות שוליים

  1. ^ Paths - Line commands באתר MDN
  2. ^ SVG SMIL animation באתר Can I use...
הערך באדיבות ויקיפדיה העברית, קרדיט,
רשימת התורמים
רישיון cc-by-sa 3.0

30130514SVG

אוחזר מתוך "https://he.hamichlol.org.il/w/index.php?title=SVG&oldid=1618173"