SVG

מתוך ויקיפדיה, האנציקלופדיה החופשית
קפיצה אל: ניווט, חיפוש
המחשה של ההבדל בין גרפיקה וקטורית (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. בדוגמה זו, הרוחב (width) הוא 400 פיקסלים, והגובה (height) הוא 300 פיקסלים. הפרמטרים xmlns ו-version "אומרים" שזהו מסמך SVG וגירסת התקן היא 1.1 (פרמטרים אלה אינם נדרשים לרוב כאשר קובץ ה-SVG נכתב כחלק ממסמך HTML).

rect[עריכת קוד מקור | עריכה]

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

<rect width="6" height="8" x="0" y="0" />

cricle[עריכת קוד מקור | עריכה]

מציינת מעגל על-ידי קביעת מיקום מרכז המעגל ורדיוסו. לדוגמה:

<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, אך זה לרוב לא אפקטיבי, כיוון שהתחביר של שאר התגיות נוטה להיות קצר ופשוט יותר.

סוגי פקודות[עריכת קוד מקור | עריכה]

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

התחלת העקומה (M)

הנקודה שבה מתחילה העקומה. הפרמטרים שהפקודה מקבלת הם מיקום ה-X וה-Y של נקודת ההתחלה:

M x y

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

קווים רגילים[עריכת קוד מקור | עריכה]

פקודות הקווים הן הבסיסיות ביותר. תפקידן ליצור נקודה חדשה על המסמך, ולחבר בקו ישר בינה לבין קתה הפקודה הקודמת.

קו אופקי (H)

קו אופקי. הפרמטר היחיד המועבר אל הפקודה הוא שיעורי ה-X של נקודת הסיום של הקו:

H x

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

קו אנכי (Vׂׂׂׂ)

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

קו חופשי (L)

קו המחבר בין סוף הפקודה האחרונה לבין נקודה חדשה. הפרמטרים הנדרשים הם שיעורי ה-X וה-Y של הנקודה החדשה:

L x y
סיום העקומה (Z)

חיבור קצה העקומה לתחילתה. האות Z נכתבת בפני עצמה, וללא פרמטרים. אין הבדל בין שימוש באות גדולה או קטנה בפקודה זו‏[1].

פקודות פיתול[עריכת קוד מקור | עריכה]

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

עקום בזייה ריבועי (Q)

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

Q x1 y1 x y

בדוגמה זו, x1 ו-y1 הן מיקום נקודת הבקרה, ו-x ו-y מייצגות את נקודת סיום הפקודה.

המשך חלק לעקום בזייה ריבועי (T)

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

T x y

כמו כן, ניתן ליצור שרשרת של פקודות T, כאשר בכל פעם נקודת הבקרה החדשה מחושבת כהשתקפות של נקודת הבקרה הקודמת. במידה ופקודת Q מוצהרת לאחר פקודה שאינה מסוג 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ׂ)

פקודת הקשת יוצרת קשת של אליפסה (ראו תגית ellipse). התחביר הוא כזה:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

זוהי הפקודה בעלת המספר הרב ביותר של פרמטרים:

  • x ו-y- נקודת הסיום של האליפסה. האליפסה למעשה "תישען" על נקודת ההתחלה והסיום. במילים אחרות, האליפסה משיקה לנקודות אלה
  • rx ו-ry- רדיוסי האליפסה
  • x-axis-rotation- סיבובה אליפסה (במעלות) סביב מרכזה. ערך חיובי יסובב עם כיוון השעון, ערך שלילי יסובב נגד כיוון השעון, והצבת הערך 0 לא תשנה את האליפסה
  • 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 של שטקסט מתייחסים לפינה שמאלית-תחתונה של תיבת הטקסט.

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[עריכת קוד מקור | עריכה]

הצהרה על "שכפול" תגית מסוימת ושימוש בה. בחירת התגית לשכפול נעשית על-ידי ציון ערך ה-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 יכולות להיות תכונות המשויכות להם (attributes). תכונה מחולקת לשם התכונה ולערכה, ותפקידה למסור מידע על האלמנט שהתגית מייצגת. תכונות נכתבות בתך תגית הפתיחה של אלמנט, עם רווח לפניהן, והמבנה שלהן הוא כזה:

someAttribute="someValue"

תגית יכולה גם להכיל יותר מתכונה אחת, אם בכלל. בין התכונות הנפוצות במסמכי SVG:

שם התכונה תפקיד הערה
id נותן שם מזהה לאלמנט מסוים הייחודי לו אין להעניק לשתי תגיות את אותו ערך ה-id
width
height
מימדי האובייקט
x ו-y מיקום האובייקט בקובץ
cx ו-cy מיקום של מעגל או אליפסה מיקום מרכז הצורה
r רדיוס של מעגל באליפסה נעשה שימוש בתכונות rx ו-ry, המציינות את רדיוס האליפסה בחלק הרחב ובחלק הצר
transform שינוי מיקומו או צורתו של האובייקט במרחב תכונה זו מאפשרת את הזזת האובייקט, שינוי מימדיו, סיבובו, הטייתו, או שילוב בין כמה סוגי שינויים
x1 ו-y1
x2 ו-y2
התחלה וסיום של קו נעשה שימוש בתכונות אלה באלמנט line (ציור קו) וכן באלמנט linearGradient (יצירת רקע המכיל מספר צבעים המשתלבים בהדרגתיות)
fill צבע המילוי של אלמנט שחור כברירת מחדל
stroke צבע קו המיתאר של האלמנט שקוף כברירת מחדל
fill רוחב קו המיתאר של האלמנט פיקסל אחד כברירת מחדל

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.

מקורות [עריכת קוד מקור | עריכה]

לקריאה נוספת [עריכת קוד מקור | עריכה]

הערות שוליים[עריכת קוד מקור | עריכה]

  1. ^ Paths - Line commands באתר MDN