הוספת Scarable Vector Graphics (SVG) בדפדפן לא נתמך
בהודעה מוקדמת יותר בסדרה זו, הזכרנו קצת על המלכוד של SVG עם דפדפנים ישנים באמצעות Raphael.js לשרת את הגרפיקה כפתרון חלופי. בהודעה זו נסקור עוד בנושא זה.
הרעיון הוא פשוט, אנחנו עדיין משתמשים באלמנטים SVG כדרך העיקרית לספק גרפיקה בדף האינטרנט שלנו, אבל באותו זמן אנו גם מספקים פונקציה חזרה כך שניתן יהיה להציג אותו עדיין בדפדפנים שאינם נתמכים.
בטח, ישנם נתיבים רבים שאנחנו יכולים לקחת, אבל אנחנו רק להסתכל לתוך שני פתרונות שאני חושב שזה פתרון כללי יותר. אז בואו נראה איך אנחנו יכולים לעשות את זה.
שימוש באלמנט אובייקט
מלבד לשים אותו ישירות לתוך מסמך HTML, ישנן מספר דרכים לשלב SVG. לדוגמה, אם נשמור את הגרפיקה .svg קובץ, אנחנו יכולים להשתמש אלמנט.
לצורך ההפגנה, הוספנו לוגו Apple עם SVG לדף האינטרנט שלנו. עם זאת, הדפדפנים שאינם נתמכים יישארו ריקים. כדי לפתור את הבעיה, אנו יכולים לשמש גרף Bitmap, כדלקמן;
בדרך זו, דפדפנים נתמכים עדיין ייקחו את .svg, בזמן הדפדפנים שאינם נתמכים יישאו את גרסת Bitmap. הוספנו את “png” סמן מתחת ללוגו של Apple כדי לעקוב אחר הגרפיקה שאליה מועבר.
עם זאת, כפי שציינו בפוסט השני, גרפיקה מפת סיביות אינם גמישים וניתנים להרחבה כמו SVG. אז בואו נסתכל על פתרון אחר.
באמצעות Modernizr
שיטה נוספת שבה אנו יכולים להשתמש היא באמצעות מודרנית. לאלו מכם שאינם מכירים את ספריית JavaScript, אל תדאג שתהיה לנו הודעה ייעודית שתכסה אותה. לעת עתה, רק לשמור על קשר איתנו.
קודם כל, בואו להכין כמה ספריות JavaScript נדרש, Modernizr.js ו Raphael.js. לאחר מכן, אנחנו גם צריכים להמיר שלנו .svg קובץ לתבנית הנתמכת על ידי Raphael באמצעות כלי זה, ReadySetRaphael.js, ולשמור את הפלט באופן נפרד .י קובץ; בואו נקרא לזה svg.js.
כלול את Modernzr.js במסמך HTML, כך:
ובשביל שני הקבצים האחרים, raphael.js ו svg.js, אנו נטען אותו בתנאים, רק כאשר הוא מוצג בדפדפנים שאינם נתמכים.
עם Modernizr אנו יכולים לזהות את יכולת הדפדפן, במקרה זה נוכל לזהות אם הדפדפן מסוגל עיבוד SVG, ואם זה לא אנחנו נשרת את התסריט:
אם (! Modernizr.inlinesvg) document.write (''
