SVG für Entwickler: Grundlagen, Vorteile und Nachteile verstehen

Grafiken verleihen Websites einzigartige Ausdrucksformen und helfen Entwicklern dabei, Benutzern mühelos tiefgreifende Ideen und Konzepte zu vermitteln. Es ist ein Schlüsselelement im Internet und seit 1999 skriptfähig, was eine komplexere Darstellung von Bildern im Web ermöglicht.

Möglicherweise sind Sie mit der Verwendung der verschiedenen Rasterbilddateitypen vertraut: JPG, PNG und GIF. Erinnern wir uns ein wenig. Mit Unterstützung für 256 Farben (8-Bit) ist GIF (Graphic Interchange Format) ein hervorragendes Format für Animation und Transparenz, ohne Alpha-Transparenz. Das PNG-Format (Portable Network Graphic) ist viel besser und unterstützt über 16 Millionen Farben (24 Bit) und alle Arten von Transparenz, vorausgesetzt, Sie benötigen keine Animationen.

Das am weitesten verbreitete Bildformat im Web, JPG oder JPEG (Joint Photographic Experts Group), unterstützt mehr als 16 Millionen Farben, hauptsächlich weil es komprimierbar ist; 24 Bit oder 8 Bit pro Pixel für Graustufen, aber keine Unterstützung für Animation oder Transparenz. Daher ist JPG das wichtigste Grafikformat, das Entwickler für statische Fotos verwenden. Ich habe Bitmap (BMP) nicht erwähnt, da es normalerweise kein Bildformat für das Web ist. BMP speichert genaue Daten jedes Pixels in einem Bild, wodurch die Dateien wirklich groß werden (über 150-mal so groß wie JPGs mit derselben Auflösung) und für Website-Grafiken ungeeignet sind.

Diese auflösungsabhängigen Grafikformate sind großartig, meistens wenn sie richtig verwendet werden. Sie alle haben jedoch einen gemeinsamen Mangel, der zur Einführung von SVG führte – dem einzigen Vektorbildformat für das Web.

Was ist SVG?

Scalar Vector Graphics (SVG) ist ein Extensible Markup Language (XML)-basiertes Bildformat, das zweidimensionale Grafiken wie Pfade, Linien, Kreise, Muster, Textfarben usw. beschreibt. In einer einfacheren Definition bezieht es sich auf ein Bildformat mit Unterstützung für zweidimensional, deren gesamtes Verhalten und Bestehen durch eine XML-Textdatei gesteuert wird.

Ein weiteres interessantes Merkmal ist die Skalierbarkeit; Sie können SVG-Bilder beliebig skalieren, ohne ihre Auflösung zu verlieren. Dies liegt daran, dass SVGs Bilder mit Formen, Zahlen und Koordinaten rendern, nicht mit Pixeln wie in Rasterbildformaten, die Bilder rendern, indem sie definieren, welche Farbe jedes Pixel zeichnen soll.

Lassen Sie uns sehen, wie Sie SVG-Bilder erstellen können und einige der Gründe, warum Sie die Verwendung von SVG in Ihren Projekten in Betracht ziehen sollten.

So erstellen Sie SVG-Bilder

Sie können SVG-Bilder mit jedem Texteditor erstellen, obwohl der Vorgang ein wenig technisch ist und einige Design- und Mathematikkenntnisse erfordert, insbesondere wenn Sie einige komplexe Formen erstellen. Stellen Sie sich vor, ein Flugzeug auf einer Leinwand zu zeichnen, indem Sie nur Codezeilen verwenden. Es gibt jedoch einen einfacheren Weg, aber lassen Sie uns diesen verwenden, um die grundlegenden Konzepte von SVG zu verstehen.

