Advertisement
  1. Web Design
  2. Affinity Designer

So erstellen Sie einen isometrischen Weihnachtsbaum SVG in Affinity Designer

Scroll to top
Read Time: 16 min

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem Tutorial werden wir in den Jubel der Saison einsteigen, indem wir eine SVG-Weihnachtsbaumillustration erstellen, die Sie auf jeder Website verwenden können. Wir erstellen die Illustration in Affinity Designer und nutzen dann die webspezifische SVG-Exportfunktion des Programms.

Hinweis: Bei den folgenden Schritten wird davon ausgegangen, dass Sie über grundlegende Kenntnisse mit Affinity Designer verfügen. Wenn nicht, können Sie mit unserem Kurs Affinity Designer Quick Start den Stein ins Rollen bringen.

Das Erstellen von SVG-Grafiken in Affinity Designer ist eine ziemlich unkomplizierte Angelegenheit, mit nur ein paar "Folgen", die es zu vermeiden gilt. Stellen Sie insbesondere sicher, dass Sie nirgendwo in Ihrem Dokument andere Mischmodi als „Normal“ verwenden. Wenn Sie dies tun, wird Ihr Bild teilweise gerastert, wodurch der gesamte Zweck von SVG-Grafiken zunichte gemacht wird (das "S" steht für "Scalable"). Das heißt, Sie können zwar keine verschiedenen Mischmodi verwenden, Sie können jedoch verschiedene Deckkrafteinstellungen verwenden.

Eine andere Sache, die Sie beachten sollten, ist, Ihre Formen so einfach wie möglich zu halten, damit die Dateigröße minimiert wird. Die Verwendung ausgefallener Stricharten oder Texturen führt beispielsweise zu einer enormen Dateigröße. Wir werden unsere Illustrationstechniken während dieses Tutorials einfach halten, um so SVG-freundlich wie möglich zu sein.

Lass uns anfangen!

1. Richten Sie das Dokument und das isometrische Raster ein

Erstellen Sie ein neues Dokument und wählen Sie Web aus der Dropdown-Liste Typ im Dialogfeld zur Dokumenterstellung aus. Legen Sie sowohl die Seitenbreite als auch die Seitenhöhe auf 1024px fest.

Lassen Sie uns als Nächstes unser isometrisches Raster einrichten. Gehen Sie im Menü oben in Affinity Designer zu Ansicht > Raster- und Achsen-Manager und Sie sehen ein Feld mit Rastereinstellungen. Ändern Sie diese Einstellungen:

  • Schaugitter prüfen
  • Deaktivieren Sie das Kontrollkästchen Automatisches Raster verwenden
  • Schalten Sie den Rastermodus von Basic auf Advanced um
  • Wählen Sie aus der Dropdown-Liste Rastertyp die Option Isometrisch
  • Belassen Sie die Abstandseinstellung bei 64px
  • Ändere die Divisionen auf 8
Isometric grid in Affinity DesignerIsometric grid in Affinity DesignerIsometric grid in Affinity Designer
Isometrisches Raster in Affinity Designer

Wie wir das isometrische Gitter beschreiben

In diesem Tutorial platzieren wir Pfadknoten auf dem isometrischen Raster, um die Formen zu erstellen und anzupassen, die unseren Weihnachtsbaum bilden. Daher werden wir einige Terminologien definieren, um unser Raster zu beschreiben. Wenn ich also die Größe einer Form oder die Entfernung festlege, die sich ein Knoten auf dem Raster bewegen muss, wissen Sie, wovon ich spreche.

Wenn Sie sich das Raster ansehen, sehen Sie, dass es mehrere dickere Linien hat, die große Rauten bilden, und innerhalb dieser Rauten gibt es dünnere Linien, die kleinere Rauten bilden. Wir bezeichnen die Rauten, die durch dickere Linien auf dem Gitter gebildet werden, als große Gitterrauten und ihre kleineren Gegenstücke als kleine Gitterrauten. Wenn wir uns auf eine einzelne Seite einer dieser großen Rauten beziehen, verwenden wir die Formulierung große Gittereinheit oder große Gitterlinie. Wir verwenden eine kleine Rastereinheit oder eine kleine Rasterlinie für die kleinste Rastermessung.

