SVG באינטרנט

כתבה סיגלית אריאלי, מדריכה בקורס בניית אתרים במנטור

לא, לא מדובר בטכנולוגיה חדשה בכלל. נהפוך הוא. מדובר בטכנולוגיה ותיקה שעכשיו, בזכות התקדמות האינטרנט, הופכת לרלוונטית. קבלו את האינטרנט הווקטורי – SVG.

svg

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

עוד יתרון של SVG הוא שניתן לעצב אותו בעזרת CSS ו-JavaScript וכך להוסיף לו אפקטים שונים ומשונים. מי שמעוניין לצפות ב-20 דוגמאות (חלקן מדהימות), מוזמן להיכנס לקישור הזה.
אין ספק שחלק מהדוגמאות אינן מעוצבות ויש דוגמאות שדורשות קוד מאד מורכב כדי לבצע אותן, אבל זה הכיוון הכללי. ואם הזמן, אין ספק שהוא יהפוך לפופולארי יותר ויותר.

Be Sociable, Share!

    .התגובות סגורות