אני מתאר לעצמי שרובכם מכירים את ה-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>