Beachten Sie, dass Sie beim Arbeiten mit dem isometrischen Raster sicherstellen müssen, dass das Fangen aktiv ist, um Knoten genau darauf zu platzieren, indem Sie das Magnetsymbol in der oberen Symbolleiste von Affinity Designer drücken.

2. Erstellen Sie den ersten Baumabschnitt

Wie Sie im Vorschaubild unseres fertigen Baums zu Beginn dieses Tutorials sehen können, wird der Blattbereich aus vier verschiedenen Grünabschnitten bestehen. Wir beginnen damit, den obersten Abschnitt des Baums zu zeichnen, der auch der kleinste ist.

Verwenden Sie das Rechteck-Werkzeug (Tastenkombination M), um ein Rechteck von ungefähr der Größe zu zeichnen, die Sie in der Abbildung unten sehen. Dies kann ziemlich grob erfolgen, da wir die Form Knoten für Knoten ändern werden. Damit Sie die Knoten des Rechtecks ​​ändern können, wählen Sie das Rechteck aus und klicken Sie auf die Schaltfläche In Kurve konvertieren, die Sie in der Kontextleiste über Ihrer Arbeitsfläche sehen.

Stellen Sie sicher, dass das Rechteck keinen Rahmen hat und stellen Sie die Füllfarbe auf #2F5628 ein.

Um Hex-Farbcodes einfügen zu können, muss der RGB-Hex-Farbwähler im Farbstudio-Bedienfeld aktiv sein. Dieses Bedienfeld sollte standardmäßig geöffnet sein und sich auf der rechten Seite der Benutzeroberfläche befinden, aber wenn nicht, können Sie es öffnen, indem Sie zu Ansicht > Studio > Farbe gehen. Klicken Sie auf das kleine Dropdown-Menü oben rechts im Farbbedienfeld, wählen Sie Schieberegler und dann in der Dropdown-Liste im Bedienfeld die Option RGB-Hex.

Beachten Sie, dass es beim Bearbeiten von Formen möglicherweise einfacher ist, in der Gliederungsansicht zu arbeiten, damit Sie Ihre Knoten und Pfade klarer sehen können. Um dies zu aktivieren, gehen Sie zu Ansicht > Ansichtsmodus > Gliederung. Um zur normalen Ansicht zurückzukehren, wählen Sie Vector im selben Menü.

Wählen Sie mit dem Knotenwerkzeug (Tastenkombination A) einen der beiden oberen Knoten des Rechtecks ​​aus. Dieser Knoten wird der oberste Knoten unseres ersten Baumabschnitts. Ziehen Sie es zu einem Schnittpunkt zwischen großen Rasterrauten etwa auf halber Höhe der Leinwand und dreieinhalb großen Rasterrauten vom oberen Rand der Leinwand.

Wählen Sie als Nächstes den Knoten aus, der dem gerade verschobenen Knoten gegenüberliegt – dieser wird zum unteren Knoten des Baumabschnitts. Ziehen Sie den ausgewählten Knoten so, dass er vertikal direkt unter dem oberen Knoten liegt, aber zwei große Rasterrauten darunter.

Schauen Sie sich nun diesen unteren Knoten an und folgen Sie der großen Rasterlinie, auf der er sich befindet, nach oben und links um eine große Rastereinheit. Verschieben Sie den linken Knoten an diesen Punkt. Machen Sie dasselbe auf der rechten Seite für den rechten Knoten. Sie sollten die unten abgebildete Form erhalten. Achten Sie darauf, wo die Knoten auf das Raster fallen und stellen Sie sicher, dass Ihre Form gleich aussieht.

