היתרונות של שימוש ב- Scalable Vector Graphics
Scarable Vector Graphics, או SVG, ממלאים תפקיד חשוב בעיצוב האתר כיום. אם אינך משתמש כרגע ב- SVG בעבודתך בעיצוב אתרים, הנה כמה סיבות לכך שעליך להתחיל לעשות זאת, כמו גם פעולות חוזרות שתוכל להשתמש בהן עבור דפדפנים ישנים יותר שאינם תומכים בקבצים אלה.
פתרון הבעיה
היתרון הגדול ביותר של SVG הוא רזולוציה העצמאות. מאחר שקובצי SVG הם גרפיקה וקטורית במקום תמונות מבוססות פיקסלים, ניתן לשנות את גודלם מבלי לאבד את איכות התמונה. הדבר מועיל במיוחד כאשר אתה יוצר אתרי אינטרנט בעלי יכולת תגובה, שצריכים להיראות טוב ולעבוד היטב על פני מגוון רחב של גדלי מסכים ומכשירים .
קבצי SVG ניתן scaled למעלה או למטה כדי להתאים את גודל המשתנה ואת הפריסה הצרכים של אתר האינטרנט שלך תגובה ואתה לא צריך לדאוג גרפיקה אלה נתקל באיכות בסכנה בכל שלב של הדרך.
גודל הקובץ
אחד האתגרים בשימוש בתמונות סריקה (JPG, PNG, GIF) באתרי תגובה הוא גודל הקובץ של תמונות אלה. בגלל תמונות סריקה לא בקנה מידה את הדרך שבה אלה וקטור לעשות, אתה צריך לספק את התמונות מבוססות פיקסל שלך בגודל הגדול ביותר שבו הם יוצגו. הסיבה לכך היא שאתה תמיד יכול לעשות תמונה קטנה ולשמור על האיכות שלה, אבל זה לא נכון עבור ביצוע תמונות גדול יותר. התוצאה הסופית היא כי לעתים קרובות יש לך תמונות שהן הרבה יותר גדול מאשר הם מוצגים על המסך של אדם, כלומר הם צורך להיות נאלץ להוריד קובץ גדול מאוד.
SVG מטפל באתגר זה. בגלל גרפיקה וקטורית ניתנים להרחבה, אתה יכול לקבל גודל קבצים קטנים מאוד, ללא תלות בגודל התמונות האלה ייתכן שיהיה צורך להציג. זה יהיה בסופו של דבר יש השפעה חיובית על הביצועים הכוללים של האתר ואת מהירות ההורדה.
עיצוב CSS
קוד SVG ניתן גם להוסיף ישירות HTML של דף. זה ידוע בשם "SVG מוטבע." אחד היתרונות של שימוש SVG מוטבע היא כי מאז הגרפיקה הם באמת נמשך על ידי הדפדפן מבוסס על הקוד שלך, אין צורך לבצע בקשת HTTP כדי להביא קובץ תמונה. יתרון נוסף הוא SVG מוטבע יכול להיות מנוסח עם CSS.
צריך לשנות את הצבע של סמל SVG? במקום צורך לפתוח את התמונה באיזה סוג של תוכנת עריכה וייצוא להעלות את הקובץ שוב, אתה יכול פשוט לשנות את קובץ SVG עם כמה שורות של CSS.
ניתן גם להשתמש בסגנונות CSS אחרים על גרפיקה SVG כדי לשנות אותם במצבי ריחוף או לצורכי תכנון מסוימים. אתה יכול גם להנפיש את הגרפיקה להוסיף קצת תנועה אינטראקטיביות לדף.
אנימציות
בגלל קבצי SVG מוטבע יכול להיות מנוסח עם CSS, אתה יכול להשתמש ב- CSS אנימציות עליהם גם כן. CSS transforms ומעברים הן שתי דרכים קלות להוסיף קצת חיים קבצי SVG. אתה יכול לקבל עשיר דמוי Flash חוויות בדף מבלי להיכנע downsides שמגיעים עם פלאש באתרי אינטרנט היום.
שימושים של SVG
חזק כמו SVG הוא, גרפיקה אלה לא יכול להחליף כל פורמט תמונה אחרת אתה משתמש באתר האינטרנט שלך. תמונות הדורשות עומק צבע עמוק עדיין צריך להיות JPG או אולי קובץ PNG, אבל תמונות פשוטות כמו סמלים מתאימים באופן מושלם להתבצע כמו SVG.
SVG יכול גם להיות מתאים איורים מורכבים יותר, כמו לוגו החברה או גרפים ותרשימים. כל הגרפיקה ייהנו מלהיות מדרגי, מסוגל להיות מנוסח עם CSS, ואת היתרונות האחרים המפורטים במאמר זה.
תמיכה בדפדפנים ישנים יותר
התמיכה הנוכחית עבור SVG היא טובה מאוד בדפדפני אינטרנט מודרניים. הדפדפנים היחידים שחסרים באמת תמיכה בגרפיקה זו הם גרסאות ישנות יותר של Internet Explorer (גרסה 8 ומטה) וכמה גירסאות ישנות יותר של Android. בסך הכל, אחוז קטן מאוד של אוכלוסיית הגלישה עדיין משתמשת בדפדפנים אלה, ומספר זה ממשיך להתכווץ. משמעות הדבר היא כי SVG ניתן להשתמש די בטוח באתרי אינטרנט כיום.
אם אתה רוצה לספק גיבוי עבור SVG, אתה יכול להשתמש בכלי כמו Grumpicon מקבוצת Filament. משאב זה ייקח את קובצי התמונות של SVG ויוצר יציאות PNG עבור דפדפנים ישנים יותר.
בעריכת ג'רמי ג'ירארד ב -27 / 7/2007