Wir verwenden SVG-Grafikelemente, um SVG-Bilder in einem Texteditor zu erstellen. Der Prozess besteht darin, Ihre Grafikelemente einfach in die Tags <svg> und </svg> einzufügen und ihre Koordinaten, Abmessungen, Farbe usw. anzugeben. Zum Beispiel kann das Element <rect> verwendet werden, um ein Rechteck zu zeichnen, wie in der gezeigt folgendes Beispiel.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Der obige Code zeichnet ein blaues Rechteck von 300 x 300 Pixel in der oberen linken Ecke Ihres Browsers, wenn er als .svg-Datei gespeichert und mit einem Browser geöffnet wird. Jetzt fragen Sie sich vielleicht, warum wir zwei Höhen und Breiten im Dokument haben. Lassen Sie uns den gesamten Code verstehen, um zu sehen, warum. Wie bereits erwähnt, muss Ihr SVG-Code in das Stammelement (<svg> und </svg>) geschrieben werden, um Ihren Browser darüber zu informieren, wie er diese Zeilen interpretieren soll.

Genau wie in HTML erfordert SVG eine Namespace-Deklaration im Root-Element. Im obigen Beispiel haben wir den xmlns-Parameter „http://www.w3.org/2000/svg“ und die vom W3C empfohlene SVG-Version 1.1 im Root-Element angegeben. Die Dimension innerhalb des Root-Elements wird als SVG-Ansichtspunkt bezeichnet, bei dem es sich um das Fenster oder die Leinwand handelt, durch das bzw. die das im Root-Tag gezeichnete SVG-Bild erscheinen würde. Der Ansichtspunkt muss mindestens dieselbe Dimension wie Ihre gesamten SVG-Objekte haben, bevor sie in Ihrem Browser angezeigt werden können.

Die zweite Zeile ist einfacher zu verstehen. Das Element <rect>, das zum Zeichnen von Rechtecken verwendet wird, verkörpert die Parameter des vorgeschlagenen Rechtecks ​​beginnend mit der Dimension. Die Strichbreite beschreibt die Linienstärke, während die beiden RGB-Farbmodelle dem Browser mitteilen, mit welcher Farbe das Rechteck bzw. die Linie gefüllt werden soll. Das ist ganz einfach, oder?

Jetzt können wir das Rechteck innerhalb der Seite verschieben, indem wir einen Wert für x und y wie folgt deklarieren:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Natürlich werden wir nicht vergessen, die Dimension des Blickwinkels zu vergrößern, um den zusätzlichen Platz aufzunehmen, den dies beanspruchen würde.

Der einfachste Weg, SVG-Bilder zu erstellen, ist die Verwendung von Zeichenwerkzeugen wie Adobe Illustrator, Inskape und Sketch. Anstatt von Grund auf neu zu erstellen, sind einige JavaScript-Bibliotheken wie Bonsai.js und D3.js gute Quellen für SVG-Bilder, wenn Sie nach Symbolen, komplexen Formen usw. suchen.

Hinzufügen von SVG-Bildern

Einer der Vorteile der Verwendung von SVG-Bildern ist die einfache Integration in Ihr Design. Sie referenzieren sie einfach im src-Attribut eines img-Tags. Dies sollte sich wie folgt auf die .svg-Datei beziehen, die in Ihrem Website-Ordner gespeichert ist:

<img src='example.svg'>

Alternativ können Sie die SVG-Codes in Ihr HTML-Dokument einfügen, wobei die <svg></svg>-Tags den Code wie bereits erwähnt beginnen und beenden.

Sie können auch auf das SVG-Bild in Ihrem CSS für das Hintergrundbild wie folgt verweisen:

.main-header {
background-image: url(example.svg);
}

Vorteile der Verwendung von SVG für Entwickler

Die Notwendigkeit von SVG in Ihren späteren Webprojekten kann angesichts der aktuellen Grafikanforderungen des Internets nicht genug betont werden. Abgesehen von der unzähligen Anzahl neuer Geräte mit leistungsstarker Auflösung und Bildschirmgröße bieten Websites jetzt so viel Interaktivität, dass es ohne die vollständige Kontrolle über Ihre Grafiken schwierig sein könnte, professionelle Websites bereitzustellen.

Einige der Vorteile umfassen:

Skalierbarkeit und Reaktionsfähigkeit

Als auflösungsunabhängiges Bildformat lassen sich SVGs beliebig skalieren, ohne zu verpixeln. Auf diese Weise können Sie als Entwickler jedem Benutzer erstklassige Grafiken liefern, unabhängig von der Auflösungsstärke und Bildschirmgröße seiner Geräte. Sie können verschiedene Pfade, Formen und Textelemente kombinieren, um beeindruckende Bilder zu erstellen, die in allen Größen scharf und gestochen scharf sind.

