• Haupt / Computing

20 Beispiele für SVG, die Ihnen den Kiefer fallen lassen

SVG (oder Scalable Vector Graphics) ist ein XML-basiertes Dateiformat, mit dem Entwickler und Designer hochwertige, dynamische Grafiken und grafische Anwendungen mit hoher Präzision erstellen können.
Alle modernen Browser unterstützen das Rendern von SVG. Bei älteren Browsern wie IE6, 7 und 8 ohne native Unterstützung können Sie jedoch auf Polyfills wie z SVG Web die Flash zum Rendern von Inhalten verwenden. Auf diese Weise können Sie die Mehrheit der Benutzer problemlos online ansprechen, ohne sich um Kompatibilitätsprobleme sorgen zu müssen.

Für mobile Webentwickler, die sich über Kompatibilität wundern, freue ich mich, Ihnen mitteilen zu können, dass iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ und Android 3+ auch das sofortige Rendern von SVG-Grafiken unterstützen. Da es einige Ähnlichkeiten zwischen dem Angebot des Elements und SVG gibt, fragen sich Entwickler häufig, welche davon sie verwenden sollten. Die Antwort auf dieses Anliegen ist eigentlich beides.

Canvas bietet eine leistungsstarke Leinwand, die sich am besten zum Rendern von Rastergrafiken für Spiele wie Sprites, Bildbearbeitung und Anwendungen eignet, für die Manipulationsfunktionen pro Pixel erforderlich sind. Leider nimmt die Leistung von Canvas-Apps mit zunehmender Auflösung ab und wird für die Verwendung in Vollbild-Benutzeroberflächen nicht empfohlen.

SVG ist auflösungsunabhängig und eignet sich daher ideal zum Rendern plattformübergreifender Komponenten, Animationen und Anwendungen der Benutzeroberfläche, bei denen auf jedes Element über das DOM zugegriffen werden muss. Laut kann es langsamer werden, wenn die Komplexität zunimmt, funktioniert aber dennoch sehr gut, um hochgradig interaktive Benutzererlebnisse zu erstellen.

Wir werden uns 20 hervorragende Beispiele für die Verwendung von SVG in freier Wildbahn ansehen. Starten Sie also einen modernen Browser und sehen Sie sich die folgenden Demos an.

• Lesen Sie alle unsere Webdesign-Artikel Hier

01. Synchronisierte Animation und Audio

Ein wichtiger Grund, warum Designer und Entwickler sich anfangs für Flash entschieden haben, war die einfache Erstellung beeindruckender, animierter Benutzererlebnisse mit einer respektablen Bildrate.

Nachdem wir nun verstanden haben, wie leistungsfähig vektorbasierte Erlebnisse im Browser sein können, wenn sie mit anderen Multimedia-Inhalten (wie dem Audio-Tag) kombiniert werden, können wir damit beginnen, Dinge wie z diese Demo von Vincent Hardy : Eine synchronisierte Audio- und Grafikanimation, die SVG, JavaScript und eine simulierte 'Kamera' kombiniert. Ein großartiges Beispiel für SVG in Aktion - nicht schlecht für etwas, für das keine Plug-Ins von Drittanbietern erforderlich sind!

02. In SVG neu erstellte animierte Weltmarken

Einer der wahren Tests zum Vergleich bestehender Ansätze zur Erreichung einer Aufgabe mit neuen ist die Bewertung, wie weit Sie gehen können, um ein Beispiel für das zu replizieren, was bereits da draußen ist.

Genau das tat Marek Raida, als er ein Flash-Banner mit mehreren Wahrzeichen der Welt in der Ecke einer Seite animieren sah und beschloss, es in SVG neu zu erstellen. Das Ergebnis seiner Bemühungen ist eine leichte Demo, die mit einer Dateigröße von 33 Prozent kleiner als die Flash-Alternative ist. Dieses Beispiel von SVG sieht viel besser aus und ist auch nicht so schwer, sich selbst zu codieren!

03. SVG-Filter für HTML5-Videos

Während SVG im Bereich der Vektorgrafiken viel Leistung bietet, hat es auch außerhalb eine Reihe kreativer Verwendungsmöglichkeiten. Im diese Demo Paul Irish (vom Google Chrome Dev Relations-Team) zeigt, wie Sie SVG und CSS kombinieren können, um einige ziemlich spektakuläre visuelle Filter für Videoinhalte zu erstellen. Der Unschärfeeffekt ist möglicherweise der interessanteste, aber auch andere Effekte wie das Umkehren des Frame-Inhalts sind interessante Proofs of Concept.