Und überprüfen Sie, ob es relativ zur oberen linken Ecke des Dokuments positioniert ist, wie hier gezeigt:

Jetzt fügen wir auf der rechten Seite dieses Baumabschnitts eine Hervorhebungsfarbe hinzu, damit es so aussieht, als würde Licht darauf treffen. Wählen Sie Ihre vorhandene Form aus und aktivieren Sie die Schaltfläche In die Auswahl einfügen rechts in der oberen Symbolleiste. Zeichnen Sie dann ein Rechteck ohne Rand in einer Größe, die die rechte Hälfte des Baumabschnitts abdeckt, und setzen Sie die Füllfarbe auf #386925. Das Rechteck sollte innerhalb der Baumabschnittsform verschachtelt sein, wie Sie im Ebenenbedienfeld der folgenden Abbildung sehen können:

Um diesen Baumabschnitt abzuschließen, werden wir unten einen kleinen Schneeschnitt hinzufügen. Verwenden Sie das Stiftwerkzeug, um eine Form zu zeichnen, die eine einzelne kleine Rastereinheit hoch ist und entlang der unteren linken Seite des Abschnitts verläuft. Es sollte innerhalb des Baumabschnitts verschachtelt sein, damit jeder Überlauf abgeschnitten wird. Füllen Sie es mit der Farbe #A8BCA7.

Beachten Sie, dass wir diesen Schneebesatz hellgrün und nicht vollständig weiß machen, damit er nicht mit einem weißen Hintergrund verschmilzt, auf dem er platziert werden könnte.

Fügen Sie der oberen Linie der Schneetrimmform einige zusätzliche Knoten hinzu und ziehen Sie sie leicht nach oben oder unten, um so einige Kurven hinzuzufügen. Sie müssen währenddessen wahrscheinlich das Einrasten vorübergehend deaktivieren, indem Sie auf das Magnetsymbol in der oberen Symbolleiste von Affinity Designer klicken.

Duplizieren Sie nun diese Schneeschnittform und spiegeln Sie sie horizontal, was Sie tun können, indem Sie auf die Schaltfläche Horizontal spiegeln in der oberen Symbolleiste klicken. Positionieren Sie es in einer gespiegelten Position auf der rechten Seite der drei. Wählen Sie dann beide Formen aus und klicken Sie auf die Schaltfläche Hinzufügen in der oberen Symbolleiste, um sie zu einer einzigen Form zu kombinieren.

3. Erstellen Sie die anderen Baumabschnitte

Der obere Baumabschnitt ist jetzt fertig, sodass wir ihn duplizieren und einige kleine Änderungen vornehmen können, um die anderen drei Abschnitte zu erstellen. Duplizieren Sie den Abschnitt und verschieben Sie ihn um eineinhalb große Rasterrauten nach unten. Stellen Sie sicher, dass es sich hinter dem oberen Abschnitt im Ebenenbedienfeld befindet.

Jetzt werden wir die Knoten dieses zweiten Baumabschnitts manipulieren, um ihn größer als den ersten Abschnitt zu machen. Ziehen Sie zunächst seinen obersten Knoten nach oben, sodass er eine halbe große Rastereinheit unter dem obersten Knoten des ersten Baumabschnitts liegt. Ziehen Sie dann den linken Knoten nach oben und links entlang der Rasterlinie, auf der er bereits ist, bis Sie die nächste sich kreuzende große Rasterlinie treffen. Machen Sie dasselbe für den rechten Knoten.

Anzeigen des zweiten Baumabschnitts im Ansichtsmodus "Gliederung"

Die Kanten des zweiten Baumabschnitts sollten im gleichen Winkel wie der erste Abschnitt verlaufen. Sie können dies überprüfen, indem Sie bestätigen, dass die Linie alle zwei kleinen Rasterrauten durch einen Gitterschnittpunkt verläuft.