Dies ist in keinem der Rasterbildformate mit festen Abmessungen verfügbar, einfach weil sie nie genug Daten haben würden, um jeden Platz zu füllen, wenn sie extrem hochskaliert werden. SVG berechnet den Abstand zwischen Punkten, um die Pfade ständig verbunden zu halten, damit das Bild in jedem Maßstab scharf bleibt.

Extrem flexibel und unterstützt Animation

Im Gegensatz zu Rasterbildern, die die endgültige Kopie eines Bildes liefern, können SVG-Bilder vollständig bearbeitet werden, indem die Codes mit einem Texteditor oder speziellen Zeichenwerkzeugen angepasst werden. Mithilfe von Klassennamen oder IDs Ihrer SVG-Elemente können Sie Ihre SVG-Bilder mit CSS gestalten oder animieren. Die Animation von SVG-Bildern ist auch mit Web Animation API, SMIL oder WebGL möglich.

Am wichtigsten ist, dass Sie Ihre SVG-Bilder in andere bekannte offene Webplattform-Technologien und -Dokumente integrieren können. SVGs können mit JavaScript geschrieben und mit CSS wie HTML gestaltet werden.

SEO-freundlich und kleine Dateigröße

SVG-Bilder liegen in einem Textformat vor und verbessern die Zugänglichkeit einer Website, was ein großer Vorteil für das Seitenranking ist. Darüber hinaus sind Suchmaschinen in der Lage, den Text von SVG-Elementen zu indizieren, sodass Benutzer Ihre Website mithilfe von Schlüsselwörtern in Ihrer SVG-Datei finden können.

SVG wird viel schneller geladen, da keine Datei heruntergeladen werden muss und keine HTTP-Anfrage erforderlich ist. Die Verbesserung der Auflösung einer Rasterbilddatei bedeutet, die Anzahl der Punkte (Pixel) zu erhöhen. Dadurch wird die Bildgröße erhöht, was die Ladezeit Ihrer Website verlängert. Dies ist bei der Verwendung von SVG bei weitem nicht der Fall. Als Bild, das mit einer Reihe von Anweisungen und Koordinaten erstellt wurde, sind SVG-Dateigrößen (wenn optimiert) im Vergleich zu anderen Bilddateitypen unglaublich klein. Dies führt zu einer schnelleren Ladezeit, einer erhöhten Seitenleistung, einem höheren Suchmaschinenranking und verbessert gleichzeitig die Benutzererfahrung. Weitere Informationen hierzu finden Sie unter SEO Consultant London

SVG hat ein eigenes Document Object Model

SVG existiert als separates Dokument, das als eigenständige Struktur betrachtet und innerhalb des normalen DOM positioniert wird. Dieser Ruf ist entscheidend für das viewBox-Attribut, das es uns ermöglicht, einen Blickwinkel beliebiger Größe zu erstellen, Bilder auf Leinwand unterschiedlicher Größe zu zeichnen und sie anzuzeigen, ohne die SVG-Eigenschaften zu aktualisieren.

SVG ist das Bilddateiformat der Zukunft

Ohne die Einführung leistungsstärkerer Geräte mit wahnsinnig großartiger Bildschirmauflösung müssten sich Entwickler nicht mit den überwältigenden Kopfschmerzen der Optimierung von Bildern für verschiedene Geräte auseinandersetzen. Aber das wird in ein paar Jahren nicht einfacher werden, gepaart mit dem wachsenden Hunger nach mehr Interaktivität von Websites.

Irgendwie ist es nicht kosteneffektiv, diese Herausforderungen zu bewältigen, indem unterschiedliche Bilder bereitgestellt werden, die der Dimension des Blickwinkels der Benutzer entsprechen. Und im Interesse der geschäftlichen Nachhaltigkeit durch Einsparung von Bandbreite, Geld und Verbesserung der Benutzererfahrung werden die Bemühungen um die Umstellung auf das SVG-Bildformat unweigerlich zur obersten Priorität. Es gibt eine wachsende Gemeinschaft von SVG-Unterstützern.

