Warum verwenden Sie nicht SVG?

SVG oder Skalierbare Vektorgrafiken, ist eine Markup-gesteuerte Vektor-Grafik-Rendering-Engine im XML-Stil für den Browser. SVG wird in allen Browsern außer IE unterstützt < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?

Heute werden wir SVG untersuchen und erklären, warum die Frage "Welche sollte ich verwenden?" wird normalerweise mit "was versuche ich zu tun?" beantwortet. Um eine vollständige Liste der Elemente zu erhalten, aus denen SVG besteht, lesen Sie Mozillas Dokumente zu diesem Thema. Dort können Sie auch die SVG-DOM-API sehen.

Überblick

Wir werden zunächst einige einzigartige Vorteile von SVG aufzeigen. Anstatt alle 80 SVG-Knotentypen zu überprüfen, wird erläutert, wie Illustrator ein SVG-Dokument schnell in eine Webseite einbinden kann. Wir werden auch einen Blick auf D3.js werfen, eine mächtige JavaScript-Bibliothek zur SVG-Manipulation.

Msgstr "SVG soll nicht zur Pixelmanipulation verwendet werden."

Hauptvorteile von SVG

SVG hat für bestimmte Anwendungen einige Vorteile gegenüber Bildern oder auf Leinwand basierenden Renderings. SVG soll nicht zur Pixelmanipulation verwendet werden. Es kann jedoch sehr gut mit Vektorgrafiken und programmatischer Vektorbearbeitung umgehen.

Auflösung Unabhängigkeit

Falls Sie noch nichts gehört haben, ist die Unabhängigkeit von Auflösungen und Browser-Agnostizismus heutzutage ein heißes Thema in der Front-End-Entwicklung (denken Sie an "responsive design"). Die meisten Lösungen, die zur Behebung auflösungsbasierter Probleme (z. B. für Retina-Bildschirme) vorhanden sind, umfassen entweder eine große Menge unnötiger Daten (hochauflösendes Bildersetzung) oder Kompromisse für den einen oder den anderen Browser (sogar alle Auflösungen) Wenn der Bildschirm den Unterschied nicht anzeigt). Daher verlassen wir uns auf die Geschwindigkeit des Datenengpasses bei der Download-Geschwindigkeit, um Bilder mit höherer Auflösung auf Geräte zu übertragen, die sich häufig in drahtlosen Datennetzen befinden. Nicht ideal.

"SVG bietet eine Möglichkeit, grafische Elemente mit voller Auflösung zu erstellen, unabhängig von der Bildschirmgröße, der Zoomstufe oder der Auflösung, die das Gerät des Benutzers hat."

SVG bietet eine Möglichkeit, grafische Elemente mit voller Auflösung zu erstellen, unabhängig von der Bildschirmgröße, der Zoomstufe oder der Auflösung des Geräts Ihres Benutzers. Dies ist etwas, was wir bis SVG nur mit cleverem Element-Styling über CSS und Text-Rendering gesehen haben. Die Verwendung von divs und: after-Elementen zum Erstellen einfacher Formen und anderer Effekte ist mit SVG nicht erforderlich. Stattdessen können Sie Vektorformen aller Art erstellen.

Super-Accessible DOM-Knoten-basierte API

Also schreibst du HTML? JavaScript? CSS? Gut. Dann wissen Sie schon viel über das, was Sie wissen müssen, um SVG zu schreiben. SVG verwendet tatsächlich ein XML-kompatibles Format, um seine Rendering-Shapes zu definieren. Darüber hinaus können Sie tatsächlich Formen in CSS gestalten und mit JavaScript interaktiv gestalten. Es gibt mehrere JS-Bibliotheken, die Sie in dieser Welt unterstützen, wie D3.js und Raphael. Hier ist ein Beispiel einer SVG-Elementgruppe (das Envato-Blatt). Sie können dieses Beispiel auch auf JSFiddle anzeigen.

Auf die DOM-Knoten-basierte API von SVG kann bereits mehr zugegriffen werden als auf die clientseitige Nur-Canvas-API. Mit dieser Konstruktion können Sie:

