מהו קובץ SVG?

קובץ SVG הוא קובץ Scalar Vector Graphics המשתמש בפורמט טקסט מבוסס XML לתיאור המראה של תמונה. המילה Scalable מתייחסת לעובדה שניתן להגדיל את ה-SVG לגדלים שונים מבלי לאבד כל איכות. תיאור מבוסס טקסט של קבצים כאלה הופך אותם לבלתי תלויים ברזולוציה. זהו אחד הפורמטים הנפוצים ביותר לבניית אתר והדפסת גרפיקה על מנת להשיג מדרגיות. עם זאת, הפורמט יכול לשמש רק עבור גרפיקה דו מימדית. ניתן להציג/לפתוח קבצי SVG כמעט בכל הדפדפנים המודרניים כולל Chrome, Internet Explorer, Firefox ו-Safari.

היסטוריה קצרה

מפרטי SVG זמינים כתקן פתוח על ידי World Wide Web Consortium (W3C) מאז 1999. לפני כן, מפרטי פורמט קבצים דומים בשישה פורמטים שונים הוגשו ל-W3C עד 1998. עדכון הוחל למפרטים בשנת 2011 והוא היה בגרסה 1.1 . בשנת 2016, SVG 2 פורסם כגרסה חדשה יותר, כולל תכונות בנוסף לאלו שב-SVG 1.1.

מפרטי פורמט קובץ

דגם ה-SVG Document Object Model (DOM) מניח את היסודות לכל המפרטים והממשקים התואמים את הסעיפים המסוימים של המפרט. צופי SVG חייבים ליישם את ממשקי SVG DOM כפי שהוגדרו במפרטי W3C. ה-DOM שלו חושף מספר ממשקים לסוגי נתונים ואלמנטים שונים.

צורות SVG

ל-SVG יש כמה רכיבי צורה מוגדרים מראש שיכולים לשמש מפתחים:

  • מלבן
  • מעגל
  • אליפסה
  • קו
  • פוליליין
  • מצולע *שביל

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

נתיבים - נתיבים משמשים לייצוג קווי מתאר של צורות פשוטות כמו גם מורכבות. קודים משמשים להגדרת אופי הפעולה. לדוגמה, M משמש עבור Move To, L משמש עבור Line To, Z משמש לסגירת נתיב וכן הלאה.

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

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

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

צבע - מפרטי SVG מאפשרים להחיל צבעים על כל רכיבי ה-SVG הגלויים, ישירות או באמצעות מילוי, קו ומאפיינים אחרים. ניתן להשתמש בקידודי צבע שונים לציון כמו שחור או כחול, ייצוג hex, עשרוני או כאחוזים מהצורה RGB.

הדרגות ותבניות - ניתן למלא או לתאר צורות בקובץ SVG עם צבעים אחידים, מעברי צבע או דפוסים חוזרים.

אפקטי סינון - זוהי למעשה סדרה של פעולות גרפיות המוחלות על גרפיקה וקטורית מקור נתון כדי לייצר תוצאה שונה.

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

קישור - ייתכן שלתמונות SVG יהיו היפר-קישורים למסמכים אחרים. זה מושג באמצעות שפת הקישור של XML או XLink. זה מאפשר ליצור מצבי תצוגה ספציפיים המשמשים להתקרבות/הקטנה של אזור מסוים או להגביל את התצוגה לאלמנט מסוים.

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

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

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

דוגמאות

השורות הבאות מראות כיצד מעגל מיוצג באמצעות סקריפט SVG.

<html>
<body>

<h1>My first SVG</h1>

<svg width#"100" height#"100">
  <circle cx#"50" cy#"50" r#"40" stroke#"green" stroke-width#"4" fill#"yellow" />
</svg>

</body>
</html>

שורות הקוד הבאות מראות כיצד להשתמש ב- בלוק לעיבוד טקסט ל-SVG.

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>

הפניות

See Also