Skalierbare Vektorgrafiken (SVG) in nicht unterstütztem Browser hinzufügen
In einem früheren Beitrag dieser Serie haben wir etwas über SVGs Fallstricke bei alten Browsern und die Verwendung von Raphael.js als alternative Lösung für die Grafik erwähnt. In diesem Beitrag werden wir diese Angelegenheit näher betrachten.
Die Idee ist einfach: Wir werden immer noch SVG-Elemente als primäre Möglichkeit zur Bereitstellung von Grafiken auf unserer Webseite verwenden, aber gleichzeitig werden wir auch eine Fallback-Funktion bereitstellen damit es auch in nicht unterstützten Browsern gerendert werden kann.
Sicher, es gibt viele Wege, die wir gehen können, aber wir werden uns nur mit zwei Lösungen befassen, von denen ich denke, dass sie eine bessere generische Lösung sind. Mal sehen, wie wir das schaffen können.
Objektelement verwenden
Neben der direkten Einfügung in ein HTML-Dokument gibt es mehrere Möglichkeiten, SVG einzubetten. Zum Beispiel, wenn wir die Grafik in speichern .svg Datei können wir die Element.
Zu Demonstrationszwecken haben wir unserer Website ein Apple-Logo mit SVG hinzugefügt. Die nicht unterstützten Browser bleiben jedoch leer. Um das Problem zu lösen, können wir eine Bitmap-Grafik wie folgt bereitstellen:
Auf diese Weise übernehmen unterstützte Browser weiterhin die .svg, während Die nicht unterstützten Browser tragen die Bitmap-Grafik. Wir haben das hinzugefügt “png” Markieren Sie unter dem Apple-Logo, um zu sehen, welche Grafik geliefert wird.
Wie wir jedoch in dem anderen Beitrag erwähnt haben, Bitmap-Grafiken sind nicht so flexibel und skalierbar wie SVG. Schauen wir uns also eine andere Lösung an.
Verwendung von Modernizr
Eine andere Methode, die wir verwenden können, ist die Verwendung von Modernizr. Für diejenigen von Ihnen, die mit dieser JavaScript-Bibliothek nicht vertraut sind, machen Sie sich keine Sorgen, wir werden einen speziellen Beitrag dazu haben. Für jetzt bleiben Sie einfach mit uns.
Lassen Sie uns zunächst einige erforderliche JavaScript-Bibliotheken vorbereiten, Modernizr.js und Raphael.js. Dann müssen wir auch unsere konvertieren .svg Datei mit dem Tool ReadySetRaphael.js in ein von Raphael unterstütztes Format, und speichern Sie die Ausgabe in einem separaten Format .js Datei; lass es uns nennen svg.js.
Fügen Sie die Modernzr.js wie folgt in das HTML-Dokument ein:
Und für die anderen beiden Dateien, raphael.js und svg.js, wir werden es bedingt laden, nur wenn es in nicht unterstützten Browsern angezeigt wird.
Mit Modernizr können wir die Browserfunktion erkennen. In diesem Fall werden wir feststellen, ob der Browser SVG-Rendering ausführen kann. Ist dies nicht der Fall, wird das Skript bereitgestellt:
if (! Modernizr.inlinesvg) document.write (''