Grid intersection pointsGrid intersection pointsGrid intersection points
Gitterschnittpunkte

Überprüfen Sie und stellen Sie sicher, dass Ihr helleres verschachteltes Rechteck die rechte Seite noch vollständig bedeckt - wenn nicht, müssen Sie es möglicherweise ein wenig vergrößern. Passen Sie den Schneeschnitt an, um den unteren Teil des zweiten Baumabschnitts abzudecken, indem Sie die äußersten Knoten an die Kanten der Form ziehen und dann der Form einige weitere Knoten hinzufügen, um zusätzliche Kurven einzufügen.

Wiederholen Sie den Vorgang noch zweimal, um den dritten und vierten Baumabschnitt zu erstellen. Jedes Mal sollten Sie:

  • Verschieben Sie den Abschnitt um eineinhalb große Rasterrauten nach unten
  • Ziehen Sie den oberen Knoten nach oben, um eine halbe große Rasterraute tiefer als der obere Knoten des vorherigen Abschnitts zu sein
  • Ziehen Sie die linken und rechten Knoten entlang ihrer Rasterlinien, bis Sie die nächste sich kreuzende große Rasterlinie erreichen
  • Stellen Sie sicher, dass das helle Rechteck die gesamte rechte Seite des Baumabschnitts bedeckt
  • Stellen Sie den Schneebesatz so ein, dass er den unteren Teil des Baumabschnitts auf beiden Seiten bedeckt

4. Erstellen Sie den Kofferraum

Die Hauptform des Blattabschnitts unseres Baumes ist jetzt fertig, damit wir mit dem Erstellen des Stamms fortfahren können. Zeichnen Sie mit dem Stiftwerkzeug ein Rechteck mit einer Breite von einer halben großen Rasterraute, einer Höhe von etwa anderthalb großen Rasterrauten, das horizontal relativ zum Baum zentriert und hinter allen anderen vorhandenen Formen positioniert ist.

Fügen Sie an der untersten Kante einen zusätzlichen Knoten hinzu, mit dem Sie einen spitzen Boden erstellen können. Dieser untere Knoten sollte eine große Rasterraute unter dem tiefsten Punkt des Baumes platziert werden, und die beiden unteren Kanten der Stammform sollten entlang von Rasterlinien verlaufen. Setzen Sie die Füllfarbe des Stamms auf #322B1E. Erstellen Sie schließlich innerhalb der Stammform ein Rechteck, um seine rechte Hälfte mit einer Füllfarbe von #41351E zu bedecken.

Ihr Endergebnis sollte so aussehen:

5. Schatten hinzufügen

Als nächstes werden wir Schatten erzeugen, die auf jeden Baumabschnitt sowie auf den Stamm durch den darüber liegenden Baumabschnitt geworfen werden.

Verwenden Sie auf der linken Seite des Baums das Stiftwerkzeug, um drei schräge Rechtecke zu zeichnen, eines unter jedem der oberen drei Baumabschnitte. Diese Rechtecke sollten über ihre Länge zwei kleine Rasterrauten sein und mit der Farbe #203F1A gefüllt sein. Duplizieren Sie die Formen, spiegeln Sie sie horizontal und positionieren Sie sie spiegelverkehrt auf der rechten Seite. Ändern Sie die Füllfarbe dieser Formen in #12510E.

Dies sollte Ihnen Schatten unter jedem Baumabschnitt wie folgt geben:

Erstellen Sie mit dem gleichen Ansatz zwei schräge Rechteckformen auf dem Stamm, die jeweils eineinhalb kleine Rastereinheiten hoch sind. Die Form ganz links sollte die Farbe #231D13 und die Form ganz rechts #302511 haben.

