נעים מאוד
אדיר סלוצקי
מעצב UI/UX בסטודיו בלינק
אחד ממנהלי הקבוצה CSS Masters
מומחה ל-CSS ולאנימציות באינטרנט
אבא טרי לנעם הקטנה
מכין שקשוקה מעולה 🍳
מה זה SVG ?
SVG = Scalable Vector Graphics
הוא סוג של קובץ של תמונה וקטורית
משומש באינטרנט בדרך כלל לאייקונים
וללוגו בצד של האתר
איך יוצרים SVG ?
אפשר ליצור עם כל תוכנה וקטורית, לדוגמה
איך יוצרים SVG ?
אנימציות
ירושת צבע
הוספת HTML
הוספת סקריפט
Media Queries
Media Queries
SVG Components
לגזור ולשמור
| Vector art | Animation | Visual CSS | Interactive CSS | Media Queries | Foreign object | Interactive HTML | JavaScript | |
| Img | check_circle | check_circle | check_circle | cancel | check_circle | check_circle | cancel | cancel |
| BG-image | check_circle | check_circle | check_circle | cancel | check_circle | check_circle | cancel | cancel |
| Object data | check_circle | check_circle | check_circle | check_circle | check_circle | check_circle | check_circle | check_circle |
| Inline SVG | check_circle | check_circle | check_circle | check_circle | check_circle | check_circle | check_circle | check_circle |
סיכום
SVG = Scalable Vector Graphics
הוא סוג של קובץ של תמונה וקטורית
משומש באינטרנט בדרך כלל לאייקונים
וללוגו בצד של האתר
אפשר גם להוסיף לו אנימציות
אפשר גם להוסיף לו מדיה קווירי
ולהוסיף לו סקריפט דרך ג'אווהסקריפט
ולבנות איתו קומפוננטות עם ערכים משתנים
Adir Slutzki
@AdirCode
Adir.sl