Share
Scalable Vector Graphics (SVG) ist ein Vektorbildformat, das 1998 gegründet wurde. Es wurde immer für das Web entwickelt, aber erst jetzt hat das Web tatsächlich aufgeholt. Heute kann die Relevanz nicht geleugnet werden. Schauen wir uns also die Grundlagen an, um SVG von Illustrator in den Webbrowser zu übertragen.
Hinweis: Ich verwende Adobe Illustrator CC, um die Dinge hier zu demonstrieren, aber andere Versionen haben ähnliche (wenn auch nicht identische) Optionen und Werkzeuge.
Das SVG-Format wurde vom World Wide Web Consortium (W3C) entwickelt und wird weiterhin gepflegt. Das W3C besteht aus einer Gruppe kluger Leute, die das Web standardisieren und es für alle offen und zugänglich machen wollen.
SVG ist besonders für das Web von Vorteil, da es das Problem der Bildschirmauflösung umgeht. Es spielt keine Rolle, wie dicht die Pixel Ihres neuen Smartphones sind, Vektoren werden immer so scharf dargestellt wie frisch gefallener Schnee, was bei gerasterten Bildern nicht immer der Fall ist.
Die Dateigröße ist immer ein Problem im Web (niemand möchte warten, bis ein 5-TB-Bild über eine mobile Verbindung in den Browser geladen wird). SVG ist also ein vereinfachtes Vektorformat. Es wurde mit XML erstellt und viele unnötige "Sachen" werden entfernt, was eine relativ leichte Datei ergibt.
Wenn Sie diese XML-Bausteine verwenden, können Sie den Inhalt einer SVG-Datei wie jedes andere Element auf einer Webseite bearbeiten und formatieren. Teile innerhalb eines SVGs können isoliert werden, die Farben können geändert werden, das Strichgewicht kann geändert werden, die Transparenz, wir können sogar bestimmte Filter (wie Unschärfe) anwenden, sogar animieren - alles durch CSS und JavaScript.
Die Vorteile einer gestochen scharfen Linienqualität und die Möglichkeit, ein grafisches Element zu manipulieren, sind selbsterklärend. Wo können Sie dies jedoch nutzen? Hier ist eine kurze Liste von Situationen, in denen SVG zur Geltung kommt:
Jeden Tag Grafiken: Wenn Sie eine Grafik auf einer Website verwenden, überlegen Sie, ob sie als SVG-Format vorliegen kann. Wenn ja, warum nicht verwenden? Fotografie wäre ein Beispiel, bei dem SVG keinen Sinn macht, aber für alles andere sollte man darüber nachdenken.
Icons: Websites auf der ganzen Welt sind mit Symbolen übersät; Sie sind allgemein verständlich (wenn sie richtig verwendet werden) und verkürzen die Zeit, die ein Benutzer für die Verarbeitung einer Schnittstelle benötigt. Heutzutage werden Symbole häufig über Webfonts auf Websites angewendet, sie können aber auch als SVG in eine Seite eingefügt werden. Perfekt saubere und gestochen scharfe Icons für alle.
Logos: Wenn es eines gibt, was ein Unternehmen wertvoll halten sollte, dann ist es seine Identität. SVG bietet die beste Möglichkeit, Branding einfach und unkompliziert im Web anzuzeigen. Farben können präzise sein, die Linienqualität ist einwandfrei und dieselbe Datei kann wiederholt auf einer Website verwendet werden, sie kann jedoch je nach den Umständen geändert werden. Perfekt.
Erkennen Sie dieses Logo? Dekoration: Ich muss diese Idee nicht an eine Menge Vektorkünstler verkaufen, oder??
Animation: Durch CSS3 und JavaScript hat sich eine ganze Animationswelt für das Web geöffnet. SVG ist auch das perfekte Fahrzeug, aus allen Gründen, die ich bisher aufgeführt habe. Können Sie sich Schaltflächen vorstellen, die animieren, wenn Sie über sie rollen? Icons, die Ihnen direkt persönliches Feedback geben? Der Himmel ist wirklich die Grenze.
Das ist also SVG. Ein Vektorformat, das für das Web entwickelt wurde. Schauen wir uns an, wie wir es nutzen können.
Wir werden mit einem wirklich einfachen Image arbeiten, um zu zeigen, was SVG macht.
Öffnen Sie Illustrator, beginnen Sie ein neues Dokument (Datei> Neues Dokument), geben Sie einen Namen, wenn Sie möchten, und setzen Sie das Artboard auf 300 x 300px.
Es macht kaum einen Unterschied, was Sie an dieser Stelle als Demo-Vektor verwenden, aber Sie sollten etwas relativ einfaches machen. Ich habe die Glyphe "Keine Piraten erlaubt" verwendet, die mit der Schriftart "Webdings" frei verfügbar ist (ich hätte nie gedacht, dass ich sie für irgendetwas benutzen würde!)
Gehe zum Glyphen Panel (Typ> Glyphen) Wählen Sie dann die Schriftart "Webdings" aus, um die verschiedenen verfügbaren Zeichen zu durchsuchen.
Mit dem Textwerkzeug ausgewählt, klicken Sie auf die Zeichenfläche und dann auf Doppelklick Ihr Glyphe Ihrer Wahl, um davon Gebrauch zu machen.
Wir werden jetzt diese Glyphe in Konturen umwandeln.
Hinweis: SVG unterstützt eigentlich Textobjekte, aber um die Dinge auf einer grundlegenden Ebene zu veranschaulichen, entscheiden wir uns für Pfade.
Wählen Sie die Glyphe mit Auswahlwerkzeug (V):
Dann geh zu Typ> Konturen erstellen.
Super! Wir haben jetzt ein pfadbasiertes Vektorobjekt.
Um dieses Dokument als SVG zu speichern, gehen Sie zu Datei> Speichern, oder Datei> Speichern unter… Wählen Sie im daraufhin erscheinenden Dialog einen Ort aus, geben Sie einen Dateinamen an (falls noch nicht geschehen) und wählen Sie als Format SVG:
Sie erhalten dann einen weiteren Dialog, diesmal mit einigen SVG-Optionen.
Wenn Sie diese Optionen an dieser Stelle ignorieren, wird Ihnen dies in aller Wahrheit gut tun. Die Standardeinstellungen sind alle so, wie Sie sie unter normalen Umständen wünschen.
Wir werden einige dieser Optionen etwas später behandeln, aber für den Moment klicken OK.
Wir haben eine SVG-Datei!
Wir haben die SVG-Optionen übersprungen, weil Sie ihnen nicht wirklich viel Aufmerksamkeit schenken müssen. Um gründlich zu sein, werfen wir einen Blick darauf.
Zu Beginn hätten wir im Sicherungsdialog zwei mögliche SVG-Formate auswählen können.
SVGZ ist stark komprimiert (Gezippt, Ich nehme an) Version von SVG. Es gibt eine kleinere Dateigröße, verwandelt jedoch das XML in der Datei selbst in Kauderwelsch, so dass wir die Vektoren nicht durch CSS und JavaScript manipulieren können, wenn wir möchten.
Die sich ständig verändernde Landschaft des Webs und die ständige Weiterentwicklung der Webstandards bedeuten, dass SVG ständig wächst. Sie können dies dank der ersten Option beim Speichern einer SVG-Datei sehen: SVG-Profile. Die Profilauswahl sieht derzeit so aus:
Sie bedeuten (mehr oder weniger) Folgendes:
Bald können wir hinzufügen SVG 2.0 zu dieser Liste. In der Realität sind die Nuancen dieser Profile für uns weitgehend irrelevant. SVG ist in der Lage, alle möglichen Dinge zu handhaben, aber für einfache Vektoren halten Sie sich an den aktuellen Standard von SVG 1.1, und Ihre Grafiken werden im Web, wo immer möglich, gut funktionieren.
SVG-Dateien können viel mehr als nur Vektorpfade enthalten. Textobjekte sind ein solches Beispiel und das Schriftart Mit dieser Option können Sie festlegen, wie Textobjekte behandelt werden.
Ein Teil der Schriftoption beinhaltet Subsetting. Dies ist nur relevant, wenn Sie Ihren Text nicht in Konturen konvertieren möchten.
Beim Subsetting werden Zeichendetails in die SVG-Datei eingebettet, sodass die Datei Schriftarten anzeigen kann, die auf dem System des Benutzers möglicherweise nicht vorhanden sind. Das Einbetten ganzer Schriftarten (offensichtlich) führt zu viel schwereren Dateien. Sie können jedoch auch auswählen, wie viele Glyphen eingeschlossen werden sollen.
Während wir uns mit dem Einbetten beschäftigen, können die letzten verbleibenden Optionen auch die Dateigröße beeinflussen.
Ähnlich wie bei Schriften können SVG-Dateien Bitmap-Bilder enthalten. Wo siehst du Bildstandort Wählen Sie "Einbetten", um die Bilder in Codeform in die Datei aufzunehmen, oder wählen Sie "Link", um die Bilder einfach zu referenzieren. Dies funktioniert auf ähnliche Weise wie das Platzieren von Bildern in Illustrator selbst und wirkt sich erheblich auf die Größe der Enddatei aus.
Mit dem letzten Kontrollkästchen können Sie die Illustrator-Bearbeitungsfunktionen bei Bedarf beibehalten. Dies bedeutet, dass Details zu allen Ebenen, Filtern und Effekten, Symbolen usw. beibehalten werden. Deaktivieren Sie dieses Kontrollkästchen erneut, wenn Ihre SVG für die Produktion vorbereitet ist und die Dateigröße wichtig ist.
Hinweis: Es wird empfohlen, eine funktionierende .AI-Datei für die Bearbeitung zu behalten.
Schließlich führen die drei Schaltflächen am Fuß des Optionsdialogs Folgendes aus:
Wenn Sie es nicht gewohnt sind, direkt mit dem Web, HTML, Browsern und all dem zu arbeiten, sollten Sie an dieser Stelle einige Punkte beachten.
Lassen Sie uns zunächst demonstrieren, dass Ihr Browser dieses Format perfekt verarbeiten kann. Rechtsklick Ihre neue, glänzende SVG-Datei und öffnen Sie sie mit Ihrem Standard-Webbrowser:
Ältere Browser wie Internet Explorer 8 und früher unterstützen das SVG-Format nicht und können leider nicht mitspielen.
Solange Sie einen modernen Browser verwenden, wird die SVG-Datei problemlos geöffnet und angezeigt.
Das erste, was zu beachten ist, ist, dass die SVG-Datei die von uns ursprünglich angegebenen Abmessungen beibehalten hat. Unser SVG wurde mit 300 x 300 Pixel geöffnet, das Artboard hat die äußeren Grenzen diktiert, und das Piratensymbol wird so platziert, wie es in der Mitte sein sollte.
Bisher haben wir eine SVG-Datei erstellt und in einem Browser geöffnet, um zu überprüfen, ob sie funktioniert. Jetzt ist es an der Zeit, unsere Datei innerhalb einer Webseite richtig zu verwenden.
Zunächst benötigen wir eine Webseite. Dies muss nicht komplexer sein als eine leere Datei mit der .html Dateierweiterung, gespeichert aus einem normalen Texteditor. Wir brauchen uns keine Sorgen zu machen, dass sich in dieser Datei Code befindet. Wenn Sie sich für die Grundlagen von HTML interessieren, werfen Sie einen Blick auf The Best Way to Learn HTML.
Hier ist meine Datei, die in TextEdit für Mac OS X geöffnet ist. Sie können jedoch beliebigen Text oder Code-Editor verwenden, den Sie möchten.
Diese Datei wird zwar in einem Webbrowser geöffnet, aber es ist noch etwas HTML-Markup-Code erforderlich, um die SVG-Datei einzubetten. Dafür gibt es einige Ansätze.
Accentsconagua
![]()
Erstens können wir ein Image-Tag verwenden (das Sie möglicherweise für JPG-, PNG-Dateien usw. verwenden), das auf den genauen Dateipfad in der Datei verweist src = "" Attribut. Fügen Sie dieses Snippet in Ihre HTML-Datei ein:
Vorausgesetzt, der Dateipfad ist korrekt, wird Ihre HTML-Seite in einem Browser genauso geöffnet:
Ja, ich weiß, dass der allgemeine Effekt in dieser Phase genau derselbe ist, als wenn wir die SVG direkt im Webbrowser geöffnet haben, aber jetzt haben wir viel mehr Leistung! Zum Beispiel können wir das SVG sofort vergrößern, indem Sie das verwenden width = "" Attribut:
Dieser Ansatz ist vielleicht der einfachste, hat aber seine Probleme. Einige Browser schränken aus Sicherheitsgründen ein, was Sie mit SVG tun können (z. B. mit JavaScript). Sehen wir uns Alternativen an.
Verwendung der Tag ist ähnlich, aber Sie zeigen auf den Dateipfad wie folgt:
Das Ergebnis ist genau das gleiche:
Bei Browsern, die SVG nicht unterstützen, können Sie sogar eine Warnung in den Inhalt von einfügen , Wird angezeigt, wenn das SVG nicht sein kann:
Viele Webdesigner sind sich einig, dass dieser Ansatz derzeit der zuverlässigste und flexibelste Weg ist, SVG innerhalb einer Webseite zu verwenden.
Wir haben über die XML-Herkunft von SVG gesprochen, und wenn Sie die SVG-Datei mit Ihrem Texteditor öffnen, wird Folgendes angezeigt:
Wow, was für ein Unsinn! Sobald Sie den ersten Schock überwunden haben, sollten Sie tatsächlich einen Sinn darin erkennen können. Wir können diesen XML-Code verwenden in der Reihe, indem Sie den Inhalt direkt in unsere HTML-Datei einfügen.
Wenn Sie sich etwas mit der SVG-XML-Struktur vertraut machen, können Sie Bits aus der Datei herausschneiden, wodurch die Dateigröße verbessert wird.
Fühlen Sie sich frei, um das zu entfernen Linie, die