וובמאסטר - תיכנות ובניית אתרים

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

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 19 מרץ, 2011
F+
F-

ראשי התיבות של 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"
  xmlns="http://www.w3.org/2000/svg">  
    <rect fill="orange"
          stroke="black"
          width="150"
          height="75"
          x="50"
          y="25" />
</svg>

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

כך זה יראה:

rect in SVG

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

circle

<circle fill="orange"
   stroke="black"
   stroke-width="3"
   cx="40"
   cy="25"
   r="20"/>
עיגול ב-SVG

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

ellipse

<ellipse fill="orange"
   stroke="black"
   cx="100"
   cy="60"
   rx="75"
   ry="50"/>
אליפסה ב-SVG

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

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

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

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

קוים מתוחכמים יותר (כלומר לא רק מנקודה לנקודה אלא כאלו שעוברים דרך כמה נקודות) אפשר ליצור באמצעות 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"
  xmlns="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>

image

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

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

<svg version="1.1" 
  width="320" height="320"
  xmlns="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>

image

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

 

  <svg version="1.1" 
    width="320" height="320"
    xmlns="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

רן בר-זיק, אינטרנט ישראל

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.

אינטרנט ישראל: www.internet-israel.com
תגיות: HTML5‏  /  פיתוח‏  /  מדריך‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות