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>

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

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

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

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

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