מדריך HTML5 – מדריך SVG לצורות בסיסיות

ראשי התיבות של SVG הן Scalable Vector Graphics – מדובר בגרפיקה מבוססת XML שקל להציג בה גם אנימציות. בדומה ל-HTML 5 Canvas, גם עם SVG אנו יכולים להציג צורות וגרפיקה. אך בניגוד ל-Canvas, אם אנו עובדים עם SVG אנו עובדים עם XML. אם אנו עובדים עם Canvas אנו צריכים לעבוד עם JavaScript.

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

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

    <svg version="1.1" 
  width="320" height="320"
  >="http://www.w3.org/2000/svg">  
    <rect fill="orange"
          stroke="black"
          width="150"
          height="75"
          x="50"
          y="25" />
</svg>

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

כך זה יראה:

ישנן כמה צורות שאפשר ליצור:

circle

<circle fill="orange"
   stroke="black"
   stroke-width="3"
   cx="40"
   cy="25"
   r="20"/>

ה-r בצורה של העיגול מבטאת את הרדיוס. כאן יש לנו גם תכונת stroke-width שקובעת את עובי הקו המקיף.

ellipse

<ellipse fill="orange"
   stroke="black"
   cx="100"
   cy="60"
   rx="75"
   ry="50"/>

ה-rx וה-ry באליפסה מציינים את הרדיוס בציר ה-X וציר ה-Y.

קוים ופוליגונים

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

<line x1="30"
   y1="30"
   x2="150"
   y2="85"
   stroke="red"
   stroke-width="4"/>

קוים מתוחכמים יותר (כלומר לא רק מנקודה לנקודה אלא כאלו שעוברים דרך כמה נקודות) אפשר ליצור באמצעות Polylines. אנו פשוט מציינים את ה-x ואת ה-y (קודם x אחרי זה y) של כל נקודה שאנו רוצים לעבור בה. כאשר אפשר גם למלא את 'הצורה' שהתקבלה. הנה דוגמא טובה:

<polyline points=" 0 0 ,50 0, 50 50"
   fill="orange"
   stroke="black"
   stroke-width="4"/>

ניתן גם לסגור את הצורה באמצעות שימוש באלמנט polygon שסוגר את הצורה הפתוחה באופן אוטומטי:

<polygon points=" 0 0 ,50 0, 50 50"
   fill="orange"
   stroke="black"
   stroke-width="4"/>

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

<svg version="1.1" 
  width="320" height="320"
  >="http://www.w3.org/2000/svg">  
<defs>
<linearGradient id="MyGradient">
    <stop offset="10%" stop-color="yellow" />
    <stop offset="90%" stop-color="blue" />
</linearGradient>
</defs>
    
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
    x="20" y="20" width="300" height="100"/>
</svg>

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

גרדיאנט מעגלי מאד דומה לגרדיאנט בקו ישר, רק שהאחוזים של האופסט הם ממרכז העיגול. הנה דוגמא:

<svg version="1.1" 
  width="320" height="320"
  >="http://www.w3.org/2000/svg">  
<defs>
<radialGradient id="MyGradient">
    <stop offset="10%" stop-color="yellow" />
    <stop offset="90%" stop-color="blue" />
</radialGradient >
</defs>
    
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
    x="20" y="20" width="300" height="100"/>
</svg>

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

  <svg version="1.1" 
    width="320" height="320"
    >="http://www.w3.org/2000/svg">  
  <defs>
  <radialGradient id="MyGradient">
      <stop offset="10%" stop-color="yellow" />
      <stop offset="90%" stop-color="blue" />
  </radialGradient>
      <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
          x="0" y="0" width="150" height="100">
          <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
              x="20" y="20" width="30" height="30"/>
          </pattern>
  </defs>
<ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
  </svg>

SVG מאפשר לנו לעשות הרבה יותר מסתם צורות. כאמור, מדובר במשהו שניתן לשלוט עליו עם CSS ועם JavaScript. אם אתם נותנים לאלמנט מסוים id, אפשר לגשת אליו עם JavaScript ולבצע איתו אנימציות ומניפולציות שונות. למידע נוסף על SVG אפשר להכנס לתוך ה-MSDN ולהסתכל על הדוקומנטציה: http://msdn.microsoft.com/library/ff972122.aspx