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 verändert die Art und Weise, wie wir über das Web nachdenken und Bilder darstellen.
Warum bei ihnen so beliebt? Und was genau unterscheidet sich von einer SVG-Datei? Heute haben wir die Antworten und alles, 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 verfügbar.)
Was ist SVG?
Skalierbare Vektorgrafiken (SVG) sind ein vektorbasiertes Bildformat, das für das Web entwickelt wurde. (Weitere Informationen zu Vektorformaten und Rasterformaten finden Sie in einem früheren Artikel zu Design Shack.)
Das Format wurde dank HD-Displays immer beliebter, da die Benutzer jedes Pixel (falls vorhanden) sehen können. Da es sich bei SVG um ein Vektorformat handelt, werden Bilder unabhängig von der Größe auf dieselbe Weise und mit perfektem Detailrendern gerendert.
Die Auszeichnungssprache wurde erstmals 1999 vom World Wide Web Consortium (W3C) entwickelt. W3C definiert SVG als? Auszeichnungssprache zum Beschreiben zweidimensionaler Grafikanwendungen und Bilder sowie einer Reihe verwandter Grafikskriptschnittstellen . Es wird von allen modernen Browsern unterstützt - Sie müssen sich also keine Sorgen 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 setzen mehr Designer es ein? Einfach weil es funktioniert.
SVG-Dateien sind klein und skalierbar. Während das Format am besten für Formen geeignet ist, hat es eine Vielzahl praktischer Anwendungen. Markenlogos, Icons, Elemente der Benutzeroberfläche und viele andere Design-Bits können im SVG-Format verwendet werden. Der größte Vorteil ist, dass sie Vektoren sind. Ein SVG-Bild kann also in nahezu jeder Größe verwendet werden. (Einige der kleinsten Dateien können nur so groß sein.)
SVG-Dateien können einfach bearbeitet und gesteuert werden. Eine SVG kann nicht nur als statisches Bild gespeichert werden. Sie können auch Interaktivität und Filter hinzufügen, um das Bild noch mehr Spaß zu machen. (SVG-Dateien können animiert und farbig sein.)
Hier sind ein paar praktische Anwendungen für die Verwendung von SVG:
- Logos oder Bilder
- Als Hintergrundbild
- Als ein Objekt, z. B. eine Schaltfläche
- Kartierung
- Diagramme oder Zeichnungen
In der Regel ist SVG am besten für Bilder geeignet, die sich im Laufe der Zeit oder je nach Gerätetyp ändern oder ändern oder Animationen oder andere dynamische Effekte enthalten. Verwenden Sie das Format für visuelle Elemente wie Logos, Skizzen, Formen, Grafiken und Diagramme oder andere einfache Bilder.
Vorteile der Verwendung von SVG
Warum sollten Sie sich also von der vertrauten JPG oder GIF zur SVG begeben? Es gibt viele Gründe, warum dieses Format für Ihre Projekte 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 responsives Design nachdenken, bei dem sich Bildgrößen häufig je nach Gerät ändern. Ein SVG ist so klein, dass eine Datei alle Arbeiten erledigen kann und auf größeren Bildschirmen kein Qualitätsverlust auftritt.
- SVG-Bilder und -Verhalten werden mit XML definiert. Dies bedeutet, dass Bilder indexiert, skriptgesteuert und komprimiert werden können.
- Mit einem SVG-Bild können Sie fast alles machen, was Sie mit jedem anderen Bild machen können, z. B. verschiedene Entwurfstechniken. Sie können Filter, Mischmodi, Bohrereffekte, Farbe, Ausschneiden und Maskieren, Schlagschatten und fast jede andere Technik einfach hinzufügen.
- SVG-Dateien sind zugänglich.
- SVG arbeitet mit offenen Webstandards.
- Sie können SVG-Dateien mit textbasiertem Code oder mit einem von Ihnen gezeichneten Bild erstellen. Dies ermöglicht je nach Bedarf und Kenntnisstand in verschiedenen Bereichen etwas Freiheit.
- Dateigrößen sind winzig und können minimiert werden. Dies bedeutet, dass Grafiken, die ansonsten groß gewesen wären, dies nicht tun, was die Ladezeiten erhöht. (Immer ein Bonus.)
Nachteile der Verwendung von SVG
Sie sind wahrscheinlich auf SVG verkauft, nachdem Sie alle Vorteile gelesen haben, richtig? Es gibt aber auch einige negative Aspekte, die zu berücksichtigen sind.
- Ältere Browser wie Internet Explorer 8 oder niedriger unterstützen kein SVG. Möglicherweise finden Sie eine Problemumgehung (oder interessieren Sie sich vielleicht nicht), 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.
Wie geht es weiter mit SVG?
Die Zukunft von SVG fängt gerade erst an. Als angenommenes Format für mobile Bilder (und Standard) wird die Nutzung und Entwicklung von SVG nur weiter zunehmen.
Laut W3C befindet sich? SVG 2 derzeit in der Entwicklung und wird SVG um neue benutzerfreundliche Funktionen erweitern sowie eine engere Integration mit HTML, CSS und DOM sowie abwertende Funktionen, die nicht von allen Browsern unterstützt werden.?
Andere Ergänzungen werden auch herumgeschleudert. Unternehmen für Druckhardware suchen nach Möglichkeiten, SVG besser für Druckprozesse einzusetzen, und sie werden von Branchenführern wie Adobe und Canon unterstützt. Die Verwendung in Mapping und GIS wird ebenfalls erweitert, wodurch bessere Mapping- und Zoom-Funktionen ermöglicht werden.
Wenn Sie wirklich darüber nachdenken, gibt es eine fast unbegrenzte Möglichkeit, SVGs in Projekte im gesamten Web und im gedruckten Design zu implementieren. (Das ist eine der Schönheiten des vektorbasierten Formats.)
SVG-Ressourcen
Da Sie jetzt 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 mit Ressourcen, die Ihnen den Einstieg erleichtern.
- SVG für das Web mit Adobe Illustrator exportieren
- Betten Sie SVG direkt in HTML-Seiten ein
- Mit der SVG-Videoserie einsatzbereit
- 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.
Stockfotos Mit freundlicher Genehmigung des kreativen Marktes.