Der praktische Leitfaden für Anfänger zu SVG
Obwohl das Format nicht besonders neu ist, werden SVG-Bilder bei der Gestaltung von Websites immer beliebter. Alle gängigen Webbrowser unterstützen das Format und SVG ändert die Art und Weise, wie wir Bilder für das Web betrachten und rendern.
Warum bei ihnen so beliebt? Und was genau unterscheidet eine SVG-Datei? Heute haben wir die Antworten und alles andere, was Sie wissen müssen, um mit diesem Dateityp zu beginnen. (Als kleinen Bonus sind alle Bilder in diesem Beitrag in SVG von Creative Market erhältlich.)
Entdecken Sie Envato-Elemente
Was ist SVG?
Scalable Vector Graphics (SVG) ist ein vektorbasiertes Bildformat, das für das Web entwickelt wurde. (Weitere Informationen zu Vektor- und Rasterformaten finden Sie in einem früheren Design Shack-Artikel.)
Das Format erfreut sich dank hochauflösender Displays zunehmender Beliebtheit, bei denen Benutzer jedes Pixel sehen können (sofern vorhanden). Da es sich bei SVG um ein Vektorformat handelt, wird das Bild unabhängig von der Größe auf dieselbe Weise und mit perfekten Details gerendert.
Die Auszeichnungssprache wurde erstmals 1999 vom World Wide Web Consortium entwickelt, das allgemein als W3C bekannt ist. W3C definiert SVG als „Auszeichnungssprache zur Beschreibung zweidimensionaler Grafikanwendungen und -bilder sowie einer Reihe verwandter Grafikskriptschnittstellen“ . ” Es wird von allen modernen Browsern unterstützt - Sie müssen sich also keine Gedanken darüber machen, ob SVG-Dateien ordnungsgemäß gerendert werden oder nicht - und funktioniert unabhängig vom Gerätetyp.
Praktische Anwendungen
Was macht SVG so beliebt und warum verwenden mehr Designer es? Einfach, weil es funktioniert.
SVG-Dateien sind klein und skalierbar. Während das Format für Formen am besten geeignet ist, hat es eine Vielzahl von praktischen Anwendungen. Markenlogos, Symbole, Elemente der Benutzeroberfläche und viele andere Designelemente können im SVG-Format verwendet werden. Der größte Bonus ist, dass sie Vektoren sind. So kann ein SVG-Bild in nahezu jeder Größe verwendet werden. (Einige der kleinsten Dateien können nur so groß sein.)
SVG-Dateien sind ebenfalls einfach zu bearbeiten und zu steuern. Ein SVG kann nicht nur als statisches Bild gespeichert werden, sondern Sie können auch Interaktivität und Filter hinzufügen, um das Bild noch unterhaltsamer zu gestalten. (SVG-Dateien können animiert und farbig dargestellt werden.)
Hier sind einige praktische Anwendungen für die Verwendung von SVG:
- Logos oder Bilder
- Als Hintergrundbild
- Als Objekt, z. B. als Schaltfläche
- Kartierung
- Diagramme oder Zeichnungen
In der Regel eignet sich SVG am besten für Bilder, die sich im Laufe der Zeit oder nach Gerätetyp entwickeln oder ändern oder Animationen oder andere dynamische Effekte enthalten. Verwenden Sie das Format für Grafiken wie Logos, Skizzen, Formen, Grafiken und Diagramme oder andere einfache Bilder.
Vorteile der Verwendung von SVG
Warum sollten Sie von vertrauenswürdigem JPG oder GIF zu SVG wechseln? Es gibt viele Gründe, warum dieses Format in Ihren Projekten am besten geeignet ist. (Und es besteht sogar die Möglichkeit, SVG auch für den Druck zu verwenden.)
- SVG ist ein Vektorformat. Dies allein ist wichtig, wenn Sie über ein responsives Design nachdenken, bei dem sich die Bildgrößen häufig je nach Gerät ändern. Eine SVG-Datei ist klein genug, damit eine Datei die gesamte Arbeit erledigen kann, und auf größeren Bildschirmen tritt kein Qualitätsverlust auf.
- SVG-Bilder und -Verhalten werden mit XML definiert, dh Bilder können indiziert, skriptgesteuert und komprimiert durchsucht werden.
- Mit einem SVG-Bild können Sie fast alles tun, was Sie mit jedem anderen Bild tun können, z. B. mit einer Vielzahl von Designtechniken. Es ist einfach, Filter, Mischmodi, Bur-Effekte, Farben, Clipping und Masking, Schlagschatten und fast jede andere Technik hinzuzufügen, die Sie mögen.
- Auf SVG-Dateien kann zugegriffen werden.
- SVG arbeitet mit offenen Webstandards.
- Sie können SVG mit textbasiertem Code oder mit einem von Ihnen gezeichneten Bild erstellen. Dies ermöglicht je nach Bedarf und Fachwissen in verschiedenen Bereichen einige Freiheiten.
- Die Dateigrößen sind winzig und können minimiert werden. Dies bedeutet, dass Grafiken, die ansonsten möglicherweise groß waren, dies nicht tun, was die Ladezeiten erhöht. (Immer ein Bonus.)
Nachteile der Verwendung von SVG
Sie sind wahrscheinlich bei SVG verkauft, nachdem Sie alle Vorteile durchgelesen haben, oder? Aber es gibt auch ein paar Negative zu beachten.
- Ältere Browser wie Internet Explorer 8 oder niedriger unterstützen SVG nicht. Möglicherweise finden Sie eine Problemumgehung (oder kümmern sich nicht darum), sollten jedoch wissen, dass einige Benutzer Ihre Bilder möglicherweise nicht sehen.
- SVG funktioniert nicht für komplexe Bilder wie Fotos. Es ist ein Format, das nur für Formen und Linien entwickelt wurde.
Was kommt als nächstes für SVG?
Die Zukunft von SVG fängt gerade erst an. Als angenommenes mobiles Bildformat (und Standard) wird die Verwendung und Entwicklung von SVG weiter zunehmen.
Laut W3C befindet sich SVG 2 derzeit in der Entwicklung und wird SVG um neue benutzerfreundliche Funktionen erweitern sowie eine engere Integration in HTML, CSS und DOM sowie veraltete Funktionen, die nicht von allen Browsern unterstützt werden.
Andere Ergänzungen werden ebenfalls herumgeworfen. Druckhardwareunternehmen suchen nach Möglichkeiten, SVG besser für Druckprozesse zu nutzen, und werden von Branchenführern wie Adobe und Canon unterstützt. Die Verwendung in Mapping und GIS wird ebenfalls erweitert, was bessere Mapping- und Zoomfunktionen ermöglicht.
Wenn Sie wirklich darüber nachdenken, gibt es nahezu unbegrenzte Möglichkeiten, SVG in Projekten im Internet und im gedruckten Design zu verwenden und zu implementieren. (Das ist eine der Schönheiten des vektorbasierten Formats.)
SVG-Ressourcen
Jetzt, da Sie etwas mehr von SVG begeistert sind und sehen können, warum und wie es für Ihre Projekte nützlich sein kann, haben wir eine Liste von Ressourcen, die Ihnen den Einstieg erleichtern.
- Exportieren von SVG für das Web mit Adobe Illustrator
- SVG direkt in HTML-Seiten einbetten
- In Betrieb mit SVG Video Series
- SVG-Profile
- CSS-Tricks: Verwenden von SVG
Fazit
Verwenden Sie SVG bereits für Ihre Projekte? Wenn nicht, sind Sie bereit, die Änderung vorzunehmen?
SVG erfreut sich fast täglich wachsender Beliebtheit. Da es sich um ein Open-Source-Tool handelt, werden diese Änderungen und Fortschritte sofort für Sie gelesen. Sie sind nicht an einen Anbieter oder ein Produkt gebunden und können Bilder erstellen, die im gesamten modernen Web vollständig kompatibel sind.
Stock Fotos mit freundlicher Genehmigung von Creative Market .
