Wie (und warum) wird SVG 2018 übernehmen?

/2019-11-08 21:00:22/
Irving
/Grafiken/

2018 wird das Jahr der SVG sein. Das Bilddateiformat hat in den letzten Jahren stetig an Popularität und Nutzung zugenommen, aber 2018 wird es wirklich durchbrechen.

Sie haben die Kombination von Benutzern mit hochauflösenden Displays und die Notwendigkeit einer blitzschnellen Ladezeit zu verdanken. Und während der Wechsel zu SVG nach einer großen Sache klingen könnte; 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 finden Sie alles, was Sie wissen müssen, wenn es um SVG geht.

Entdecken Sie Designressourcen

SVG ist für das Web gemacht

Mozilla beschreibt es so:

SVG ist eine XML-basierte Sprache zur Beschreibung von Vektorbildern. Es ist im Grunde ein Markup wie HTML, außer dass Sie viele verschiedene Elemente zum Definieren der Formen haben, die in Ihrem Bild angezeigt werden sollen, und der Effekte, die Sie auf diese Formen anwenden möchten. SVG dient zum Markieren von Grafiken, nicht von Inhalten. Am einfachsten Ende des Spektrums befinden sich Elemente zum Erstellen einfacher Formen wie und. Zu den erweiterten SVG-Funktionen gehören (Farben mithilfe einer Transformationsmatrix transformieren) (Teile Ihrer Vektorgrafik animieren) und (eine Maske über dem Bild anwenden.)

Zu den Hauptvorteilen von SVG für Webdesigner gehört die Möglichkeit, einfache SVG-Renderings 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 sind einfach zu gestalten und zu skripten. und Sie erstellen mit einem Vektorformat, das bei jeder Größe gut wiedergegeben werden kann. SVG-Formate werden von modernen Browsern unterstützt, sind zukunftssicher und hochkomprimierbar.

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 heruntergekommene 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 viele verschiedene Dinge damit machen können. SVG kann verwendet werden für:

Logos
Hintergründe, Muster und Texturen
Animation
Reaktionsschnelle Bilder
Symbole

Designer können SVG für jedes Element in einem Entwurf verwenden, bei dem ein Vektorformat eine anwendbare Lösung ist. Sie können unter anderem JPG, PNG und GIF ersetzen.

Regel für Vektorformate

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 Schöne 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 viele Leute tun dies bereits.

Beim Vorbereiten von SVG-Dateien ist eine wichtige Sache zu beachten. Um sie so klein wie möglich zu halten, müssen Sie nicht benötigten Müll löschen. (Löschen Sie das Pasteboard!) SVG im Web bietet einige großartige Tipps zum Zeichnen von Elementen und zum bestmöglichen Speichern von SVG-Dateien.

Textbasiertes Format ist gut für SEO

Die Verwendung von SVG bietet auch Suchmaschinen-versierten Designern einen kleinen Bonus. Da SVG bei der Formatierung tatsächlichen Text verwendet, können Suchmaschinen die Bilder besser lesen.

Ja, Sie können Alt- Informationen mit anderen Bildern hinzufügen, aber es gibt nur so viel Platz für Schlüsselwörter. Mit SVG können Sie suchfreundlichere 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 leicht

Im Gegensatz zu einigen anderen vektorbasierten Dateitypen, die schnell sehr schnell werden können, sind SVGs Code. Code ist schnell. So einfach ist das. Naja fast.

Wenn es um ausgefallene Vektorzeichnungen geht, die Sie als SVG gespeichert haben, überprüfen Sie die Dateigrößen, bevor Sie zu weit kommen. Während PNG-Formate beim Hinzufügen von Transparenz fast exponentiell wachsen können, wachsen SVGs in der Regel basierend auf der Anzahl der Pfade und Füllungen im Bild.

Wenn das SVG sehr groß ist, sollten Sie es und ein JPG oder PNG exportieren. (Auch wenn es widersprüchlich erscheint. Die Realität ist, dass die meisten Designer weiterhin eine Mischung aus Dateitypen mit Bildern verwenden. Erwarten Sie nur, dass Sie mehr SVG verwenden als in der Vergangenheit.)

Das Bearbeiten ist einfach

Wenn Sie es gewohnt sind, Symbole oder Logos oder was auch immer in einer Vektorzeichnungssoftware zu zeichnen, ändert sich für Sie nichts am Bearbeitungsprozess.

Aber wenn Sie SVG schreiben, werden Sie sich freuen. Ändern Sie einfach das Wort oder die Koordinaten oder die Farbe im Texteditor und boomen Sie, die Änderung wird vorgenommen. Es ist schwierig, die Bearbeitung einfacher zu gestalten.

Erstellen Sie Standbilder oder animierte Bilder mit SVG

Im Gegensatz zu den meisten anderen Bildformaten, mit denen Sie ein Standbild oder ein Bewegtbild erstellen können, ermöglicht SVG beides. Sie können ein Standbild oder eine Animation erstellen. Und alles funktioniert ziemlich gleich. (Dieses raffinierte Beispiel ist ein Tutorial zum Animieren eines Elements entlang eines SVG-Pfads!)

Diese kleinen Vorteile tragen dazu bei, SVG an die Spitze der Designer zu bringen. Sie müssen kein neues Werkzeug oder eine neue Technik erlernen. Mit SVG steht Ihnen bereits alles zur Verfügung, was Sie brauchen.

Fazit

Hier ist der Hauptgrund, warum 2018 das Jahr sein wird, in dem SVG die Macht übernimmt: Es ist praktisch.

Bei jedem, der hochauflösende Displays verwendet, sind Vektorformate der richtige Weg. Alles skaliert einwandfrei und Sie müssen sich keine Gedanken über Pixel machen. SVGs erstellen großartige Logos (statisch oder reaktionsschnell), 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 es darum geht, SVGs in Ihr Website-Design zu implementieren.

Sie können jetzt buchstäblich mit der Verwendung von SVG-Bildern beginnen.