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

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

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (3 הצבעות, ממוצע: 5.00 מתוך 5)

תגיות: פורסם בקטגוריה: HTML 5

יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!

כתיבת תגובה

האימייל לא יוצג באתר.

רישום