SVG: גרפיקה וקטורית ב-HTML 5 – חלק א'

הסבר על כיצד יוצרים גרפיקה ממוחשבת בפשטות בתקן HTML 5 עם SVG. זה כל כך קל שממש כיף לנסות!

אני מתאר לעצמי שרובכם מכירים את ה-canvas שבאמצעותו אנחנו יכולים ליצור גרפיקה ואנימציה בתקן HTML5. אך התקן החדש מאפשר לנו ליצור גרפיקה באופן פשוט באמצעות SVG – שראשי התיבות שלו הן: Scalable Vector Graphics. קל מאד להשתמש ב-SVG, במיוחד אם אתם מכירים קצת פלאש ויצא לכם לעבוד עם Motion XML או אם אתם ממש שונאים JavaScript ולא בא לכם להתעסק עם ה-API של canvas.

כמה פשוט זה SVG?

שימו לב לריבוע היפה הזה:

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

איך עשיתי את זה? פשוט הדבקתי את הקוד הבא:


<svg version="1.1"  width="300" height="300" xmlns="http://www.w3.org/2000/svg">
   <rect fill="red"  
   stroke="black"          
   width="100"  
   height="100"  
   x="0" y="0" />
</svg>

פשוט, לא? אפשר להגדיר גם צורות נוספות כגון אליפסה, עיגול ומשולש. אפשר גם לצייר קו! הנה דוגמה:

וככה עושים את זה:


<svg version="1.1"  width="300" height="300" xmlns="http://www.w3.org/2000/svg">
   <line x1="10"   
         y1="10"   
         x2="150"   
         y2="150"   
         stroke="blue"  
         stroke-width="3"/>
</svg>

ה-x1 וה-y1 הן נקודות ההתחלה, ו-x2 ו-y2 הן נקודות הסיום. פשוט, לא?
אפשר ליצור גם קוים יותר משוכללים עם polyline – שימו לב לגרף הזה:

את זה עשיתי עם הקוד הזה:


<svg version="1.1"  width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polyline points="0 100 , 20 150, 40 50, 60 75, 80 140, 100 300"
   fill="transparent"
   stroke="black"
   stroke-width="4"/>
</svg>

פוסטים נוספים שכדאי לקרוא

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

גלילה לראש העמוד