04. Hinzufügen einer dritten Dimension zu SVG-Grafiken

Wenn das Thema des Renderns von Grafiken im Browser behandelt wird, kann es nicht vermieden werden, über die verfügbaren 2D- und 3D-Funktionen zu sprechen. Die Auswirkungen auf Online-Spiele, die sich daraus ergeben, sind ausreichend, um viele Designer und Entwickler dazu zu bringen, aufmerksam zu werden. Wie kann SVG uns dabei helfen?

Nun, in dieses nächste Beispiel von SVG Von Nicolas Debeissat wird eine Technik vorgestellt, mit der glaubwürdige 3D-Perspektiven auf Objekte mithilfe einiger JavaScript-Tricks und SVG-Vektoren simuliert werden können. Schauen Sie sich unbedingt das Dropdown-Menü auf der Seite an, da es zahlreiche Beispiele gibt, die Ihren 3D-Appetit anregen.

05. Rendern von Vektorgrafiken in SVG vs Flash

Hier ist eine interessante Beispiel für SVG von Brad Neuberg und SVG Web : Eine JavaScript-Bibliothek, die die SVG-Unterstützung für Browser, die sie noch nicht vollständig unterstützen, mehrfach ausfüllt. Mit der Bibliothek (einschließlich nativer SVG-Unterstützung) können Sie sofort auf fast 95 Prozent der vorhandenen installierten Webbasis zugreifen. Dies ist ziemlich beachtlich, wenn Sie SVG in der Produktion verwenden möchten.

Das Tolle an diesem Beispiel ist, dass Sie damit vergleichen können, wie Vektorgrafiken beim Rendern mit SVG im Gegensatz zu Flash aussehen können. Dies kann jedoch zur Laufzeit leicht umgeschaltet werden, je nachdem, wie viel Unterstützung Ihr Browser dafür bietet. Auf jeden Fall ein Muss für Entwickler, die die Rendering-Funktionen von SVG weiter erforschen möchten.

06. Ein interaktives SVG-Puzzle

Als Flash zum ersten Mal herauskam, waren einige der ersten Beispiele, die wir in freier Wildbahn sahen, grundlegende Rätsel und Spiele. Nachfolgend hier ein Beispiel für ein SVG-Puzzle basierend auf Flickr, erstellt von @h__r__j . Sie erhalten eine Auswahl an Bildern und können aus den ausgewählten Bildern ein Puzzle erstellen. Schwierig zu vervollständigen, aber lustig und trotzdem ein interessanter Code dahinter!

07. SVG-UI-Komponenten: Eine HTML5-Untertitelleiste

Wie in der Einleitung erwähnt, sind kreative vektorbasierte Benutzeroberflächen ein Bereich, in dem Flash in der Vergangenheit stark genutzt wurde und in dem sich SVG ebenfalls auszeichnet. Da Bildschirme und Bildschirmauflösungen ständig größer werden, müssen Entwickler in der Lage sein, hochwertige UI-Komponenten bereitzustellen, ohne dass Qualitätsprobleme bei einer höheren oder niedrigeren Auflösung auftreten müssen. Hier ist SVG besonders nützlich.

In diesem großartigen Beispiel von SVG An einen HTML5-Videoplayer ist eine interaktive Untertitelleiste angehängt, mit der Sie problemlos nahtlos zwischen Untertitelsprachen wechseln können.

08. Anwenden von SVG-Masken auf HTML5-Videos

Ich erinnere mich, dass ich vor einigen Jahren an einem Projekt gearbeitet habe, bei dem wir eine Maske um eingebettetes Flash-Video anwenden mussten. Es schien also, dass das Video direkt in einem textförmigen Block abgespielt wurde. Siehe da, ein sehr ähnlicher Effekt ist jetzt mit einer Kombination aus Inline-SVG, HTML5-Video und etwas CSS möglich.

Dieses Beispiel von SVG , erstellt vom Webentwickler Mike Thomas funktioniert derzeit nur in Firefox 4 und höher, ist jedoch ein inspirierendes Beispiel für einige der wirklich kreativen Dinge, die wir in Zukunft entwickeln können, wenn zwischen den verschiedenen Browser-Anbietern ein höheres Maß an Normalisierung besteht.

09. Pfadverfolgungskartenrouten mit SVG und Raphael