• Erstellen Sie dokumentenseitige SVG-Images auf der Serverseite
• Überprüfen Sie SVG-Elemente wie jedes andere HTML-Element
• Programmieren Sie Formen, Stile und Positionen programmatisch mit einer Technologie, mit der Sie bereits vertraut sind (JavaScript und CSS).
• Hängen Sie Event-Handler an SVG-Knoten an

Die DOM-API bietet weitere klare Vorteile für die Verwendung von SVG.

Keine unnötigen HTTP-Anfragen

Wenn Sie Bilder in einem HTML-Dokument mit der Mit diesem Tag definieren Sie eine Datei, die der Browser des Benutzers verwenden wird anfordern. Diese Anforderung nimmt viel Bandbreite in Anspruch und erfordert mehr Zeit zum Herunterladen. Wenn Ihr Image stattdessen aus Dom-Knoten besteht, werden diese zusätzlichen HTTP-Anforderungen abgeschnitten, wodurch Ihre Website schneller und benutzerfreundlicher wird.

Einfache interaktive Skripterstellung

Trotz der Browser-Kriege bietet die DOM-API über alle Browser hinweg ein hohes Maß an Flexibilität in Bezug auf die Skript-Interaktivität, die sich auf SVG-Elemente erstreckt. Das Styling von SVG erfolgt über CSS. Da Browser-Ereignis-APIs für SVG-Elemente verfügbar sind, ist das Scripting von interaktivem Verhalten ein Kinderspiel. Fügen Sie einfach einen Handler an einen bestimmten Knoten des SVG-Elements an, und Sie sind festgelegt.

Dies gilt nicht für Elemente, die auf die Leinwand gezeichnet werden. Da es sich bei der Leinwand nur um eine Pixel-Rendering-Engine handelt, werden die gezeichneten Elemente nicht als Objekte im Speicher gehalten. Das Skript hat die Aufgabe, diese Elemente gesammelt zu halten und alle relevanten Positions- und Größeninformationen zu überwachen, um Ereignisse in einer Ereignisschleife zu suchen und auszulösen. Darüber hinaus müsste die Z-Indizierung auch vom Skript übernommen werden.

Schauen wir uns ein Beispiel an. Angenommen, Sie möchten den Mauszeiger über einem Kreis in der Leinwand erkennen. Hinweis: Wir sagen nur, dass die Leinwand die gesamte Breite des Browserfensters hat, und wir verwenden jQuery, um das Beispiel kurz zu halten.

