So exportieren Sie SVG-Muster

Früher war es möglich, ein kachelbares Bild als gif oder jpg mit 72dpi auszugeben und mit CSS zu kacheln. Es ist eine gängige Praxis unter Web-Designern und seit Jahren; Es ist eine schnelle und einfache Möglichkeit, Ihrer Arbeit ein Muster oder eine Textur hinzuzufügen. Dann haben diese lästigen Körper bei Apple Retina-Displays freigegeben und bevor wir es wussten a Pixel war kein Pixel länger. Plötzlich wurden diese geliebten Muster Geschichte.

SVGs (Scaleable Vector Graphics) werden schnell zum Standard für gestochen scharfe Grafiken im Web. Sie lösen das Problem, dass separate Bilddateien für Retina-Geräte erstellt werden müssen. Sie sind wirklich lustig und einfach zu erstellen, und sie eröffnen eine Welt der Möglichkeiten ...

Schritt 1: Erstellen Sie ein Muster

Es gibt Dutzende verschiedener Anwendungen, mit denen Sie ein SVG-Muster entwerfen können. Mein Favorit ist Illustrator, also werde ich das verwenden.

Öffnen Sie Adobe Illustrator, und erstellen Sie ein neues Dokument mit 300 x 300 Pixel. Gehe dann zu Objekt> Muster> Erstellen und deine Leinwand wird sich ändern. Sie werden bemerken, dass in der Mitte Ihrer Zeichenfläche ein blaues Quadrat erscheint. Außerdem ist das Musteroptionen-Bedienfeld geöffnet.

Wir müssen eine kleine Anpassung vornehmen, bevor wir anfangen. Gehen Sie zur Musteroptionen-Leiste und deaktivieren Sie die Option " Kachel mit Kunst verschieben". (Diese Funktion ist ärgerlich, weil Sie Ihr Bildmaterial nicht innerhalb des Musterquadrats bewegen oder positionieren können. Es bewegt sich damit, wenn Sie diese Option nicht deaktivieren.)

Als nächstes ist der Himmel die Grenze für die Art von Muster, die Sie erstellen können. Standardmäßig ist das Musterquadrat auf 100px x 100px festgelegt. Sie können jede gewünschte Größe wählen. Ich habe meinen Standard verlassen.

Zeichnen Sie als nächstes ein Quadrat mit 50 x 50 Pixel. Richten Sie es mit den oberen und rechten Kanten des Quadrats aus.

Als nächstes klicken und halten Sie Ihre Maus über das Stift-Werkzeug . Es werden Unterwerkzeuge angezeigt, in denen Sie das Ankerpunkte hinzufügen-Werkzeug auswählen können. Fügen Sie von hier aus einen Ankerpunkt zur Mitte der linken und rechten Seite des Quadrats hinzu.

Wählen Sie die Ankerpunkte mit dem Direktauswahl-Werkzeug aus (halten Sie die Umschalttaste gedrückt , um beide auszuwählen). Wählen Sie dann im oberen Menü Objekt> Transformieren> Verschieben.

Bewege die beiden Punkte 20px nach rechts, um eine Art Pfeil zu bilden.

Als nächstes duplizieren Sie die Form, indem Sie sie an eine neue Position ziehen, während Sie die Alt- Taste gedrückt halten. (Oder kopieren und einfügen, wenn Sie möchten.)

Wählen Sie die neue Form und ziehen Sie sie in die linke untere Ecke des Musterquadrats.

Wenn die Form noch ausgewählt ist, schnappen Sie sich eine Ecke und drehen Sie sie um 180 Grad. (Halten Sie die Umschalttaste gedrückt, um genau 180 Grad zu fangen.)

Wählen Sie im oberen Menü Objekt> Transformieren> Verschieben und verschieben Sie die neue Form -20px.

Klicken Sie abschließend auf die Schaltfläche Kopie speichern oben im Fenster, benennen Sie das Muster und speichern Sie es, um das Muster zu vervollständigen. Eine Kopie speichern ist wichtig, wenn Sie sie später bearbeiten möchten. Dadurch müssen Sie es nicht noch einmal neu erstellen.

Schritt 2: Exportieren Sie das Muster

Sobald Sie den Mustermodus verlassen, wird das Muster automatisch als Füllung ausgewählt. Sie müssen lediglich eine Form auf der Zeichenfläche zeichnen und sie wird mit dem Muster gefüllt. (Wenn Sie aus irgendeinem Grund die Füllung der Form geändert haben, können Sie Ihr Muster im Farbfeldbedienfeld finden und es wie jede andere Füllung anwenden.)

