Webブラウザエンジン間でのSVGサポートのテスト[ケーススタディ]
SVG（Scalable Vector Graphics）は、Internet Explorerを含むすべての主要Webブラウザで正式にサポートされています。このサポートは、SVGをネイティブフォーマットとして使用するInkscapeなど、多種多様な画像編集ソフトウェアにまで及びます（SVGをさらにリフレッシュしたい場合は、ここをクリックしてください）。.
しかし、Webブラウザでは正確に何がサポートされていますか？すべてのレンダリングエンジンはSVGファイルとその機能を同じように表示しますか？そして、フィルタのような彼らの高度な機能はどうですか？まあそれが私達が見つけようとしているものです。それほど悪名の低いものも含めて、最新のブラウザのサンプルを取りました。 この目的のために作られたSVGファイルでそれらをテストしました.
テスト画像
私たちは、アーティストが最も使用する可能性が高い要素に焦点を絞って、テスト用画像を作成しました。テストされた機能には、テキストパスとその相互作用、グラデーション、ガウスぼかしフィルタ、そして最後に、より多くの種類のフィルタから積み重ねられた高度な合成フィルタがあります。.
Webブラウザエンジン
点滅エンジン
私達は - はるかに最も頻繁なレンダリングエンジン - Blinkから始めました。 Blinkは、GoogleのChromeおよびChromiumブラウザ、Opera、Android WebViewのネイティブエンジンです。上記のブラウザはすべて、テスト対象のプラットフォーム間でテストイメージを同じ方法でレンダリングします。.
Inkscapeによって作成された元の画像と比較すると、積み重ねられたフィルタ効果のレンダリングにわずかな違いがあることを除いて問題はありませんでした。.
| ブラウザ | バージョン | プラットフォーム | 結果 |
| クロム | 43.0.2357.125 | Linux |  |
| オペラ | 30.0.1835.59 | Linux | |
| オペラ | 30.0.1856.93524 | アンドロイド | |
| オペラ | 30.0.1835.88 | Windows | |
| クロム | 38.0.2125.114 | アンドロイド | |
| クロム | 43.0.2357.130 | Windows | |
| トーチ | 39.0.0.9626 | Windows |
Webkitエンジン
最近のブラウザ使用統計によると、上位3位はWebkitベースのブラウザに属していません（2015年5月現在）。ただし、このエンジンは開発者の間で広く普及しています。さらに、さまざまな実装とフォークがあります。
テストされたブラウザはすべて問題なくSVGファイルをレンダリングしました。それにもかかわらず、Inkscapeと比較して、複合フィルタコンポーネントであるスペキュラライティングのレンダリングに違いが見られました。.
| ブラウザ | バージョン | プラットフォーム | 結果 |
| サファリ | 8.0.6 | マックOS |  |
| カワウソ | 0.9.05 | Linux | |
| クプジラ | 1.8.6 | Linux | |
| クプジラ | 1.8.6 | Windows | |
| イルカ | 10.3.1 | アンドロイド | |
| Konqueror | 15.04.2 | Linux | |
| UCブラウザ | 10.5.0.575 | アンドロイド |
トライデントエンジン
トライデントは、Internet Explorerバージョン4.0 - 11.0で使用される独自のエンジンです。 IEは私達のSVGを完璧に解釈しましたさらに、合成フィルタの外観は元の画像と最もよく一致します。また、2015年5月現在で2番目に多く使用されているIE 9もテストしましたが、このバージョンではガウスぼかしと合成フィルタに問題があることがわかりました。.
ただし、IE 9はSVG 1.1 SE規格の最終ドラフトの前に最初にリリースされ、フィルタ効果が正式に追加されたため、これは驚くことではありません。.
| ブラウザ | バージョン | プラットフォーム | 結果 |
| IE | 11.0.9600.17843 | Windows |  |
| ブラウザ | バージョン | プラットフォーム | 結果 |
| IE | 9.0.8112.16421 | Windows |  |
ヤモリエンジン
Geckoは、Mozilla Corporationによって開発されたエンジンであり、Firefox WebブラウザまたはThunderbird電子メールクライアントで使用されています。ブラウザのPaleMoon、Waterfox、その他のFirefox以前のバージョンの他の多くのフォークでも使用されています。 Geckoエンジンの場合、異なるプラットフォーム間で結果はまったく同じではありませんでした.
Windows版は、パスに沿ってテキストをレンダリングする際に多少の不具合を示しました。 FirefoxとPaleMoonの両方のブラウザで同じ問題が見られました。 Webkitと同じように、GeckoはSpecular Lightingフィルタプリミティブを正しくレンダリングするのに問題があるようです。.
| ブラウザ | バージョン | プラットフォーム | 結果 |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | アンドロイド | |
| ペールムーン | 25.5 | アンドロイド |
| ブラウザ | バージョン | プラットフォーム | 結果 |
| Firefox | 38.0.5 | Windows |  |
| ペールムーン | 25.5 | Windows |
問題のあるブラウザ
上で見られるように、主要なレンダリングエンジン/ブラウザのすべての最近のバージョンは重大な困難なしで私達のテストに合格しました。うまくいかなかったものをチェックしましょう。.
マクソン 中国で開発されたクロスプラットフォームのブラウザです。 Fahad Khanによると、Windows用の20の代替WebブラウザMaxthonは、TridentとWebkitの両方のエンジンを使用しています。私たちはLinux（v。1.0.5.3）とWindows（v。4.4.5.3000）でのSVGレンダリングに関する問題に気づいていません。ただし、Androidデバイスでは、ガウスぼかしも他のフィルタプリミティブもレンダリングされませんでした.
CMブラウザ テスト中のSamsung galaxy S3デバイスでは高速パフォーマンスを達成しましたが、SVG 1.1 SE仕様で説明されているフィルタ効果もサポートしていません.
| ブラウザ | バージョン | プラットフォーム | 結果 |
| マクソン | 4.4.6.2000 | アンドロイド |  |
| CMブラウザ | 5.1.94 | アンドロイド |
Konqueror 最も人気のあるLinuxデスクトップ環境の1つであるKDEのデフォルトブラウザです。 KonquerorでSVGファイルをレンダリングする機能は、レンダリングエンジンによって異なります。 WebKitでテストを有効にしたことでSVGは正しくレンダリングされました。ただし、KonquerorのデフォルトのレンダリングエンジンであるKHTMLは、いくつかの機能をサポートしていないようです。フィルタ効果は、基になるオブジェクトやストロークエンドマーカーには適用されず、パスまたはパターンオブジェクトに沿ったテキストはまったくレンダリングされません。.
| ブラウザ | バージョン | プラットフォーム | 結果 |
| Konqueror KHTML | 15.04.2 | Linux |  |
結論
私たちのテストでは、最近のWebレンダリングエンジンでのSVGフォーマットのサポートに焦点を当てました。私たちは4つの主要なレンダリングエンジンとMaxthonやDolphinのような人気のあるものを含む15の異なるブラウザをテストしました。現在のほとんどすべてのバージョンのブラウザはテストに合格しており、最終的な受賞者を選択するのは困難です。.
どうやら サポート そして フィルタープリミティブの正しいスタッキング 現在のレンダリングエンジンにとって最後の課題です。元のSVG画像をレンダリングされたすべての結果と比較すると、主観的にIE 11（トライデントエンジン）が推薦されます。.
ただし、Blinkエンジンは綿密に追求されていることは明らかであるため、SVGファイルのレンダリングにはBlinkベースのブラウザをお勧めします。自分の好きなブラウザを素早くテストしたい場合は、こちらのSVGレンダラテストページを使用してください。.
編集者注： この記事は、Micki RostによってHongkiat.comに作成されました。 Michalは、生物医学会社でプログラマーとして働いていますが、彼の自由時間をオープンソースアプリケーションと非営利のWebポータルの開発に費やしています。彼はscalablegfxの創設者です。あなたはTwitterで彼を見つけることができます.