var circleCenter = [200, 300], Radius = 50; $ (window) .on ("mousemove", Funktion (e) var mx = e.pageX, mein = e.pageY; if (mx> circleCenter [0] - radius && mx < circleCenter[0] + radius && my > circleCenter [1] - Radius && mein < circleCenter[1] + radius) // now we are hovering  );

Dies ist zwar nicht unbedingt ein schwieriges oder ungewöhnliches Codemuster, aber wenn Sie an die Browser-API gewöhnt sind, scheint es ein frustrierender Prozess zu sein, nur um nach Hover zu suchen. Dies ist ein sehr verbreitetes Muster in anderen untergeordneten Schnittstellen-Programmier-Engines wie Unity3D oder Processing. In der Web-Welt stehen uns jedoch Werkzeuge zur Verfügung, die bereits viele gemeinsame interaktive Ziele erfüllen, die wir möglicherweise haben. Sie könnten eine Reihe von Komfortfunktionen für allgemeine Aufgaben schreiben, aber würden Sie nicht lieber zum Punkt kommen? Im Gegensatz dazu können wir die Einfachheit der gleichen Aufgabe mit SVG erkennen.

$ ("svg path # circle"). on ("hover", function (event) // Das ist alles.);

Dies ist für Entwickler eindeutig viel zeiteffizienter und erstellt einfache Interaktivität.

Praktische Anwendungen

Es gibt eine Menge JavaScript-Bibliotheken für Canvas (wie KineticJS, mit denen Sie ziemlich tolle Sachen machen können. Aber wenn Sie wie ich sind, verwenden Sie in Ihren Webanwendungen keine vollständigen Physik-Engines. Stattdessen ich Meist brauche ich skalierbare Symbole, interaktive Grafiken und detaillierte, ästhetisch ansprechende Präsentationsmöglichkeiten für meine Benutzer. Die meisten der von mir benötigten Physiken sind einfache Beschleunigungsgleichungen. Diese grafischen Elemente lassen sich leicht mit SVG erstellen und eine Vielzahl einfacher Physik Gleichungen werden wahrscheinlich den Rest meiner Bedürfnisse abdecken. Schauen wir uns ein paar praktische Anwendungen für SVG an.

• Graph Da SVGs größte Stärke in Vektorformen besteht, eignet es sich natürlich sehr gut für Grafiken und Infografiken. Es eignet sich nicht nur für die Erstellung statischer Diagramme aus bestimmten Zahlen, sondern auch für "Live" -Diagramme, die von AJAX-Anforderungen, Benutzereingaben oder zufällig generierten Daten gespeist werden.
• Straßenkarte Straßenkarten bestehen aus harten Linien und exakten Formen. Diese Formen lassen sich gut mit Vektorgrafiken darstellen und eignen sich zum Vergrößern der Karte für weitere Details.
• Komplexe Elemente der Benutzeroberfläche Angenommen, Sie wollten ein UI-Element, das wie eine gestapelte Kreispyramide aussah. Wie würden Sie das in HTML und CSS machen? Nun, Sie würden zuerst eine Reihe von Divs für jedes Loch erstellen und ihnen jeweils einen bestimmten Randradius und Randstile zuweisen. Dann würden Sie sie innerhalb eines enthaltenden div positionieren. Was wäre, wenn Sie einen einzigen Farbverlauf über die ganze Sache haben wollten? Sie müssten wahrscheinlich Maskierung oder eine andere Technik verwenden. Sie möchten lieber keine Bilder verwenden, da diese nicht skalierbar sind und nicht programmgesteuert wiedergegeben oder geändert werden können. Warum sollte man das Element nicht in Illustrator zeichnen und als SVG-Datei speichern? Auf diese Weise können Sie ein einzelnes, skalierbares Element verwenden, ohne sich um die Verwaltung mehrerer Divs kümmern zu müssen.
• Logos Die meisten Logos sind vektorbasiert. Sie können ein SVG-Dokument als Ihr Logo definieren und überall ablegen. Sie können die Größe beliebig anpassen, ohne dabei die Qualität zu beeinträchtigen oder zu viel Bandbreite zu beanspruchen.
• Einfache Spiele Es ist kein Geheimnis, dass Canvas für das Rendern von Spielen gut geeignet ist. Ein Grund dafür ist, dass Spiele oft nicht von Vektorgrafiken abhängig sind. Sie verwenden vielmehr pixelbasierte Kunst und Animation. SVG ist jedoch eine großartige Alternative für Spiele, die weniger Zeichenanimation und mehr Informationsanzeige erfordern (denken Sie an Sudoku)..

Warum verwenden Sie es wahrscheinlich nicht?

Nachdem wir uns nun einige der Vorteile von SVG angesehen haben, wollen wir untersuchen, warum sich viele Entwickler weiterhin für SVG entscheiden. Es gibt zwei Hauptgründe, warum SVG nicht von vielen Entwicklern verwendet wird.

1. Sie haben noch nie davon gehört oder hatten nie gedacht, dass sie es brauchen würden, also haben sie es ignoriert. (Dies ist keine Entschuldigung mehr!)
2. Ein SVG-XML-Dokument von beliebiger Komplexität sieht relativ archaisch und kompliziert aus und ist anscheinend bei weitem nicht so einfach wie das Verwenden eines Bildes.

Natürlich möchte niemand wirklich die Punkte im SVG-XML bearbeiten. Zum Glück muss niemand! Dies ist der Teil, den die Leute oft nicht erkennen. Es gibt Werkzeuge zum Bearbeiten von SVG-Dateien, sodass Sie dies nicht immer von Hand tun müssen.

SVG-Tools

Illustrator, Inkscape

Wenn Sie einen Vektoreditor besitzen, kann er Ihre Datei höchstwahrscheinlich als SVG-Datei speichern. Probieren Sie es aus. Öffnen Sie Illustrator, zeichnen Sie einen Kreis oder zwei, und speichern Sie die Datei als SVG. Öffnen Sie dann diese Datei in Sublime Text oder einem anderen Texteditor. Sie werden sofort sehen, dass das SVG-XML - abgesehen von zusätzlichen Metadaten - direkt in Ihre HTML-Datei eingefügt werden kann. Sie werden höchstwahrscheinlich sehen (Gruppe), (Pfad) und natürlich (die übergeordneten SVG-Elemente).

D3.js

Sie können Ihr SVG-XML zwar direkt in eine HTML-Datei ablegen. Was ist, wenn Sie möchten, dass das SVG dynamisch erstellt wird? D3.js ist "eine JavaScript-Bibliothek zur Bearbeitung von Dokumenten, die auf Daten basieren". Mit anderen Worten, es ist großartig, um SVG-Elemente wie Balkendiagramme und Liniendiagramme basierend auf einem Datensatz zu generieren. Wir haben uns entschieden, D3 zu zeigen, weil das Vokabular der SVG-Implementierung im Browser entspricht. Beachten Sie, dass es andere große SVG-Bibliotheken gibt (insbesondere Raphael.js)..

Obwohl D3.js mehr als nur SVG-Manipulationen ausführt, werden wir es der Kürze halber für heute verwenden. (Schauen Sie sich die Beispiele auf der offiziellen Website von D3.js an und sehen Sie sich diesen Workshop an, den Mike auf seiner persönlichen Website gepostet hat.)

Beispiel 1: Pulsierender Kreis

In diesem ersten Beispiel erstellen wir einfach einen pulsierenden Kreis, indem Sie Math.sin und einen Iterator mit setInterval verwenden. Pulsierender Kreis

Beispiel 2: Aktualisieren des Liniendiagramms

In diesem Beispiel aktualisieren wir ein gezeichnetes Liniendiagramm mit einigen Zufallswerten. Liniendiagramm

Wann sollten Sie SVG NICHT verwenden??

SVG wird viele Ihrer Anforderungen für das Rendering von Bildern im Browser erfüllen. Obwohl es viele Gründe gibt, SVG zu verwenden, wie bei etwas Großartigem, gibt es Dinge, die es nicht gut macht.

• Wenn für das Rendern Tausende von Knoten erforderlich sind, ist es leistungsfähiger, das Rendering im Canvas-Bereich auszuführen (da der Browser keine Objekte für jedes gerenderte Teil erstellen muss und auch nicht die Vektorberechnung ausführen muss, die zum Rendern des Objekts erforderlich ist.) Stattdessen werden im Wesentlichen zugeordnete Pixel gemalt.)
• Wenn für Ihre Anwendung die Unterstützung für IE8 erforderlich ist, denken Sie daran, dass Sie entweder einen anderen Vektor-Fallback bereitstellen müssen (z. B. die stärker verwundene VML) oder überhaupt keinen Vektor verwenden und stattdessen auf Bilder mit entsprechender Größe zurückgreifen müssen.

Nützliche Links

Hier sind ein paar hilfreiche Links, um Sie weiter in SVG zu verankern!

• Raphael.js
• Processing.js, basierend auf dem leistungsstarken Processing, einem Java-Imaging-Tool
• jQuery SVG
• Sitepoint-Artikel: Auswahl zwischen Canvas und SVG
• Canvas und SVG Performance
• Nettuts + Artikel über Raffael

Welche andere Verwendung haben Sie für SVG gefunden? Sagen Sie uns im Kommentarbereich Bescheid und vielen Dank für das Lesen.