Beachten Sie, dass ich ursprünglich die Farben bestimmt habe, die hier richtig als Schatten aussehen würden, indem ich die Formen auf dieselbe Füllfarbe wie die Seite des Baums gesetzt habe, auf der sie sich befanden, und sie dann auf den Mischmodus Multiplizieren gesetzt habe. Wie bereits erwähnt, können wir Multiply jedoch nicht in einem SVG-Bild verwenden. Um dies zu umgehen, habe ich den Farbwähler verwendet, um die Farbe der Schatten abzutasten. Ich habe dann die Füllfarbe der Schattenformen in diese abgetastete Farbe geändert und den Mischmodus wieder auf Normal gesetzt, um am Ende das gleiche Aussehen zu erzielen, aber auf SVG-freundliche Weise.

Nun zum Schatten, den der Baum auf den Boden wirft. Erstellen Sie unter allen anderen Formen eine Raute mit der gleichen Breite wie der unterste Baumabschnitt. Seine Kanten sollten alle entlang von Rasterlinien verlaufen und sowohl horizontal als auch vertikal relativ zum Stamm zentriert sein. Machen Sie seine Farbe schwarz und stellen Sie sie auf 20% Deckkraft ein. Auch wenn wir Multiply nicht verwenden können, um Schatten in unserer SVG-Illustration zu erzeugen, können wir die Deckkraft sicher verwenden.

6. Dekorativer Globus

Unsere gesamte Baumform ist nun fertig und wir sind bereit, sie zu dekorieren. Dazu erstellen wir eine Kugelform, deren Größe wir für die Oberseite der Baumdekoration und für kleinere Dekorationen um den Baum herum ändern können. Wir werden es zunächst in doppelter Größe erstellen, damit es einfacher ist, das Raster zum Ausrichten aller Formen zu verwenden, aus denen der Globus besteht.

Achten Sie beim Erstellen der folgenden Formen genau darauf, wo die Knoten auf das Raster fallen.

Erstellen Sie zunächst eine Rautenform, die ein Viertel der Größe einer großen Rasterraute hat, mit der Füllfarbe #FFEF00. Dies wird die flache Spitze des Globus bilden.

Fügen Sie diese beiden Formen hinzu, um die Kurve unter dem oberen Rand des Globus zu erstellen – die Farbe der linken Form ist #F1C906 und die Farbe der rechten Form ist #FFE300.

Erstellen Sie die Seiten des Globus mit diesen Formen - die linke Seite ist in der Farbe #E9BE1F und die rechte Seite in der Farbe #FFDB1F.

Fügen Sie die unteren Kurven mit diesen beiden Formen hinzu, gefärbt #DCAF2E links und #ECCA3C rechts.

Verwenden Sie schließlich das Stiftwerkzeug, um eine einzelne Form zu zeichnen, die der Form des gesamten Globus entspricht. Geben Sie ihm die Füllfarbe #FFDB1F und setzen Sie es dann hinter alle anderen Formen. Dies stellt sicher, dass Sie keine Hintergrundfarben in winzigen Lücken zwischen den Formen sehen, aus denen der Globus besteht.

7. Baumkronendekoration

Jetzt ist Ihr Globus fertig und Sie können die Größe ändern, um ihn auf Ihrem Baum platzieren zu können. Wählen Sie alle Formen aus und gruppieren Sie sie für eine einfache Größenänderung. Sie können vor der Größenänderung ein Duplikat dieser Gruppe erstellen, wenn Sie sie als Backup behalten möchten.

Wir möchten den Globus auf die Hälfte verkleinern. Wählen Sie daher die soeben erstellte Gruppe aus und suchen Sie das Transformieren-Bedienfeld auf der rechten Seite der Affinity Designer-Benutzeroberfläche. Wenn es noch nicht geöffnet ist, gehen Sie zu Ansicht > Studio > Transformieren. Geben Sie im Feld W (Breite) des Transform-Panels /2 am Ende des aktuellen Werts ein und drücken Sie dann die EINGABETASTE. Dadurch wird die aktuelle Breite halbiert.

Machen Sie dasselbe im Feld H (Höhe), um die Höhe zu halbieren.

