การทดสอบ SVG รองรับเครื่องมือเว็บเบราว์เซอร์ [กรณีศึกษา]
SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) ได้รับการสนับสนุนอย่างเป็นทางการจากเว็บเบราว์เซอร์หลักทั้งหมดรวมถึง Internet Explorer การสนับสนุนครอบคลุมไปถึงซอฟต์แวร์แก้ไขรูปภาพที่หลากหลายโดยเฉพาะ Inkscape ซึ่งใช้ SVG เป็นรูปแบบดั้งเดิม (หากคุณต้องการทบทวนทบทวน SVG คลิกที่นี่).
แต่เว็บเบราว์เซอร์รองรับอะไรบ้าง? เอ็นจิ้นการเรนเดอร์ทั้งหมดแสดงไฟล์ SVG และคุณสมบัติของมันในลักษณะเดียวกันหรือไม่? แล้วคุณสมบัติขั้นสูงเช่นฟิลเตอร์ล่ะ? นั่นคือสิ่งที่เราจะค้นหา เรานำตัวอย่างเบราว์เซอร์ที่ทันสมัยรวมถึงเบราว์เซอร์ที่มีชื่อเสียงน้อยกว่าและ ทดสอบพวกเขาด้วยไฟล์ SVG ที่สร้างขึ้นเพื่อจุดประสงค์นี้.
ภาพทดสอบ
เราเตรียมภาพการทดสอบโดยมุ่งเน้นที่องค์ประกอบที่ศิลปินมักใช้ ในบรรดาคุณสมบัติที่ทดสอบคือ: เส้นทางข้อความและการโต้ตอบ, การไล่ระดับสี, ตัวกรองเบลอแบบเกาส์และในที่สุดก็มีตัวกรองคอมโพสิตขั้นสูงซ้อนกันจากประเภทตัวกรองเพิ่มเติม.
เอ็นจินเว็บเบราว์เซอร์
เครื่องยนต์กะพริบตา
เราเริ่มต้นด้วย - โดยเครื่องมือการเรนเดอร์บ่อยที่สุด - กะพริบตา Blink เป็นเอ็นจิ้นพื้นฐานสำหรับเบราว์เซอร์ Chrome และ Chromium ของ Google, Opera และ Android WebView เบราว์เซอร์ที่กล่าวมาข้างต้นทั้งหมดแสดงภาพการทดสอบในลักษณะเดียวกันกับแพลตฟอร์มที่ทดสอบ.
เมื่อเปรียบเทียบกับภาพต้นฉบับที่ผลิตโดย Inkscape ไม่มีปัญหาใด ๆ ยกเว้นความแตกต่างเล็กน้อยในการแสดงผลของเอฟเฟ็กต์แบบซ้อน.
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| โครเมียม | 43.0.2357.125 | ลินุกซ์ |  |
| อุปรากร | 30.0.1835.59 | ลินุกซ์ | |
| อุปรากร | 30.0.1856.93524 | Android | |
| อุปรากร | 30.0.1835.88 | ของ windows | |
| โครเมียม | 38.0.2125.114 | Android | |
| โครเมียม | 43.0.2357.130 | ของ windows | |
| ไฟฉาย | 39.0.0.9626 | ของ windows |
Webkit engine
ตามสถิติการใช้เบราว์เซอร์เมื่อเร็ว ๆ นี้ตำแหน่งสามอันดับแรกไม่ได้อยู่ในเบราว์เซอร์ที่ใช้ webkit (ณ เดือนพฤษภาคม 2558) อย่างไรก็ตามเครื่องมือนี้แพร่หลายในหมู่นักพัฒนา ยิ่งไปกว่านั้นมีการใช้งานต่างๆและส้อมของมัน
เบราว์เซอร์ที่ทดสอบทั้งหมดแสดงผลไฟล์ SVG ของเราโดยไม่มีปัญหา อย่างไรก็ตาม, ความแตกต่างในการเรนเดอร์ของ Specular Lighting, คอมโพสิตฟิลเตอร์คอมโพสิต, ถูกพบเมื่อเปรียบเทียบกับ Inkscape.
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| การแข่งรถวิบาก | 8.0.6 | MacOS |  |
| นาก | 0.9.05 | ลินุกซ์ | |
| QupZilla | 1.8.6 | ลินุกซ์ | |
| QupZilla | 1.8.6 | ของ windows | |
| ปลาโลมา | 10.3.1 | Android | |
| Konqueror | 15.04.2 | ลินุกซ์ | |
| เบราว์เซอร์ UC | 10.5.0.575 | Android |
เครื่องยนต์ตรีศูล
ตรีศูลเป็นเอ็นจิ้นลิขสิทธิ์ที่ใช้โดย Internet Explorer เวอร์ชั่น 4.0 - 11.0 IE ตีความ SVG ของเราอย่างสมบูรณ์แบบ ยิ่งกว่านั้นรูปลักษณ์ตัวกรองคอมโพสิตตรงกับภาพต้นฉบับที่ดีที่สุด เราได้ทดสอบ IE 9 ซึ่งเป็น IE ที่ใช้มากที่สุดเป็นอันดับสอง (ณ เดือนพฤษภาคม 2015) และพบว่ารุ่นนี้มีปัญหากับ gaussian blur และตัวกรองคอมโพสิต.
นี่ไม่ใช่เรื่องแปลก แต่เนื่องจาก IE 9 เปิดตัวครั้งแรกก่อนร่างสุดท้ายของมาตรฐาน SVG 1.1 SE ซึ่งมีการเพิ่มเอฟเฟกต์ตัวกรองอย่างเป็นทางการ.
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| IE | 11.0.9600.17843 | ของ windows |  |
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| IE | 9.0.8112.16421 | ของ windows |  |
เครื่องยนต์ตุ๊กแก
Gecko เป็นเครื่องมือที่พัฒนาโดย Mozilla Corporation และใช้ในเว็บเบราว์เซอร์ Firefox หรือไคลเอนต์อีเมล Thunderbird มันถูกใช้โดยเบราว์เซอร์ PaleMoon, Waterfox และอื่น ๆ อีกมากมายของ Firefox เวอร์ชั่นก่อนหน้า ในกรณีของเครื่องยนต์ Gecko ผลลัพธ์ไม่เหมือนกันในทุกแพลตฟอร์ม.
รุ่น Windows แสดงความผิดพลาดเล็กน้อยในการแสดงข้อความตามเส้นทาง พบปัญหาเดียวกันทั้งในเบราว์เซอร์ Firefox และ PaleMoon เช่นเดียวกับ Webkit ดูเหมือนว่าตุ๊กแกจะมีปัญหากับการแสดงผลตัวกรอง Specular Lighting อย่างถูกต้อง.
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| Firefox | 38.0.5 | ลินุกซ์ |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| Firefox | 38.0.5 | ของ windows |  |
| PaleMoon | 25.5 | ของ windows |
เบราว์เซอร์ที่มีปัญหา
ดังที่เห็นข้างต้นเครื่องมือแสดงผล / เบราว์เซอร์หลัก ๆ ทุกรุ่นได้ผ่านการทดสอบของเราโดยไม่มีปัญหาอย่างมีนัยสำคัญ ลองตรวจสอบคนที่ทำได้ไม่ดี.
Maxthon เป็นเบราว์เซอร์ข้ามแพลตฟอร์มที่พัฒนาในประเทศจีน อ้างอิงจาก Fahad Khan 20 เว็บเบราเซอร์ทางเลือกสำหรับ Windows Maxthon ใช้ทั้งเครื่องยนต์ Trident และ Webkit เราไม่พบปัญหาใด ๆ กับการแสดงผล SVG บน Linux (v. 1.0.5.3) และ Windows (v. 4.4.5.3000); อย่างไรก็ตามบนอุปกรณ์ Android ไม่ได้แสดงภาพ gaussian หรือตัวกรองดั้งเดิมอื่น ๆ.
CM Browser ดำเนินการอย่างรวดเร็วในการทดสอบอุปกรณ์ Samsung galaxy S3 ของเรา แต่ก็ยังไม่รองรับเอฟเฟ็กต์ฟิลเตอร์ที่อธิบายโดยข้อกำหนดคุณลักษณะ SVG 1.1 SE.
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror เป็นเบราว์เซอร์เริ่มต้นสำหรับ KDE ซึ่งเป็นหนึ่งในสภาพแวดล้อมเดสก์ท็อป Linux ที่ได้รับความนิยมมากที่สุด ความสามารถในการเรนเดอร์ไฟล์ SVG ใน Konqueror ขึ้นอยู่กับเอ็นจิ้นการเรนเดอร์ ด้วย WebKit เปิดใช้งานการทดสอบ SVG ของเราแสดงผลได้อย่างถูกต้อง อย่างไรก็ตามเอ็นจิ้นการเรนเดอร์เริ่มต้นของ Konqueror, KHTML ดูเหมือนจะขาดการสนับสนุนคุณสมบัติหลายอย่าง: เอฟเฟ็กต์ฟิลเตอร์ไม่ได้ถูกนำไปใช้กับวัตถุต้นแบบและเครื่องหมายสิ้นสุดจังหวะ.
| เบราว์เซอร์ | รุ่น | เวที | ผล |
| Konqueror KHTML | 15.04.2 | ลินุกซ์ |  |
ข้อสรุป
ในการทดสอบของเราเรามุ่งเน้นไปที่การสนับสนุนรูปแบบ SVG ในเครื่องมือการเรนเดอร์เว็บที่ทันสมัย เราได้ทดสอบเอ็นจิ้นการเรนเดอร์หลัก 4 ตัวและเบราว์เซอร์ที่แตกต่างกัน 15 ตัวรวมถึงเบราว์เซอร์ยอดนิยมเช่น Maxthon หรือ Dolphin เบราว์เซอร์เวอร์ชันปัจจุบันเกือบทั้งหมดผ่านการทดสอบของเราและยากที่จะเลือกผู้ชนะที่ชัดเจน.
ปรากฏว่า สนับสนุน และ แก้ไขการซ้อนของตัวกรองพื้นฐาน เป็นความท้าทายสุดท้ายที่เหลืออยู่สำหรับเอ็นจิ้นการแสดงผลในปัจจุบัน เมื่อเราเปรียบเทียบภาพ SVG ดั้งเดิมของเรากับผลลัพธ์ที่ได้ทั้งหมดเราได้เสนอชื่อ IE 11 (โปรแกรมตรีศูล) เป็นครั้งแรก.
อย่างไรก็ตามเป็นที่ชัดเจนว่าเครื่องยนต์ Blink กำลังติดตามอย่างใกล้ชิดดังนั้นเราขอแนะนำเบราว์เซอร์ที่ใช้ Blink สำหรับการแสดงผลไฟล์ SVG หากคุณต้องการทดสอบเบราว์เซอร์ที่คุณชื่นชอบอย่างรวดเร็วคุณสามารถใช้หน้าทดสอบ SVG renderer ของเราได้ที่นี่.
หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนขึ้นสำหรับ Hongkiat.com โดย Michal Rost Michal ทำงานเป็นโปรแกรมเมอร์ใน บริษัท ชีวการแพทย์ แต่อุทิศเวลาว่างให้กับการพัฒนาแอพโอเพนซอร์ซและเว็บพอร์ทัลที่ไม่หวังผลกำไร เขาเป็นผู้ก่อตั้ง scalablegfx คุณสามารถหาเขาใน Twitter.
