תגית svg לימוד html

מגדיר גרפיקה וקטורית.

תגית זו משמשת להגדרת גרפיקה וקטורית מסוג SVG (Scalable Vector Graphics). SVG היא פורמט גרפי וקטורי המאפשר יצירת גרפיקה שניתן להגדיל ולהקטין ללא אובדן איכות. גרפיקה ב-SVG נכתבת ב-XML וניתנת לציור בדפדפן באמצעות תגיות SVG.

מניחים את תגית <svg> במקום שבו רוצים להציג גרפיקה וקטורית. התכונות 'width' ו-'height' קובעות את מידות ה-svg, ובתוכה ניתן להוסיף גרפיקה כמו קווים, עיגולים, מלבנים ועוד באמצעות תגיות SVG נוספות.

תגית <svg> מאפשרת ליצור גרפיקה וקטורית בקוד HTML. SVG הוא פורמט גרפי המבוסס על XML ומאפשר יצירת תמונות שניתן להגדיל ולהקטין מבלי לאבד איכות. זהו פתרון יעיל להצגת אייקונים, גרפים, תרשימים ותמונות מורכבות אחרות בצורה מדויקת וברורה.

שימוש בתגית <svg>:
- מיקום: מניחים את תגית <svg> במקום שבו רוצים להציג גרפיקה וקטורית.
- תכונות "width" ו-"height": קובעות את רוחב וגובה ה-svg. ניתן לקבוע מידות קבועות או לא מוגדרות, תלוי בצורך.
- הוספת גרפיקה: בתגית <svg> ניתן להוסיף גרפיקה באמצעות תגיות נוספות כמו <circle>, <rect>, <line>, <path> ועוד. כל תגית נועדה לצייר צורה או קו מסוים בגרפיקה.

דוגמה לשימוש:



     <html>

       <head>

         <title>דוגמה</title>

       </head>

       <body>

         <svg width="100" height="100">

           <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

         </svg>

       </body>

     </html>

בדוגמה זו, התגית <svg> יוצרת אזור עם גובה ורוחב מוגדרים. בתוכה מצוייר עיגול עם מרכז ב-(50,50), רדיוס של 40 פיקסלים, גבול ירוק בעובי 4 פיקסלים וצבע מלא צהוב.

דוגמה

תוצאה

תגובות

רק רגע