Testen der SVG-Unterstützung über Webbrowser-Engines [Fallstudie]
SVG (Scalable Vector Graphics) wird offiziell von allen gängigen Webbrowsern einschließlich Internet Explorer unterstützt. Die Unterstützung umfasst eine Vielzahl von Bildbearbeitungsprogrammen, insbesondere Inkscape, das SVG als systemeigenes Format verwendet. (Wenn Sie eine Auffrischung von SVG wünschen, klicken Sie hier.).
Was genau wird von Webbrowsern unterstützt? Zeigen alle Rendering-Engines SVG-Dateien und ihre Funktionen auf dieselbe Weise an? Und was ist mit ihren erweiterten Funktionen wie Filtern? Nun, das werden wir herausfinden. Wir haben eine Auswahl an modernen Browsern gemacht, darunter auch einige weniger bekannte testete sie mit einer SVG-Datei, die für diesen Zweck erstellt wurde.
Das Testbild
Wir haben unser Testbild vorbereitet und uns auf Elemente konzentriert, die Künstler am häufigsten verwenden. Zu den getesteten Funktionen gehören: Textpfade und ihre Interaktionen, Farbverläufe, Gaußscher Unschärfefilter und schließlich ein erweiterter Verbundfilter, der aus mehreren Filtertypen aufgebaut ist.
Webbrowser-Engines
Motor blinken
Wir haben mit - der bei weitem häufigsten Rendering-Engine - Blink angefangen. Blink ist die native Engine für Google Chrome und Chromium Browser, Opera und Android WebView. Alle oben genannten Browser geben Testbilder auf den getesteten Plattformen auf die gleiche Weise wieder.
Verglichen mit dem von Inkscape erstellten Originalbild gab es keine Probleme außer einem geringfügigen Unterschied bei der Wiedergabe gestapelter Filtereffekte.
| Browser | Ausführung | Plattform | Ergebnis |
| Chrom | 43.0.2357.125 | Linux |  |
| Oper | 30.0.1835.59 | Linux | |
| Oper | 30.0.1856.93524 | Android | |
| Oper | 30.0.1835.88 | Windows | |
| Chrom | 38.0.2125.114 | Android | |
| Chrom | 43.0.2357.130 | Windows | |
| Fackel | 39.0.0.9626 | Windows |
Webkit-Engine
Laut den aktuellen Browserverwendungsstatistiken gehören die ersten drei Positionen nicht zu Webkit-basierten Browsern (Stand Mai 2015). Diese Engine ist jedoch bei Entwicklern weit verbreitet. Darüber hinaus gibt es verschiedene Implementierungen und Gabeln
Alle getesteten Browser haben unsere SVG-Datei ohne Probleme gerendert. Dennoch wurden im Vergleich zu Inkscape Unterschiede in der Wiedergabe von Specular Lighting, einer Composite-Filterkomponente, beobachtet.
| Browser | Ausführung | Plattform | Ergebnis |
| Safari | 8.0.6 | Mac OS |  |
| Otter | 0,9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Delphin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC-Browser | 10.5.0.575 | Android |
Dreizack-Motor
Trident ist eine proprietäre Engine, die von Internet Explorer 4.0 - 11.0 verwendet wird. IE hat unser SVG perfekt interpretiert. Darüber hinaus passt das Erscheinungsbild des zusammengesetzten Filters am besten zum Originalbild. Wir haben auch IE 9 getestet, den am zweithäufigsten verwendeten IE (Stand Mai 2015) und festgestellt, dass diese Version Probleme mit Gaußscher Unschärfe und Verbundfilter hatte.
Dies ist jedoch keine Überraschung, da IE 9 ursprünglich vor dem endgültigen Entwurf des Standards SVG 1.1 SE veröffentlicht wurde, in dem Filtereffekte offiziell hinzugefügt wurden.
| Browser | Ausführung | Plattform | Ergebnis |
| IE | 11.0.9600.17843 | Windows |  |
| Browser | Ausführung | Plattform | Ergebnis |
| IE | 9.0.8112.16421 | Windows |  |
Gecko-Motor
Gecko ist eine von der Mozilla Corporation entwickelte Engine und wird daher im Firefox-Webbrowser oder im E-Mail-Client von Thunderbird verwendet. Es wird auch von den Browsern PaleMoon, Waterfox und vielen anderen Gabeln früherer Firefox-Versionen verwendet. Im Fall der Gecko-Engine waren die Ergebnisse auf verschiedenen Plattformen nicht exakt gleich.
Die Windows-Version zeigte einen kleinen Fehler beim Rendern des Textes entlang des Pfads. Das gleiche Problem wurde in Firefox- und PaleMoon-Browsern beobachtet. Genau wie bei Webkit scheint Gecko Probleme mit der korrekten Wiedergabe des Specular Lighting-Filterelements zu haben.
| Browser | Ausführung | Plattform | Ergebnis |
| Feuerfuchs | 38.0.5 | Linux |  |
| Feuerfuchs | 38.0.5 | Android | |
| Blasser Mond | 25,5 | Android |
| Browser | Ausführung | Plattform | Ergebnis |
| Feuerfuchs | 38.0.5 | Windows |  |
| Blasser Mond | 25,5 | Windows |
Problematische Browser
Wie oben zu sehen ist, haben alle neueren Versionen der wichtigsten Rendering-Engines / Browser unseren Test ohne nennenswerte Schwierigkeiten bestanden. Schauen wir uns mal die an, die nicht so gut abschneiden.
Maxthon ist ein plattformübergreifender Browser, der in China entwickelt wurde. Laut Fahad Khans 20 alternativen Webbrowsern für Windows verwendet Maxthon sowohl Trident- als auch Webkit-Engines. Beim SVG-Rendering unter Linux (Version 1.0.5.3) und Windows (Version 4.4.5.3000) ist kein Problem aufgetreten. Auf einem Android-Gerät wurden jedoch weder Gaußsche Unschärfe noch andere Filterprimitive gerendert.
CM-Browser Bei unserem Testgerät Samsung Galaxy S3 schnell durchgeführt, unterstützt es jedoch keine der von SVG 1.1 SE-Spezifikation beschriebenen Filtereffekte.
| Browser | Ausführung | Plattform | Ergebnis |
| Maxthon | 4.4.6.2000 | Android |  |
| CM-Browser | 5.1.94 | Android |
Konqueror ist ein Standardbrowser für KDE, eine der beliebtesten Linux-Desktop-Umgebungen. Die Möglichkeit, SVG-Dateien in Konqueror zu rendern, hängt von der Rendering-Engine ab. Mit aktiviertem WebKit wurde unser Test-SVG korrekt gerendert. Die Standard-Rendering-Engine KHTML von Konqueror scheint jedoch nicht die Unterstützung mehrerer Funktionen zu bieten: Filtereffekte werden nicht auf darunter liegende Objekt- und Strich-Endmarken angewendet und Text entlang von Pfad- oder Musterobjekten wird überhaupt nicht gerendert.
| Browser | Ausführung | Plattform | Ergebnis |
| Konqueror KHTML | 15.04.2 | Linux |  |
Fazit
In unserem Test konzentrierten wir uns auf die Unterstützung des SVG-Formats durch moderne Web-Rendering-Engines. Wir haben 4 Haupt-Rendering-Engines und 15 verschiedene Browser getestet, darunter auch beliebte wie Maxthon oder Dolphin. Fast alle aktuellen Browser-Versionen haben unseren Test bestanden und es ist schwierig, einen endgültigen Gewinner auszuwählen.
Anscheinend Unterstützung und korrektes Stapeln von Filterprimitiven ist die letzte Herausforderung für die heutigen Rendering Engines. Wenn wir unser Original-SVG-Bild mit allen gerenderten Ergebnissen vergleichen, nominieren wir subjektiv den IE 11 (Trident-Motor) für den ersten Platz.
Es ist jedoch klar, dass sich die Blink-Engine eng befindet. Daher empfehlen wir Blink-basierte Browser zum Rendern von SVG-Dateien. Wenn Sie einen schnellen Test Ihres bevorzugten Browsers durchführen möchten, können Sie hier unsere SVG-Renderer-Testseite verwenden.
Anmerkung des Herausgebers: Dieser Beitrag wurde für Hongkiat.com von Michal Rost geschrieben. Michal arbeitet als Programmierer in einem biomedizinischen Unternehmen, widmet sich aber seiner Freizeit der Entwicklung von Open-Source-Apps und Non-Profit-Webportalen. Er ist der Gründer von scalablegfx. Sie finden ihn auf Twitter.
