2018 wird das Jahr der SVG sein. Das Image-Dateiformat hat in den letzten Jahren an Popularität und Nutzung zugenommen, aber 2018 wird es wirklich durchbrechen.
Sie haben die Kombination von Benutzern mit hochauflösenden Displays und der Notwendigkeit einer blitzschnellen Ladezeit zu verdanken. Und während die Umstellung auf SVG wie eine große Sache klingt; es ist nicht.
SVG ist einfach zu verwenden und zu implementieren, und Sie müssen vorhandene Dateien nicht wirklich ändern. Fügen Sie einfach neue Bilder als SVG hinzu. Hier ist alles, was Sie wissen müssen, wenn es um SVG geht.
SVG ist für das Web gemacht
Mozilla beschreibt es so:
SVG ist eine XML-basierte Sprache zum Beschreiben von Vektorbildern. Es ist im Grunde ein Markup wie HTML, nur dass Sie über viele verschiedene Elemente verfügen, um die Formen zu definieren, die in Ihrem Bild angezeigt werden sollen, und die Effekte, die Sie auf diese Formen anwenden möchten. SVG dient zum Markieren von Grafiken und nicht von Inhalten. Am einfachsten Ende des Spektrums haben Sie Elemente zum Erstellen einfacher Formen wie und. Zu den weiterentwickelten SVG-Funktionen gehören (Farben mit einer Transformationsmatrix transformieren), (Teile Ihrer Vektorgrafiken animieren,) und (eine Maske über dem Bild anwenden.)
Die wichtigsten Vorteile von SVG für Webdesigner sind die Möglichkeit, einfache SVG-Rendering in einem Code- oder Texteditor zu erstellen, während komplexe Grafiken in einem Programm wie Adobe Illustrator gezeichnet werden können. SVG-Text ist zugänglich; SVGs lassen sich leicht formatieren und skripten. und Sie erstellen mit einem Vektorformat, das bei jeder Größe gut dargestellt wird. SVG-Formate werden von modernen Browsern unterstützt, sind zukunftssicher und hoch komprimierbar.
Einige der Nachteile sind, dass das Entwerfen von SVGs kompliziert werden kann und anfangs etwas schwieriger zu erstellen ist. Das andere Problem ist, dass einige schlecht eingestellte Browser einfach nicht verstehen, was sie sind.
Benötigen Sie ein besseres Verständnis von SVG? Wir haben einen Anfängerleitfaden für SVG.
Wie Designer SVG verwenden
Einer der Vorteile von SVG ist, dass Sie damit viele verschiedene Dinge tun können. SVG kann verwendet werden für:
- Logos
- Hintergründe, Muster und Texturen
- Animation
- Responsive Bilder
- Icons
Designer können SVG für jedes Element in einem Design verwenden, bei dem ein Vektorformat eine geeignete Lösung ist. Sie können unter anderem JPG, PNG und GIF ersetzen.
Vektorformate-Regel
Es besteht eine gute Chance, dass Sie mehr Vektorformate verwenden. SVG ist auflösungsunabhängig. Und das ist ein großer Bonus, denn Sie wissen, dass Ihre Bilder überall gut aussehen werden.
Das Besondere an der Arbeit mit SVG-Bildern ist, dass Sie Ihren Workflow nicht wirklich ändern müssen, um sie zu implementieren. Wenn Sie in Software wie Illustrator oder Sketch entwerfen, ist der Prozess - abgesehen vom endgültigen Export - identisch. Der einzige Haken ist, dass Sie wahrscheinlich alle Textelemente in Illustrator in Konturen umwandeln möchten, aber das tun schon viele.
Wenn Sie SVG-Dateien vorbereiten, müssen Sie Folgendes beachten. Um sie so klein wie möglich zu halten, sollten Sie unbedingt unerwünschten Müll löschen. (Löschen Sie dieses Pasteboard!) SVG im Web bietet einige gute Tipps zum Zeichnen von Elementen und zum optimalen Speichern von SVG-Dateien.
Textbasiertes Format ist gut für SEO
Die Verwendung von SVG bringt auch einen gewissen Bonus für Designer mit, die sich mit Suchmaschinen auskennen. Da SVG bei der Formatierung echten Text verwendet, können Suchmaschinen die Bilder besser lesen.
Ja, du kannst hinzufügen alt Informationen mit anderen Bildern, aber es gibt nur so viel Platz für Keywords. Mit SVG können Sie mehr suchfreundliche Bilder erstellen und einfach hochladen. Google indiziert alle SVG-Inhalte, einschließlich eigenständiger Dateien und wenn SVGs direkt in HTML eingebettet sind.
SVG ist leichtgewichtig
Im Gegensatz zu einigen anderen vektorbasierten Dateitypen, die schnell sehr schnell werden können, handelt es sich bei SVGs um Code. Code ist schnell. So einfach ist das. Gut? fast.
Wenn es sich um die fantastischen Vektorzeichnungen handelt, die Sie als SVG-Dateien gespeichert haben, überprüfen Sie die Dateigrößen, bevor Sie zu weit gehen. Während PNG-Formate durch das Hinzufügen von Transparenz fast exponentiell wachsen können, neigen SVGs dazu, basierend auf der Anzahl der Pfade und Füllungen im Bild zu wachsen.
Wenn das SVG-Format sehr groß ist, sollten Sie es in Betracht ziehen, es und ein JPG- oder PNG-Format zu exportieren. (Auch wenn es widersprüchlich erscheint. In der Realität verwenden die meisten Designer weiterhin eine Mischung aus Dateitypen und Bildern. Erwarten Sie einfach, dass Sie mehr SVG-Werte verwenden als in der Vergangenheit.)
Die Bearbeitung ist einfach
Wenn Sie das Zeichnen von Symbolen oder Logos oder Ähnliches in der Vektorzeichnungssoftware gewohnt sind, ändert sich für Sie nichts am Bearbeitungsprozess.
Aber wenn Sie SVG schreiben, werden Sie sich auf etwas freuen. Ändern Sie einfach das Wort oder die Koordinaten oder die Farbe im Texteditor und Boomwird die Änderung vorgenommen. Es ist schwer, das Editieren einfacher zu machen.
Erstellen Sie Standbilder oder animierte Bilder mit SVG
Im Gegensatz zu den meisten anderen Bildformaten, bei denen Sie ein Standbild oder ein bewegtes Bild aufnehmen können, bietet SVG eine der folgenden Möglichkeiten. Sie können ein Standbild oder eine Animation erstellen. Und alles funktioniert auf die gleiche Weise. (Dieses nette Beispiel ist ein Tutorial, wie ein Element entlang eines SVG-Pfads animiert wird!)
Diese kleinen Vorteile tragen dazu bei, SVG an die Spitze der Designer zu bringen. Sie müssen kein neues Werkzeug oder eine neue Technik lernen. Mit SVG haben Sie bereits alles, was Sie brauchen.
Fazit
Dies ist der Hauptgrund, warum 2018 das Jahr sein wird, in dem SVG die Kontrolle übernimmt: praktisch.
Bei allen, die hochauflösende Displays verwenden, sind Vektorformate der richtige Weg. Alles lässt sich problemlos skalieren und Sie müssen sich keine Sorgen um die Pixelierung machen. SVGs erstellen großartige Logos (statisch oder responsiv), Grafiken und Hintergründe, Symbole und kleine Bilder sowie Animationen. Die Dateien sind klein und werden schnell geladen, und es gibt keine große Lernkurve, wenn SVGs in das Design Ihrer Website integriert werden sollen.
Sie können SVG-Bilder jetzt buchstäblich verwenden.