So erstellen Sie eine SVG-Datei

Graphic Designer

Bei der Erstellung einer Website muss der Webdesigner berücksichtigen vier Hauptpunkte Denken Sie über das Layout und die visuelle Gestaltung des Webs nach Text, Bilder, Farben und Schriftarten Angestellte.

Von diesen vier Punkten werden wir in diesem Beitrag den Bildern die größte Bedeutung beimessen, da wir darüber sprechen werden So erstellen Sie SVG-Dateien da es sehr wichtig ist, die Qualität der Bilder zu berücksichtigen, mit denen Sie arbeiten.

Behandlungen mit SVG-Dateien, wurde von Fachleuten erhöht und nicht so Profis in der Welt des Designs.

Was ist eine SVG-Datei?

SVG-Symbol

SVG ist die englische Abkürzung für Scalabe Vector Graphics, auf Spanisch Scalable Vector Graphics. Es geht um einen offenes und freies Format mit denen Sie 2D-Grafiken erstellen können, zwei Dimensionen.

Im Gegensatz zu anderen Bildformaten wie JPG oder PNG SVG ist ein skalierbares Format, egal wie stark Sie es vergrößern möchten, da die Bildqualität erhalten bleibt. Es ist eines der am häufigsten verwendeten Formate auf Webseiten, um Grafiken oder Vektorgrafiken zu platzieren.

Warum sollten wir SVG verwenden?

Tablet mit Bildschirmbildern

Bei dieser Art von Format behalten Vektorgrafiken unabhängig von ihrer Größe und Auflösung eine hohe Qualität bei. Im Gegensatz dazu verlieren Bilder, die aus Bitmaps bestehen, die aus Pixeln bestehen, an Qualität, wenn sie in der Größe verändert werden. Das SVG-Format zeichnet sich durch seine Leichtigkeit und Vielseitigkeit aus.

Ein weiterer Punkt, der für die Verwendung dieses Formats spricht, ist seine geringe Größe, dh dank dessen erhöht die Ladegeschwindigkeit der Seiten, wo sie sind. Diese Bilder werden vom Browser erstellt, was dazu beiträgt, die Belastung und den Verbrauch auf dem Server zu reduzieren.

Außerdem können sie Erstellen Sie animierte SVG-Bilder um unserer Website Nähe zu verleihen und die Aufmerksamkeit der Besucher auf sich zu ziehen.

SVG ist ein offenes Format, das heißt, können Verbesserungen und Aktualisierungen unterzogen werden. Darüber hinaus können SVG-Dateien mit Vektorbearbeitungsprogrammen wie z. B. Adobe Illustartor ohne Qualitätsverlust in der Darstellung bearbeitet werden, sie können auf jedem Gerät angezeigt werden. Es ermöglicht uns auch, es ohne Qualitätsverlust zu drucken.

So erstellen Sie ganz einfach SVG-Dateien

Der einfachste Weg, SVG-Dateien zu erstellen, wenn Sie damit vertraut sind, ist vielleicht ein Grafikdesignprogramm wie Illustrator, Corel Draw und andere.

Wenn wir uns auf das Illustrator-Programm konzentrieren, müssen wir bei der Verwendung des SVG-Formats berücksichtigen, ob wir Farbverläufe oder andere Effekte wie künstlerische Effekte, Unschärfe, Pinsel, Pixel usw. verwendet haben. da sie beim Speichern im SVG-Dateiformat gerastert werden. Es wird empfohlen, SVG-Filtereffekte zu verwenden, um Effekte hinzuzufügen, damit sie später nicht gerastert werden können.

Ein weiterer Ratschlag, den wir Ihnen geben, ist die Verwendung Einfache Symbole und Pfade in Illustrationen für eine bessere Leistung des besagten Formats. Vermeiden Sie die Verwendung von Pinseln mit viel Durchpausen, da dies eine höhere Datenlast erzeugt.