Hier ist ein interessantes praktisches Beispiel von SVG und wie es Ihrer Benutzererfahrung zugute kommen kann. Karten sind etwas, das wir alle online verwenden, aber wäre es nicht noch besser, wenn wir den Pfad entlang der Routen einfach zeichnen und animieren könnten, um diese Reisen ein wenig klarer zu gestalten? In dieser Demo auf A List Apart, Brian Suda Mit Hilfe von SVG über Raphael können Sie Karten benutzerdefinierte animierte Routen hinzufügen.

10. Trajan-Spalten mit SVG dekonstruieren

Unterhaltsame Tatsache: Trajans Säule ist eine römische Säule in Italien, die an den Sieg des römischen Kaisers Trajan in den Dakischen Kriegen erinnert. Auf der Innenseite der Säulen befindet sich eine Wendeltreppe, die jemand mit SVG vollständig in Pseudo-3D modellieren wollte.

Der beste Teil von dieses Beispiel von SVG ist, dass es vollständig interaktiv ist, sodass Sie einen Abschnitt der Grafik auswählen können, der herausgezogen werden soll. Diese animierte Dekonstruktion der Architektur ist wahrscheinlich eine der unterhaltsamsten Anwendungen von SVG, die ich bisher gesehen habe, und ich empfehle auf jeden Fall, sie auszuprobieren.

11. Animierte Rube Goldberg-Maschine in SVG

Wahrscheinlich haben Sie irgendwann in Ihrem Leben eine Rube Goldberg-Maschine (RGM) in Aktion gesehen, ohne es zu wissen, möglicherweise in einem Cartoon oder in einer Wissenschaftsshow. RGMs sind
absichtlich überentwickelte Maschinen, die einfache Aufgaben auf sehr komplexe Weise ausführen, normalerweise einschließlich einer Kettenreaktion.

Im Folgenden Beispiel Bei SVG kann man sehen, wie ein Papierflugzeug über einen Ball fliegt, der eine weitere Kettenreaktion auslöst, Dominosteine ​​und schließlich eine Lampe, die aufleuchtet. Ich sagte, es sei überentwickelt, oder?!

12. Interaktive Postkarte von Irland in SVG

Der SVG-Fan und rundum großartige Entwickler Marek Raida hat die Path-Tracing-Demo erweitert und beschlossen, seine Reise nach Irland hier zu dokumentieren interaktive SVG-Postkarte Dies zeigt sowohl die Routenverfolgung als auch die großflächige Animation und andere Effekte wie Rotation.

13. Interaktive SVG-Karte zu Kriminalität und Armut

Es ist nicht immer einfach, große Datenmengen so zu visualisieren, dass sie von jedem Mann oder jeder Frau auf der Straße verstanden werden können. Anstatt zu versuchen, einen gesamten Datensatz zu erklären, kann es oft viel einfacher sein, mehrere Ansichten der Daten anzubieten, damit Benutzer den Kontext wechseln können, um einen Drilldown zu einer Teilmenge eines größeren Satzes durchzuführen, den sie anzeigen möchten.

Im dieses Beispiel von SVG werden die US-Kriminalitäts- und Armutszahlen auf Bundesstaatsebene auf einer Karte der USA dargestellt. Sie haben jedoch auch eine Reihe von Möglichkeiten, Ihre Ansichten der Karte zu ändern, einschließlich Zoomen, Auswahl und Bewegung. Wenn Sie daran interessiert sind, mit Ihren eigenen Karten in SVG zu beginnen, hat Dasha Salo eine Lernprogramm das zeigt, wie einfach dies mit Raphael erreicht werden kann.

14. Animierte Texte in SVG

Ein weiteres großartiges Beispiel für SVG aus der Kategorie 'Ich kann nicht glauben, dass das nicht Flash ist' ist diese Demo von Vincent Hardy, wo er SVG, Web-Schriftarten und das Audio-Tag kombiniert, um eine visuell ansprechende Animation von Texten zu erstellen, die mit einem Musiktitel synchronisiert ist. Schauen Sie sich auch das andere Beispiel an, das für a aufgeführt ist Ghandi Zitat Demo !

15. Analytik mit Raphael und SVG

Falls Sie es noch nicht verwendet haben, ist Raphaël eine JavaScript-Bibliothek, die das Arbeiten mit Vektorgrafiken im Web vereinfacht. Die Website unterstützt die meisten Browser ab IE6 + und bietet einige hervorragende Beispiele für die Verwendung von SVG, um beeindruckende Visualisierungen von Daten zu erstellen.