Vor der Einführung von SVG 1.1 (Second Edition) durch das W3C am 16. August 2011, das möglicherweise für eine neuere Version geprüft wird, haben SVG 1.0 und 1.1 (First Edition) bereits die Art und Weise verändert, wie wir mit Bildern im Internet umgehen. Dies ist ein Versprechen von etwas, das mehr wert ist als das normale Rasterbildformat, das in unserem aktuellen Stand der Webprogrammierung immer noch sehr nützlich ist. SVG ist nicht in allen Fällen das beste Bildformat. Es wird erwartet, dass nachfolgende Versionen von SVG einige der Nachteile von SVG angehen; später in diesem Artikel besprochen werden.

Wann das SVG-Bildformat verwendet werden sollte

Natürlich sind auflösungsabhängige Bildformate immer noch die besten für Fotos und andere detailreiche Bilder. Hier ist eine Liste häufiger Fälle, in denen SVG-Bildformate die besten sind.

1. Logos und Symbole
2. Interaktive Bilder wie Diagramme, Grafiken, Karten, Infografiken
3. Animationen
4. Anwendungsschnittstellen
5. Einfache Diagramme und Illustrationen
6. Spezialeffekte wie Gooey oder Shape Morphing
7. Kunstwerke mit geringer Intensität und einfache Grafiken

Nachteile von SVG für Entwickler

SVG wird nicht von allen Browsern unterstützt: Alte Browser behandeln SVGs genauso, wie ein veraltetes Windows XP Flash-Laufwerke oder Ihre Canon EOS 5DSr behandeln würde, wenn Sie versuchen, sie zu verbinden. Kurz gesagt, SVG funktioniert nicht auf älteren Browsern; IE8 und niedriger. Wenn man bedenkt, dass ältere Browser nicht wirklich Teil einer zukünftigen Sache sind, gepaart mit der Tatsache, dass sie nur noch von einer Handvoll Personen verwendet werden, ist dies kein Hauptgrund, SVGs nicht zu verwenden.

SVG unterstützt nicht so viele Details: Als Mischung aus Pfaden und Punkten fehlt SVG der Rahmen, um so viele Details wie pixelbasierte Rasterbildformate anzuzeigen. SVG funktioniert nicht mit etwas, das mit einer Kamera aufgenommen wurde. Daher werden Fotos und andere Formen von Grafiken mit so vielen Details am besten mit Rasterbildformaten angezeigt, da sie eine höhere Farbdichte unterstützen.

SVG-Code verstehen: Während man von Entwicklern erwarten kann, dass sie wissen, wie man mehrere Web-Programmiersprachen verwendet, hat sich die Erhöhung dieser Belastung als Herausforderung erwiesen. SVG-Codemuster sind nicht wirklich schwierig oder völlig anders als Webprogrammiersprachen. Das Erstellen oder Bearbeiten auffälliger Bilder erfordert jedoch einige Mühe. Dies ist nicht das, wofür jeder Entwickler viel Zeit investieren möchte, wenn Bitmap-Bilder praktisch sind und keine Mühe zum Einbetten erfordern.

Fazit

Das Verhalten der Grafiken auf einer Website in Reaktion auf die breite Palette von Benutzern ist heute ein wichtiger Aspekt der Webentwicklung. Und das SVG-Bildformat ist die großartige Lösung, anstatt mehrere Bildgrößen zu rendern, wie dies normalerweise in unseren aktuellen Designs der Fall ist. Dies liegt daran, dass Browser mithilfe einer Reihe von Anweisungen berechnen, wie das Bild gerendert werden soll, was klare und scharfe Bilder in jedem Maßstab gewährleistet.

Bitmap-Bilder bleiben die besten für hochdetaillierte Bilder wie Fotos, während SVG-Bilder für weniger detaillierte Bilder wie Symbole, Logos, Diagramme, Infografiken usw. verwendet werden. Ich würde Ihnen raten, bei Zeichenwerkzeugen wie Illustrator oder Sketch for zu bleiben Erstellen von SVG-Bildern und Online-Bibliotheken für Symbole und beliebte Formen. Die Codierung sollte nur erforderlich sein, wenn Sie Ihre SVG-Bilder manipulieren möchten.

Bitte lassen Sie uns wissen, wie Sie SVG verwenden und über andere coole Tipps, die hier nicht geteilt werden.