Um in diesem Programm eine SVG-Datei zu erstellen, Das erste, was wir offen haben müssen, ist eine leere Leinwand, auf der wir an unserer Idee arbeiten werden.

Sobald unsere Arbeit abgeschlossen ist, gehen wir zur Symbolleiste, die über dem Programm angezeigt wird, und wählen die Option aus Datei, Speichern unter, und ein Popup-Bildschirm wird angezeigt, in dem wir aufgefordert werden, unserer Datei einen Namen zu geben und geben Sie das Format an, in dem wir es speichern möchten. In diesem letzten Abschnitt müssen wir die SVG-Option markieren.

Pfad SVG Illustrator speichern

Bei der Auswahl des SVG-Typs erscheint ein Dialogfenster, das uns verschiedene Optionen anzeigt, die berücksichtigt werden müssen.

SVG-Speicheroptionen

In der Regel erscheint im ersten Feld, das in der Tabelle erscheint, das Profil SVG 1.1. Im Folgenden gibt es uns die Möglichkeit, die Quellen auszuwählen, in denen sie uns angeben Standardmäßig wird in SVG markierter Text und eine Teilmenge als "Keine" verwendet. In unserem Fall hat diese Arbeit keine Schriftarten, wenn dies der Fall wäre, müsste die Option Untergruppen von keiner auf alle Piktogramme geändert werden.

Der folgende Abschnitt ist sehr wichtig, wenn wir darauf hinweisen Embed-Option werden die Bilder der Komposition in die Datei integriert, was dazu führt, dass es an Gewicht gewinnt, wenn wir viele Bitmap-Bilder verwenden. Wenn wir hingegen die Option zum Verlinken markieren, müssen wir mit den Bildern vorsichtig sein, wenn wir sie auf einer Website verwenden, da wir die Dateien unserer Bilder einfügen und auch, sehr wichtig, pflegen müssen Weg. Der Vorteil dieser Option ist, dass die Dateien viel weniger wiegen.

SVG-Optionsbildschirm

Im Abschnitt „Erweiterte Optionen“ finden wir die Option zu SVG-Code, diese Option zeigt an, wie sich die Datei darin befindet, also der Code hinter unserer Arbeit. Diese Option ist unerlässlich, wenn Sie Ihre SVG-Datei beispielsweise zu Ihrem persönlichen WordPress hinzufügen möchten. Sie müssen nur den Code kopieren und direkt in Ihrem WordPress-HTML-Editor hinzufügen.

Der letzte Rat, den wir Ihnen geben, ist, dass Sie beim Speichern im SVG-Format Denken Sie daran, dass, wenn Sie mit verschiedenen Zeichenflächen arbeiten, nur die aktive Zeichenfläche beibehalten wird.

Wenn wir noch weiter gehen und SVG-Effekte auf unsere Illustration anwenden möchten, bietet uns Illustrator eine Reihe von Effekten. Dazu müssen wir ein Objekt oder eine Gruppe auswählen. Um einen Effekt anzuwenden, müssen wir das Effektfenster und die SVG-Filter auswählen und anwenden.

Illustrator-SVG-Effekte

Beim Anwenden eines SVG-Filters zeigt uns das Designprogramm ein Fenster, wo Eine Liste mit anwendbaren Filtern wird angezeigt, sobald wir eines ausgewählt haben, zeigt uns Illustrator, wie es aussieht, jedoch in einer gerasterten Version.

Turbulenzfilter SVG Illustrator

Wie Sie gesehen haben, ist die Das SVG-Format war eine Revolution. Dank seines Potenzials und der Qualität die es bietet, macht die Webseiten, die wir finden, viel attraktiver, ohne die Leistung zu beeinträchtigen, solange sie das genannte Format korrekt verwenden. SVG ist zur perfekten Verbindung zwischen der Welt des Designs und der Webentwicklung geworden.


Schreiben Sie den ersten Kommentar

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit *

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.