SVG באינטרנט
סיגלית אריאלי |
24.06.2021
לא, לא מדובר בטכנולוגיה חדשה בכלל. נהפוך הוא. מדובר בטכנולוגיה ותיקה שעכשיו, בזכות התקדמות האינטרנט, הופכת לרלוונטית. קבלו את האינטרנט הווקטורי – SVG.
כל מעצב יודע מה היתרון של וקטור על פני ביטמפ –
אפשר לשנות בו (כמעט) כל דבר – גודל, צבע, מיקום – בלי לפגוע באיכות. כיף גדול כשמעצבים לדפוס ולאינטרנט. הבדל
נוסף שעושה טוב לאינטרנט זה המשקל הנמוך של הקבצים הסופיים – לרוב, הם שוקלים הרבה פחות ממשקלה של תמונה באותו גודל.
אז למה אנחנו לא משתמשים בווקטרים באינטרנט?
אפשר לשנות בו (כמעט) כל דבר – גודל, צבע, מיקום – בלי לפגוע באיכות. כיף גדול כשמעצבים לדפוס ולאינטרנט. הבדל
נוסף שעושה טוב לאינטרנט זה המשקל הנמוך של הקבצים הסופיים – לרוב, הם שוקלים הרבה פחות ממשקלה של תמונה באותו גודל.
אז למה אנחנו לא משתמשים בווקטרים באינטרנט?
בעיקר בגלל שדפדפנים לא תומכים בזה. למעשה, הפורמט הווקטורי היחיד שהדפדפנים תמכו בו עד כה
בצורה טובה, הוא ה-swf (תוצר של פלאש), שגם הוא זקוק לפלאג-אין.
בצורה טובה, הוא ה-swf (תוצר של פלאש), שגם הוא זקוק לפלאג-אין.
היום, יותר ויותר דפדפנים תומכים ב-SVG (SVG באינטרנט), מה שמאפשר לנו להשתמש באלמנטים וקטוריים כחלק
מעיצוב האתר, על כל מה שמשתמע מכך.
מעיצוב האתר, על כל מה שמשתמע מכך.
דוגמה נפוצה אלו האייקונים הוקטוריים. ממילא הטרנד הנוכחי בעיצוב אתרים הוא עיצוב “שטוח”,
גרפי, שמאד מתאים לעיצוב בתוכנות וקטוריות כמו אילוסטרייטור. ממילא אייקונים כאלו הרבה יותר נח לעשות באילוסטרייטור
מאשר בפוטושופ (כן, יש עניין של הרגלי עבודה, אבל אין ספק שלאילוסטרייטור יש את הכלים המתאימים לכך), אז למה שלא
נשאיר את האייקון וקטורי ונשלב אותו באתר?
גרפי, שמאד מתאים לעיצוב בתוכנות וקטוריות כמו אילוסטרייטור. ממילא אייקונים כאלו הרבה יותר נח לעשות באילוסטרייטור
מאשר בפוטושופ (כן, יש עניין של הרגלי עבודה, אבל אין ספק שלאילוסטרייטור יש את הכלים המתאימים לכך), אז למה שלא
נשאיר את האייקון וקטורי ונשלב אותו באתר?
הבעיה הראשונה (והכמעט יחידה) היא גירסת הדפדפן. אמנם רוב הדפדפנים בגרסאותיהם האחרונות
תומכים בפורמט זה, אבל חשוב לדעת איזה מהם לא. בקישור זה תוכלו לראות טבלה ובה
רשימת הדפדפנים והגרסאות התומכות ב-SVG. כפי שניתן לראות, לגולשים בדפדפן כרום אין בעיה, כמו גם לגולשים בסלולאר עם
ספארי.
תומכים בפורמט זה, אבל חשוב לדעת איזה מהם לא. בקישור זה תוכלו לראות טבלה ובה
רשימת הדפדפנים והגרסאות התומכות ב-SVG. כפי שניתן לראות, לגולשים בדפדפן כרום אין בעיה, כמו גם לגולשים בסלולאר עם
ספארי.
אז מה עושים?
קודם כל יוצרים קובץ וקטורי ושומרים אותו בפורמט SVG. לאחר מכן, ניתן לשלב את
הקובץ בדף ה-HTML בדיוק כמו שמשלבים תמונה רגילה (כזו עם סיומת jpg או png).
הקובץ בדף ה-HTML בדיוק כמו שמשלבים תמונה רגילה (כזו עם סיומת jpg או png).
ומה אם אין לכם תוכנה ליצירת קבצים וקטורים? אל דאגה, גוגל חשבה גם עליכם. הנה עורך SVG המאפשר
לעצב צורות ומלל ולשמור את התוצאה בפורמט SVG. ניתן להתנסות בו ישירות מהדפדפן ולהוריד למחשב במידה והוא אכן שימושי.
לעצב צורות ומלל ולשמור את התוצאה בפורמט SVG. ניתן להתנסות בו ישירות מהדפדפן ולהוריד למחשב במידה והוא אכן שימושי.
עוד יתרון של SVG הוא שניתן לעצב אותו בעזרת CSS ו-JavaScript וכך
להוסיף לו אפקטים שונים ומשונים. מי שמעוניין לצפות ב-20 דוגמאות (חלקן מדהימות), מוזמן
להיכנס לקישור הזה.
להוסיף לו אפקטים שונים ומשונים. מי שמעוניין לצפות ב-20 דוגמאות (חלקן מדהימות), מוזמן
להיכנס לקישור הזה.
אין ספק שחלק מהדוגמאות אינן מעוצבות ויש דוגמאות שדורשות קוד מאד מורכב כדי לבצע אותן, אבל
זה הכיוון הכללי. ואם הזמן, אין ספק שהוא יהפוך לפופולארי יותר ויותר.
זה הכיוון הכללי. ואם הזמן, אין ספק שהוא יהפוך לפופולארי יותר ויותר.
מזמינים אתכם לקרוא עוד בדף הקורסים שלנו, לחצו כאן
כתבות נוספות שיכולות לעניין אותך:
-
נכתב ע"י סיגלית אריאלי
-
נכתב ע"י סיגלית אריאלי
-
נכתב ע"י סיגלית אריאלי