การเพิ่มกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) ในเบราว์เซอร์ที่ไม่รองรับ
ในการโพสต์ก่อนหน้าในชุดนี้เราได้กล่าวถึงเล็กน้อยเกี่ยวกับข้อผิดพลาดของ SVG กับเบราว์เซอร์เก่าและใช้ Raphael.js เพื่อให้บริการกราฟิกเป็นโซลูชันทางเลือก ในบทความนี้เราจะพิจารณาเรื่องนี้ต่อไป.
ความคิดนั้นง่ายเราจะยังคงใช้องค์ประกอบ SVG เป็นวิธีหลักในการส่งมอบกราฟิกบนหน้าเว็บของเรา แต่ในเวลาเดียวกันเราก็จะให้ฟังก์ชั่นทางเลือก เพื่อให้สามารถแสดงผลได้ในเบราว์เซอร์ที่ไม่รองรับ.
แน่นอนว่ามีหลายเส้นทางที่เราสามารถทำได้ แต่เราจะพิจารณาเฉพาะสองวิธีที่ฉันคิดว่าเป็นทางออกทั่วไปที่ดีกว่า เรามาดูกันว่าเราทำได้อย่างไร.
ใช้องค์ประกอบวัตถุ
นอกเหนือจากการใส่ลงในเอกสาร HTML โดยตรงมีหลายวิธีในการฝัง SVG ตัวอย่างเช่นหากเราเก็บกราฟิกไว้ .SVG ไฟล์เราสามารถใช้ ธาตุ.
เพื่อวัตถุประสงค์ในการสาธิตเราได้เพิ่มโลโก้ Apple พร้อม SVG ไว้ในหน้าเว็บของเรา อย่างไรก็ตามเบราว์เซอร์ที่ไม่รองรับจะยังคงว่างเปล่า ในการแก้ปัญหาเราสามารถให้บริการกราฟิกบิตแมปดังนี้
วิธีนี้เบราว์เซอร์ที่รองรับจะยังคงใช้งานได้ .SVG, ในขณะที่ เบราว์เซอร์ที่ไม่รองรับจะมีกราฟิกบิตแมป. เราได้เพิ่ม “PNG” ทำเครื่องหมายด้านล่างโลโก้ Apple เพื่อติดตามกราฟิกที่กำลังส่งมอบ.
อย่างไรก็ตามอย่างที่เราได้กล่าวถึงในกระทู้อื่น ๆ, บิตแมปกราฟิกไม่ยืดหยุ่นและสามารถปรับขนาดได้เป็น SVG. ลองดูวิธีแก้ปัญหาอื่น.
ใช้ Modernizr
อีกวิธีที่เราสามารถใช้คือโดยใช้ Modernizr. สำหรับผู้ที่ไม่คุ้นเคยกับห้องสมุด JavaScript นี้ไม่ต้องกังวลเราจะมีโพสต์เฉพาะสำหรับครอบคลุม สำหรับตอนนี้เพียงแค่ติดตามกับเรา.
ก่อนอื่นเรามาเตรียมไลบรารี JavaScript ที่จำเป็น, Modernizr.js และ Raphael.js. จากนั้นเราก็ต้องแปลงค่าของเรา .SVG ไฟล์เป็นรูปแบบที่รองรับ Raphael ด้วยเครื่องมือนี้ ReadySetRaphael.js และบันทึกผลลัพธ์ในแบบแยกต่างหาก .js ไฟล์; มาตั้งชื่อกันเถอะ svg.js.
รวม Modernzr.js ในเอกสาร HTML เช่น:
และสำหรับอีกสองไฟล์, Raphaël.js และ svg.js, เราจะโหลดตามเงื่อนไข, เมื่อดูในเบราว์เซอร์ที่ไม่รองรับเท่านั้น.
ด้วย Modernizr เราสามารถตรวจสอบความสามารถของเบราว์เซอร์ในกรณีนี้เราจะตรวจสอบว่าเบราว์เซอร์สามารถแสดงผล SVG ได้หรือไม่และถ้าไม่ใช่เราจะให้บริการสคริปต์:
if (! Modernizr.inlinesvg) document.write ('' PHHSNEWS