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>

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

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

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

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

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

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

כך תגנו על משתמשים שלכם שמעלים מידע אישי רגיש כמו תעודות זהות באמצעות שירות אמאזוני.

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

כל אחד יכול לשאול את GPT, אבל אם תרצו לשאול אותו שאלות על תכנות – יש כמה שיטות וטיפים ליעל את העבודה מולו.

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