Passen Sie als Nächstes die Größe der Form so an, dass sie die gesamte Zeichenfläche von 300 x 300 Pixel abdeckt.

Wählen Sie Datei> Speichern unter. Speichern Sie Ihre Datei als .svg.

Als Nächstes wird ein Dialogfeld angezeigt, in dem Sie aus verschiedenen SVG-Formaten und -Optionen auswählen können. Klicken Sie auf weitere Optionen in der linken unteren Ecke, um alle verfügbaren Optionen für Ihre SVG-Datei anzuzeigen.

Das typische Format ist SVG 1.1, da es das am häufigsten verwendete und am meisten unterstützte SVG-Format ist. In diesem Feld können Sie auch steuern, ob Sie die Möglichkeit zum Bearbeiten des SVG in Illustrator erhalten oder nicht, oder ob Sie Text auf einem Pfad aktivieren, was praktisch sein kann. Sie haben die Möglichkeit, das SVG als tatsächliche Datei zu verwenden, oder Sie können den Code kopieren und direkt in Ihr HTML-Dokument einfügen. Wenn Sie fertig sind, klicken Sie auf OK.

Schritt 3: Bearbeiten Sie das SVG-Muster

Öffnen Sie die .svg-Datei in einem Texteditor. Ich verwende Sublime Text, aber Sie können Notepad, Dreamweaver oder was auch immer Sie HTML-Code verwenden.

Öffnen Sie die gleiche Datei in einem Browser, damit Sie eine Vorschau aller Änderungen am Code anzeigen können.

Es gibt ein paar verschiedene Bereiche, auf die man sich konzentrieren sollte. Zuerst müssen wir die Grenzen der SVG-Datei bearbeiten, damit sie den Browser füllt.

Du wirst sehen: unten. Ändern Sie stattdessen beide Werte von 300 bis 100%. Also wird Ihr Code wie folgt aussehen:

Sie sollten noch keine Änderung bemerken. Es sollte immer noch ein Quadrat sein. Warum? Weil die Viewbox auf 300 x 300 gesetzt ist, was quadratische Dimensionen sind. Um die Breite und Höhe des Browsers zu füllen, ändern Sie den Code in Zeile 4 von viewBox = "0 0 300 300" zu viewBox = "0 0 100% 100%" .

Wenn wir den Browser aktualisieren, füllt das Muster unseren Browser von einem Ende zum anderen. Das Problem ist, was ist, wenn Sie die Größe des Musters ändern möchten? Gehst du zurück zu Illustrator und wiederholst alles noch einmal? Nein. Das ist die Schönheit, wenn Illustrator Ihren SVG-Code generiert. Sie können den Code einfach bearbeiten. Denk nicht an eine reine Grafikdatei. Stellen Sie es sich als eine Codedatei vor, die Sie manipulieren und an Ihren Willen anpassen können.

Um die Größe des Musters zu bearbeiten, suchen Sie nach in Zeile 5. Ändern Sie einfach die Werte der Breite und der Höhe auf alles, was Sie wollen. Ich würde empfehlen, es auf quadratischen Proportionen zu halten, es sei denn, Sie wollen Ihr Muster verzerren. Wenn ich die Werte auf 70 ändere, ist das Muster kleiner, füllt aber immer noch die Breite und Höhe des Bildschirms.

Wenn Sie sich den Code ansehen, sehen Sie, dass das Muster aus Polygonen besteht. Das erste Polygon hat eine Füllung von "none" (was weiß erzeugt) und der Rest hat Hex-Werte.

Um die Farben unseres Musters zu ändern, müssen wir nur die Füllwerte ändern.

Wenn Sie die Art von Person sind, die gerne kopieren und einfügen, hier ist unser endgültiger SVG-Code:

Das ist perfekt, aber es ist ein wenig unordentlich (danke Illustrator). Also ich würde empfehlen, es zu optimieren, bevor Sie es verwenden. Es gibt viele Optimierungsmöglichkeiten, aber Peter Collingridges ist einer der besten, es gibt uns diesen letzten Code:

Fazit

Die Möglichkeit, Ihre Illustrator-Farbfelder und -Muster als SVGs zu exportieren, eröffnet eine Fülle von Möglichkeiten. Sie können nicht nur ein SVG-Muster erstellen, Sie können die Datei in wenigen Minuten bearbeiten, Farben, Größen und die Darstellung der Datei selbst im Browser steuern.