Mein persönlicher Favorit ist der Analytics-Demo Auf diese Weise können Sie sehen, wie einfach SVG Flash in großen Site-Tracking-Anwendungen ersetzen kann. Wenn Sie an einer Version von Raphael interessiert sind, die sich mehr auf Grafiken konzentriert, sollten Sie sich auch diese ansehen gRaphaël .

16. Visuelle Darstellung von Twitter-Verbindungen

Twings ist ein Tool, mit dem Sie Ihre Twitter-Follower anhand verschiedener Faktoren in Ringen visualisieren können. Es ist nicht nur ein gutes Beispiel für SVG, sondern auch ein interessantes Beispiel für das Segmentieren von Anforderungen an die Twitter-API, wenn Sie Informationen pro Follower erhalten müssen, die über die Grenzen hinausgehen, die die API normalerweise pro Anforderung zurückgeben kann (100). Vergessen Sie nicht, auf die Hauptwebsite zu gehen, auf der Ivan Lazarevic erklärt, wie er Twings erstellt hat, mit ein paar zusätzlichen Tipps zum Tool!

17. Blobular

Blobular ist ein lustiges Beispiel für SVG von Cameron Adams, auch bekannt als The Man In Blue, mit dem Sie die Farbe, Viskosität und Größe von Blobs ändern können! Sie können damit experimentieren, die Kanten eines Blobs auf bestimmte Grenzen auszudehnen. Sobald ein Schwellenwert überschritten wird, kann ein Blog tatsächlich andere Blobs erzeugen. Sie werden dies wahrscheinlich nicht verwenden, um das nächste Google+ zu erstellen, aber es ist immer noch eine interessante Implementierung.

18. Der gruselige Mund in SVG

Doug Schepers '' gruseliger Mund Das Experiment gibt uns einen Einblick in den menschlichen Mund in SVG. Kennen Sie den Unterschied zwischen Alveolar und Alveopalatal? Ich habe es auch nicht getan, aber dies ist ein perfektes Beispiel für SVG, bei dem Vektorgrafiken mit Animationen kombiniert werden, um die Online-Bildung so zu verbessern, wie Flash in der Vergangenheit für wissenschaftliche und biologische Diagramme verwendet wurde.

19. Animierte SVG-Uhr

In dieser Demo haben wir ein Beispiel für das Rendern von SVG a sich drehende Digitaluhr . Ich fand den Effekt sehr interessant, da dies nicht nur ein gutes Beispiel für animierten Text ist, sondern auch, wie sich die Farbe der Rückseite jedes Zeichens basierend auf der Position in der animierten Rotation ändert.

20. Interaktives SVG auf dem iPad

Wie in der Einführung erwähnt, kann auf SVG-Grafiken über das DOM zugegriffen werden, sodass Ereignishandler wie bei anderen Elementen auf der Seite an sie angehängt werden können. In diesem Sinne schuf Gert-jan Van Der Wel eine einfache Demo Demonstration, wie Sie mit SVG-Grafiken auf dem iPad interagieren können. Wenn Sie mit der Bewegung von Objekten im Browser auf iOS-Geräten herumgespielt haben, wird Ihnen vieles bekannt vorkommen, aber es ist eine nützliche Demo für diejenigen, die noch keine Gelegenheit hatten, sich damit zu beschäftigen!

Mochte dies? Lese das!

• Wie man Erstelle eine App
• Frei Graffiti-Schriftart Auswahl
• Illustrator-Tutorials : tolle Ideen, die Sie heute ausprobieren sollten!
• Der ultimative Leitfaden für die Gestaltung der beste Logos
• Das beste kostenlos Web-Schriftarten für Designer
• Nützlich und inspirierend Flyer-Vorlagen
• Der beste 3D-Filme von 2013
• Entdecken Sie, was als nächstes kommt erweiterte Realität

Addy Osmani ist ein Benutzeroberflächendesigner und derzeit ein Softwareentwickler für AOL. Er ist außerdem Mitglied der Teams jQuery Bug Triage und API Docs. Seine wöchentlichen UI-Beiträge finden Sie unter AddyOsmani.com.

Welche Art von SVG-Anwendungen hat Sie am meisten beeindruckt? Welche hätten unsere Liste machen sollen? Lass es uns in den Kommentaren wissen!