Kiểm tra hỗ trợ SVG trên các công cụ trình duyệt web [Nghiên cứu trường hợp]
SVG (Đồ họa vectơ có thể mở rộng) được hỗ trợ chính thức bởi tất cả các trình duyệt web chính, bao gồm cả Internet Explorer. Sự hỗ trợ mở rộng ra nhiều loại phần mềm chỉnh sửa hình ảnh, đặc biệt là Inkscape, sử dụng SVG làm định dạng gốc của nó (Nếu bạn muốn xem lại SVG, bấm vào đây).
Nhưng chính xác những gì được hỗ trợ bởi các trình duyệt web? Có phải tất cả các công cụ kết xuất đều hiển thị các tệp SVG và các tính năng của chúng theo cùng một cách không? Và những gì về các tính năng nâng cao của họ như bộ lọc? Vâng, đó là những gì chúng ta sẽ tìm hiểu. Chúng tôi đã lấy một mẫu các trình duyệt hiện đại, bao gồm một số trình duyệt ít nổi tiếng hơn và đã thử nghiệm chúng với một tệp SVG được thực hiện cho mục đích này.
Hình ảnh thử nghiệm
Chúng tôi đã chuẩn bị bức tranh thử nghiệm tập trung vào các yếu tố mà các nghệ sĩ có khả năng sử dụng nhiều nhất. Trong số các tính năng được kiểm tra là: đường dẫn văn bản và tương tác của chúng, độ dốc, bộ lọc mờ gaussian và cuối cùng là bộ lọc tổng hợp nâng cao được xếp chồng từ nhiều loại bộ lọc hơn.
Công cụ trình duyệt web
Động cơ nháy mắt
Chúng tôi đã bắt đầu với - cho đến nay công cụ kết xuất thường xuyên nhất - Blink. Blink là công cụ gốc dành cho trình duyệt Chrome và Chromium của Google, Opera và Android WebView. Tất cả các trình duyệt được đề cập ở trên hiển thị hình ảnh thử nghiệm theo cùng một cách trên các nền tảng được thử nghiệm.
Khi so sánh với hình ảnh gốc do Inkscape tạo ra, không có vấn đề gì ngoại trừ một chút khác biệt trong kết xuất các hiệu ứng bộ lọc xếp chồng.
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| Crom | 43.0.2357.125 | Linux |  |
| Opera | 30.0,1835,59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0,1835,88 | các cửa sổ | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | các cửa sổ | |
| Đuốc | 39.0.0.9626 | các cửa sổ |
Công cụ Webkit
Theo thống kê sử dụng trình duyệt gần đây, ba vị trí hàng đầu không thuộc về trình duyệt dựa trên webkit (kể từ tháng 5 năm 2015). Tuy nhiên, công cụ này là phổ biến rộng rãi giữa các nhà phát triển. Hơn nữa, có nhiều cách thực hiện và dĩa khác nhau
Tất cả các trình duyệt được thử nghiệm đã hiển thị tệp SVG của chúng tôi mà không gặp sự cố; tuy nhiên, sự khác biệt trong kết xuất của Specular Lighting, một thành phần bộ lọc tổng hợp, đã được quan sát so với Inkscape.
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| Safari | 8.0.6 | Hệ điều hành Mac |  |
| Rái cá | 0,9,05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | các cửa sổ | |
| Cá heo | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| trình duyệt UC | 10.5.0.575 | Android |
Động cơ đinh ba
Trident là một công cụ độc quyền được sử dụng bởi các phiên bản Internet Explorer 4.0 - 11.0. IE diễn giải SVG của chúng tôi một cách hoàn hảo. Hơn nữa, sự xuất hiện của bộ lọc tổng hợp phù hợp nhất với hình ảnh gốc. Chúng tôi cũng đã thử nghiệm IE 9, IE được sử dụng nhiều thứ hai (tính đến tháng 5 năm 2015) và thấy rằng phiên bản này có vấn đề với bộ lọc mờ và bộ lọc hỗn hợp gaussian.
Mặc dù điều này không phải là một điều ngạc nhiên, vì IE 9 ban đầu được phát hành trước khi bản dự thảo cuối cùng của tiêu chuẩn SVG 1.1 SE, trong đó các hiệu ứng bộ lọc được chính thức thêm vào.
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| I E | 11.0.9600.17843 | các cửa sổ |  |
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| I E | 9.0.8112.16421 | các cửa sổ |  |
Động cơ tắc kè
Gecko là một công cụ được phát triển bởi Mozilla Corporation và do đó được sử dụng trong trình duyệt web Firefox hoặc ứng dụng email Thunderbird. Nó cũng được sử dụng bởi các trình duyệt PaleMoon, Waterfox và nhiều nhánh khác của các phiên bản Firefox trước đó. Trong trường hợp của công cụ Gecko, kết quả không hoàn toàn giống nhau trên các nền tảng khác nhau.
Phiên bản Windows thể hiện một chút trục trặc trong việc hiển thị văn bản dọc theo đường dẫn; vấn đề tương tự đã được quan sát trong cả trình duyệt Firefox và PaleMoon. Cũng giống như Webkit, Gecko dường như gặp khó khăn với việc hiển thị chính xác bộ lọc Specular Lighting nguyên thủy.
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| Firefox | 38,0,5 | Linux |  |
| Firefox | 38,0,5 | Android | |
| Mặt trăng nhạt | 25,5 | Android |
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| Firefox | 38,0,5 | các cửa sổ |  |
| Mặt trăng nhạt | 25,5 | các cửa sổ |
Trình duyệt có vấn đề
Như có thể thấy ở trên, tất cả các phiên bản gần đây của công cụ / trình duyệt kết xuất chính đã vượt qua thử nghiệm của chúng tôi mà không gặp khó khăn đáng kể. Hãy xem những người không làm tốt.
Con trăn là một trình duyệt đa nền tảng được phát triển tại Trung Quốc. Theo 20 trình duyệt web thay thế của Fahad Khan cho Windows Maxthon sử dụng cả hai công cụ Trident và Webkit. Chúng tôi chưa nhận thấy bất kỳ vấn đề nào với kết xuất SVG trên Linux (v. 1.0.5.3) và Windows (v. 4.4.5.3000); tuy nhiên, trên thiết bị Android, không làm mờ gaussian cũng như các nguyên hàm bộ lọc khác.
Trình duyệt CM thực hiện nhanh trên thiết bị Samsung galaxy S3 thử nghiệm của chúng tôi, nhưng nó cũng không hỗ trợ bất kỳ hiệu ứng bộ lọc nào được mô tả bởi thông số kỹ thuật SVG 1.1 SE.
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| Con trăn | 4.4.6.2000 | Android |  |
| Trình duyệt CM | 5.1.94 | Android |
Konqueror là một trình duyệt mặc định cho KDE, một trong những môi trường máy tính để bàn Linux phổ biến nhất. Khả năng kết xuất tệp SVG trong Konqueror phụ thuộc vào công cụ kết xuất. Với WebKit được kích hoạt, SVG thử nghiệm của chúng tôi đã được hiển thị chính xác. Tuy nhiên, công cụ kết xuất mặc định của Konqueror, KHTML, dường như thiếu sự hỗ trợ của một số tính năng: hiệu ứng bộ lọc không được áp dụng cho đối tượng cơ bản và các dấu kết thúc đột quỵ và văn bản dọc theo đường dẫn hoặc các đối tượng mẫu.
| Trình duyệt | Phiên bản | Nền tảng | Kết quả |
| Konqueror KHTML | 15.04.2 | Linux |  |
Phần kết luận
Trong thử nghiệm của chúng tôi, chúng tôi tập trung vào sự hỗ trợ của định dạng SVG trên các công cụ kết xuất web hiện đại. Chúng tôi đã thử nghiệm 4 công cụ kết xuất chính và 15 trình duyệt khác nhau, bao gồm cả các trình duyệt phổ biến như Maxthon hoặc Dolphin. Hầu như tất cả các phiên bản hiện tại của trình duyệt đã vượt qua thử nghiệm của chúng tôi và thật khó để chọn một người chiến thắng dứt khoát.
Có vẻ như ủng hộ và xếp chồng chính xác của bộ lọc là thách thức cuối cùng còn lại cho các công cụ kết xuất ngày nay. Khi chúng tôi so sánh ảnh SVG ban đầu của chúng tôi với tất cả các kết quả được hiển thị, chúng tôi chủ quan chỉ định IE 11 (Công cụ Trident) cho vị trí đầu tiên.
Tuy nhiên, rõ ràng là công cụ Blink đang theo đuổi chặt chẽ và do đó chúng tôi khuyên dùng các trình duyệt dựa trên Blink để hiển thị các tệp SVG. Nếu bạn muốn thực hiện kiểm tra nhanh trình duyệt yêu thích của riêng mình, vui lòng sử dụng trang kiểm tra trình kết xuất SVG của chúng tôi tại đây.
Ghi chú của biên tập viên: Bài viết này được viết cho Hongkiat.com bởi Michal Rost. Michal làm việc như một lập trình viên trong một công ty y sinh nhưng dành thời gian rảnh của mình để phát triển các ứng dụng nguồn mở và các cổng web phi lợi nhuận. Ông là người sáng lập của scalablegfx. Bạn có thể tìm thấy anh ấy trên Twitter.