Ihr halbgroßer Globus ist einsatzbereit, also zentrieren Sie ihn so oben auf dem Baum.

8. Kleinere Globusdekorationen

Duplizieren Sie die Dekoration, die Sie gerade auf der Baumkrone platziert haben, und halbieren Sie ihre Größe erneut, indem Sie /2 am Ende der H- und W-Felder des Transformieren-Bedienfelds hinzufügen. Jetzt haben wir eine kleinere gelbe Kugel, die wir auf den Hauptkörper unseres Baumes legen können, und alles, was wir brauchen, sind ein paar zusätzliche Farben, um unsere Dekorationen lebendiger zu machen. Machen Sie drei zusätzliche Duplikate des kleineren Globus, damit wir sie in blaue, violette und rote Versionen umwandeln können.

Ändere die Farben von drei neuen Globen, damit du Folgendes erhältst:

Der blaue Globus verwendet diese Farben:

  • Oben: #23BEDA
  • Linke obere Kurve: #0099B4
  • Rechte obere Kurve: #22AED3
  • Linke Seite: #18809C
  • Rechte Seite: #1E98B0
  • Linke untere Kurve: #1A6883
  • Rechte untere Kurve: #0D8197
  • Unterlage: #18809C

Der violette Globus verwendet diese Farben:

  • Oben: #9B23DA
  • Linke obere Kurve: #7100B4
  • Rechte obere Kurve: #8B22D3
  • Linke Seite: #52189C
  • Rechte Seite: #721EB0
  • Linke untere Kurve: #401A83
  • Rechte untere Kurve: #670D97
  • Unterlage: #33189C

Der rote Globus verwendet diese Farben:

  • Oben: #DA3623
  • Linke obere Kurve: #B4001B
  • Rechte obere Kurve: #D33522
  • Linke Seite: #9C1B18
  • Rechte Seite: #B01E1F
  • Linke untere Kurve: #831C1A
  • Rechte untere Kurve: #97250D
  • Unterlage: #9C1B18

Wenn diese kleineren Kugeln jetzt fertig sind, können Sie sie um Ihren Baum herum platzieren, um sie wie folgt zu dekorieren:

9. Kleine quadratische Dekorationen

Jetzt werden wir einige letzte kleinere Dekorationen hinzufügen, um zusätzliche Details zu erzielen. Verwenden Sie das Stiftwerkzeug, um diese Form mit der Füllfarbe #FFDB1F zu zeichnen:

Beachten Sie, dass seine Kanten dem gleichen Winkel folgen wie die Außenkanten der Baumabschnitte.

Wie bei unserem Globus wird diese Form tatsächlich in doppelter Größe gezeichnet, was es wiederum einfacher macht, Knoten auf dem Raster zu platzieren. Verwenden Sie das Bedienfeld Transformieren, um seine Größe zu halbieren, wie wir es zuvor getan haben, indem Sie /2 am Ende der Felder H und W hinzufügen. Die Ober- und Unterkante der Form sollten nun eine kleine Rastereinheit lang sein.

Machen Sie drei Duplikate der Form und färben Sie sie #1E98B0 für Blau, #721EB0 für Lila und #831C1A für Rot. Duplizieren Sie alle vier Formen und spiegeln Sie sie horizontal. Sie sollten jetzt insgesamt acht Formen haben.

Nehmen Sie diese Formen und verteilen Sie sie um Ihren Baum. Verwenden Sie Formen, deren Winkel mit der Außenkante der Seite des Baumes übereinstimmen, auf der Sie sie platzieren.

Und das ist es! Unser Weihnachtsbaumbild ist fertig.

10. Als SVG exportieren

Jetzt ist unser Design fertig und wir bereiten es für die Verwendung im Web als SVG vor.

Zuerst müssen wir das Dokument auf die gleichen Abmessungen wie unseren Baum ändern, damit der viewbox-Parameter unseres SVG auf die richtige Größe eingestellt wird. Wenn wir jetzt exportieren, wäre die viewbox auf 1024x1024 gesetzt, was bedeutet, dass überall, wo Sie das SVG-Weihnachtsbaum verwenden, große Lücken in beiden Größen vorhanden sind, genau wie in unserem Dokument jetzt.

Stellen Sie sicher, dass auf der Leinwand nichts ausgewählt ist, und sehen Sie sich dann die Kontextsymbolleiste oben in der Affinity Designer-Benutzeroberfläche an, und Sie sollten die Schaltfläche Dokument einrichten sehen. Klicken Sie darauf und ein Feld wird angezeigt, in dem Sie Ihre Dokumentabmessungen ändern können. Stellen Sie 280px für die Breite und 568px für die Höhe ein. Solange Sie Ihre Formen sorgfältig platziert haben, sollten diese Dokumentabmessungen für Sie funktionieren. Stellen Sie sicher, dass An Seite verankern ausgewählt ist und nicht Neu skalieren, und drücken Sie dann OK.

Unmittelbar nach der Neuskalierung wird Ihr Baum wahrscheinlich nicht zentriert. Um dies zu beheben, wählen Sie alles im Dokument mit STRG + A aus, gruppieren Sie es mit STRG + G, wählen Sie diese Gruppe aus und ziehen Sie sie in eine zentrierte Position.

Gehen Sie nun zu Datei > Exportieren und wählen Sie in dem sich öffnenden Feld die Registerkarte SVG. Stellen Sie sicher, dass die voreingestellte SVG (für Web) ausgewählt ist.

Stellen Sie außerdem sicher, dass die Meldung angezeigt wird (Nichts wird gerastert). Wenn die Meldung stattdessen anzeigt, dass etwas gerastert wird, gehen Sie Ihre Arbeit durch und stellen Sie sicher, dass Sie keine Formen versehentlich auf einen anderen Mischmodus als Normal eingestellt haben.

Wenn Sie fertig sind, klicken Sie auf Exportieren und speichern Sie Ihre SVG.

11. Verwenden Ihres SVG

Jetzt haben Sie Ihre SVG-Datei fertig. Schauen wir uns einige Möglichkeiten an, wie Sie sie verwenden können.

Der einfachste Weg ist, es einfach wie jedes andere Bild in Ihren HTML-Code zu laden, mit Code wie diesem:

Das Schöne an SVG ist jedoch, dass Sie auch den Inhalt der SVG-Datei nehmen und direkt in Ihren HTML-Code einfügen können, um das Bild inline zu verwenden.

Öffnen Sie dazu Ihre SVG-Datei in einem Texteditor und kopieren Sie alles von <svg... bis zum Ende der Datei. Fügen Sie diesen Code an einer beliebigen Stelle im Hauptteil eines HTML-Dokuments ein und das Bild wird dort angezeigt. Beachten Sie, dass Sie das SVG möglicherweise auch mit einem div umschließen möchten, das Sie formatieren können, um die Größe und Position des Bildes zu steuern.

Um diesen Ansatz in Aktion zu sehen, sehen Sie sich dieses Beispiel auf CodePen an:

Einpacken

So können Sie mit Affinity Designer eine SVG-Illustration erstellen! Der Prozess unterscheidet sich nicht allzu sehr von anderen Designarten in Affinity Designer, mit den Vorbehalten müssen Sie nur auf nicht standardmäßige Mischmodi und übermäßig komplexe Formen achten. Der Bedarf an flachen Farben und die Vorliebe für einfache Formen machen isometrische Illustrationen besonders gut für SVG geeignet.

Um mehr über die Verwendung von Affinity Designer zu erfahren, lesen Sie unsere Tutorials und Kurse, und wenn Sie schon dabei sind, schauen Sie sich auch unsere SVG-Tutorials und Kurse an.

Ähnliche Links:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.