Ein praktischer Leitfaden für SVG- und Design-Tools

Ein gutes Verständnis von SVG ist eine seltene Fähigkeit. Überraschenderweise wird SVG oft nur als ein weiteres Bildformat behandelt. Wir verwenden SVG wegen seiner Skalierbarkeit und kleineren Dateigröße, aber in Wirklichkeit ist SVG so viel mehr!

In diesem Artikel werde ich drei der beliebtesten Designwerkzeuge beleuchten: Adobe Illustrator, Sketch und Figma. Es sind auch andere Tools verfügbar, die SVG unterstützen, die möglicherweise andere Funktionalitäten haben und andere Lösungen implementieren.

Hinweis : Sofern nicht anders angegeben, bezieht sich der Inhalt dieses Artikels auf SVG 1.1 2nd Edition. Einige der unten diskutierten Punkte würden auf SVG 2 nicht zutreffen, es hat jedoch noch nicht den Empfehlungsstatus erreicht, sodass SVG 1.1 die aktuellste Spezifikation bleibt.

Warum sollten Sie sich mit Design-Tools beschäftigen?

SVG ist eine XML-basierte Auszeichnungssprache und kann wie jede andere Programmiersprache in einem Texteditor geschrieben und bearbeitet werden. Im Gegensatz zu JPG- oder PNG-Dateien benötigen wir also theoretisch keine GUI-Software, um SVG zu erstellen. In den allermeisten Fällen ist die Verwendung von Grafikdesignanwendungen jedoch unvermeidlich.

Das Arbeiten mit komplizierten Formen und Grafiken in einem textbasierten Format ist durchaus möglich, aber normalerweise sehr schwierig und mühsam. Daher ist es üblich, Anwendungen wie Adobe Illustrator, Sketch oder Figma zu verwenden, um Grafiken visuell zu entwerfen und sie dann in ein SVG-Format zu exportieren.

Egal, ob Sie ein codierender Designer oder ein designbewusster Entwickler sind, gute Kenntnisse im Umgang mit SVG erfordern ein wenig Wissen auf beiden Seiten: Design-Tools und die SVG-Sprache selbst. Um die Beziehung zwischen den beiden besser zu verstehen, werfen wir einen genaueren Blick darauf, was Grafikdesign-Apps zu bieten haben und wie sich ihre Funktionen auf SVG übertragen lassen.

Grundformen

Viele Vektorgrafiken bestehen aus wenigen Grundformen – gruppiert, transformiert und miteinander kombiniert. Die folgende Tabelle zeigt, welche Formwerkzeuge in Illustrator, Sketch und Figma verfügbar sind und als welche SVG-Elemente sie exportiert werden.

Ellipsen und Kreise

Eine der Grundformen in jedem Designwerkzeug ist eine Ellipse. In SVG finden wir ein passendes <ellipse /> -Element, definiert durch die Koordinaten des Ellipsenzentrums ( cx und cy ) und zwei Radien ( rx und ry ).

So sieht eine Ellipse in SVG aus:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

Die ganz besondere Art der Ellipse ist ein Kreis. Ein Kreis ist eine Ellipse mit gleichen Radien rx und ry . SVG hat ein eigenes <circle /> -Element, das ein Attribut weniger benötigt, da nur ein Radius berücksichtigt werden muss:

 <circle cx="400" cy="300" r="250"/>

Im Falle von Ellipsen und Kreisen funktionieren alle Designwerkzeuge gleich: Das Ellipse-Werkzeug in Illustrator, das Oval -Werkzeug in Sketch und das Ellipse -Werkzeug in Figma erzeugen alle das Element <ellipse /> , es sei denn, die Radien sind gleich: In solchen Fällen werden wir am Ende mit ein <circle /> -Element.

Rechtecke und abgerundete Rechtecke

Eine weitere Grundform, die allen Designwerkzeugen gemeinsam ist, ist ein Rechteck. Bei allen Designwerkzeugen erzeugt die Verwendung eines Rechteckwerkzeugs ein <rect /> -Element in SVG. Ein grundlegendes <rect /> wird durch 4 Attribute definiert: seine x und y Koordinaten sowie seine Breite und Höhe:

 <rect x="150" y="100" width="500" height="400"/>

Beachten Sie, dass, während die Position von <ellipse /> und <circle /> durch ihre geometrischen Mittelpunkte definiert wird, die Position eines <rect /> durch die Koordinaten seiner oberen linken Ecke definiert wird.

Neben einfachen Rechtecken verwenden wir häufig Rechtecke mit abgerundeten Ecken. In allen drei Designwerkzeugen können Sie ein Rechteck in ein abgerundetes Rechteck umwandeln, indem Sie ihm im Inspektor oder im Bedienfeld „ Eigenschaften “ einen Randradius zuweisen.

Darüber hinaus gibt es in Sketch und Illustrator Werkzeuge zum Erstellen abgerundeter Rechtecke ( Rounded Rectangle Tool in Illustrator und Rounded Tool in Sketch). Es gibt jedoch keinen Unterschied zwischen einem normalen Rechteck mit einem angewendeten Radius und einem abgerundeten Rechteck, das mit einem Werkzeug für abgerundete Rechtecke gezeichnet wurde.

Daher wird unabhängig von der Erstellung ein abgerundetes Rechteck mit der folgenden Syntax exportiert:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

In diesem Fall ist rx ein Attribut, das für den Radius der abgerundeten Ecken verantwortlich ist:

Abgerundete Rechtecke mit elliptischen Ecken

Ein wesentlicher Unterschied zwischen Design-Tools und SVG besteht darin, wie Radien definiert werden. In allen von uns betrachteten Designwerkzeugen wird der Randradius durch eine einzige Variable definiert. Wir können uns Randradien als kleine Kreise vorstellen, die verwendet werden, um die Ecken unserer Rechtecke zu maskieren:

Inzwischen können in SVG Randradien durch zwei Attribute definiert werden: rx (wie im obigen Beispiel) und ry . Sie ermöglichen es uns, Rechtecke mit elliptischen Ecken zu erstellen. Sie können sich solche abgerundeten Ecken als Ellipsen vorstellen, die als Masken anstelle von Kreisen verwendet werden:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

In diesem Fall bietet Ihnen SVG also mehr Möglichkeiten als Designwerkzeuge.

Hinweis : Auch wenn es nicht direkt mit dem Thema dieses Artikels zusammenhängt, ist es erwähnenswert, dass der oben beschriebene Unterschied sowohl für SVG als auch für HTML/CSS gilt. Die CSS-Eigenschaft border-radius , die zum Gestalten von Knoten wie divs und spans verwendet wird, ermöglicht auch das Erstellen elliptischer Ecken. Unten sehen Sie ein Beispiel.

 border-radius: 10px 5% / 20px 25em 30px 35em;

Werte vor dem Schrägstrich ( / ) sind horizontale Radien (entspricht rx ) und Werte nach dem Schrägstrich sind vertikale Werte (entspricht ry ).

Abgerundete Rechtecke mit mehreren Radien

In Design-Tools kann, genau wie in CSS, jede der Ecken eines Rechtecks ​​separat gesteuert werden. Mit anderen Worten, jede Ecke kann ihren eigenen Radius haben (oder überhaupt keinen Radius). Eine solche Operation ist für ein <rect /> -Element in SVG nicht möglich. Jedes <rect /> -Element hat nur ein rx und ein ry Attribut. Wenn Sie ein Rechteck erstellen, an dessen Ecken mehrere Radien angewendet werden, generiert das Designtool ein <path /> -Element anstelle eines <rect /> -Elements. Wir werden im nächsten Abschnitt mehr über ein <path /> -Element sprechen.

Glatte Ecken

Eine der interessanten Funktionen, die vor nicht allzu langer Zeit von Sketch und Figma eingeführt wurden, sind glatte Ecken. Kurz gesagt, glatte Ecken verwenden einen unregelmäßigen Randradius, um ein Ergebnis zu erzielen, das natürlicher und glatter aussieht. Die häufigste Anwendung von glatten Ecken sind App-Symbole und andere abgerundete Elemente auf iOS. Apple verwendete bis iOS6 „normale“ abgerundete Ecken auf seiner mobilen Plattform und wechselte dann im Rahmen der großen Neugestaltung, die 2013 eingeführt wurde (iOS7), zu dem, was wir heute „glatte“ Ecken nennen.

In Sketch können Sie einen glatten Eckeneffekt erzielen, indem Sie im Inspektor zwischen runden Ecken und glatten Ecken wechseln. Figma gibt Ihnen noch mehr Kontrolle über Ihre Ecken, da Sie mit dem Grad der Glättung im Menü Eckenglättung manipulieren können.

Leider kann keines davon einfach in SVG übersetzt werden, da SVG das Konzept glatter Ecken überhaupt nicht kennt. Es gibt auch einen wichtigen Unterschied zwischen Sketch und Figma, wenn Sie versuchen, ein Rechteck mit glatten Ecken in SVG zu exportieren.

Figma ignoriert die glatten Ecken und exportiert ein Rechteck als reguläres <rect /> -Element mit abgerundeten Ecken. Sketch hingegen exportiert ein Rechteck mit glatten Ecken als <path /> , der versucht, die wahre Form glatter Ecken nachzubilden. Figma gibt uns also eine schlechtere Genauigkeit, um ein Rechteck ein Rechteck zu halten, während Sketch auf maximal mögliche Genauigkeit auf Kosten der Semantik und größerer Dateigröße abzielt. Wenn Sie besser verstehen möchten, was dieser Unterschied bedeutet, werden wir etwas später näher auf die Vor- und Nachteile der Beibehaltung grundlegender Formen eingehen.

Linien

Der nächste grundlegende Elementtyp ist eine Linie. In diesem Fall bezeichnen wir eine Linie als eine einzelne gerade Linie, die von Punkt A nach Punkt B verläuft. Illustrator, Sketch und Figma bieten alle ihre eigenen Linienwerkzeuge zum Zeichnen von Linien. In SVG haben wir ein <line /> -Element. Vier seiner Attribute sind erforderlich: die Koordinaten seines Startpunkts und die Koordinaten seines Endpunkts:

 <line x1="100" y1="100" x2="200" y2="200"/>

Wenn es um den Export geht, exportieren Illustrator und Figma Linien nach Möglichkeit als <line /> -Elemente, während Sketch Linien immer zu <path /> -Elementen berechnet.

Polylinien

Werfen wir nun einen Blick auf Polylinien. Polylinie ist eine zusammenhängende Reihe gerader Linien. Polylinien haben keine dedizierten Werkzeuge in den Entwurfswerkzeugen. Sie können mit einem Zeichenstift-Werkzeug (in Illustrator und Figma ) oder mit einem Vektor -Werkzeug (in Sketch) gezeichnet werden.

In SVG werden Polylinien mit einem <polyline /> -Element definiert. <polyline /> wird mit einem points -Attribut gezeichnet, bei dem es sich um eine Liste von Koordinaten handelt, die alle Punkte definieren, die eine Polylinie bilden. Schauen wir uns ein Beispiel einer Polylinie an, die aus drei Segmenten und vier Punkten besteht:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator und Sketch übersetzen Polylinien in <polyline/> -Elemente, während Figma Polylinien als <path /> s exportiert.

Pfeile

In allen drei Werkzeugen können Sie die Enden der Linien steuern, um sie in Pfeile und dergleichen zu verwandeln. Und alle drei Tools exportieren solche Linien als <path /> s, selbst wenn dieselben Formen ohne die angewendeten Kappen in <line /> s oder <polyline /> s übersetzt würden. Liegt es daran, dass SVG keine Pfeile unterstützt? Nicht genau.

Tatsächlich enthält die SVG-Spezifikation anpassbare Linienenden, die als Markierungen bekannt sind. Keines der von uns erwähnten Design-Tools verwendet jedoch Markierungen in dem von ihnen generierten SVG.

<marker> ist ein separates SVG-Element, das innerhalb von <defs> definiert und dann auf <line> -, <polyline> - und <path> -Elementen mit Markierungsattributen verwendet werden kann: marker , marker-start , marker-mid und marker-end . Wenn Sie mehr über diese Attribute erfahren möchten, empfehle ich Ihnen, sich die offizielle W3C-Dokumentation anzusehen.

Polygone und Sterne

Die letzte Grundform, die wir uns ansehen werden, ist ein Polygon. Polygon ist eine geschlossene Form aus geraden Linien, zB Stern oder Sechseck. Sie können es sich auch wie eine geschlossene Polylinie vorstellen. Die Syntax eines <polygon /> -Elements in SVG ist eigentlich dieselbe wie die einer <polyline /> . Der einzige Unterschied zwischen den beiden besteht darin, dass im <polygon /> der letzte Punkt auf der Liste immer mit dem ersten Punkt verbunden wird, um ein <polygon /> zu einer geschlossenen Form zu machen.

Einige Polygone sind regelmäßige Polygone. Das Besondere an regelmäßigen Polygonen ist, dass alle Seiten und Winkel gleich sind. Um regelmäßige Polygone wie ein Sechseck oder Fünfeck zu zeichnen, können Sie ein Polygon -Werkzeug verwenden, das in Illustrator, Sketch und Figma gleich ist. Polygon- Werkzeuge in Illustrator und Sketch generieren <polygon /> -Elemente in SVG. In Figma hingegen führen alle Formen, die mit einem Polygon -Werkzeug erstellt wurden, zu <path /> -Elementen.

Alle drei Design-Tools verfügen außerdem über dedizierte Star -Tools zum Zeichnen von Sternen. Wenn es jedoch um den Export geht, verhalten sich Formen, die mit Sternwerkzeugen erstellt wurden, genauso wie Formen, die mit Polygonwerkzeugen erstellt wurden. In SVG sind Sterne nur Polygone, es gibt KEIN ~~<star />~~ Element.

Es ist wichtig, sich daran zu erinnern, dass Stern- und Polygon -Werkzeuge verwendet werden, um regelmäßige Sterne und Polygone zu erstellen, während das <polygon /> -Element in SVG für jedes Polygon, regelmäßig oder unregelmäßig, verwendet werden kann.

Alle Wege führen zu <path />

Wie wir bereits gelernt haben, gibt es in SVG drei Grundformen zum Zeichnen von Formen aus geraden Linien: <line /> , <polyline /> und <polygon /> . Aber was ist, wenn wir möchten, dass unsere Linien gekrümmt sind? Es ist höchste Zeit, dass wir über das Element <path /> sprechen.

Das <path /> -Element

<path /> ist das vielseitigste SVG-Element. Es kann verwendet werden, um jede mögliche Linie und Form zu zeichnen, einschließlich, aber nicht beschränkt auf alle oben aufgeführten Grundformen. Tatsächlich kann jede Grundform ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) als ein <path /> Element beschrieben werden. Darüber hinaus gibt es viele Formen, die mit <path /> erstellt werden können, aber nicht mit anderen SVG-Elementen. Um mehr über <path /> und seine Syntax zu erfahren, empfehle ich Ihnen, diesen ausgezeichneten Artikel von Chris Coyier zu lesen.

Wie erstellen wir nun <path /> -Elemente in Design-Tools? Wie wir oben gelernt haben, werden einige der mit Formwerkzeugen erstellten Ebenen zu <path /> -Elementen berechnet, obwohl sie theoretisch andere Elemente sein könnten (z. B. exportiert Figma alle Polygone als <path /> s, obwohl sie es hätten sein können). definiert als <polygon /> s. Dann muss jede andere unregelmäßige Form, die wir mit einem Stiftwerkzeug oder einem Vektorwerkzeug zeichnen, als <path /> exportiert werden, da es kein anderes SVG-Element gibt, das sie definieren könnte. Schließlich, in Sketch und Figma, Wir können jede Grundform in eine Ebene umwandeln, die zu einem <path /> berechnet wird. In Sketch können wir dies erreichen, indem wir Layer > Combine > Flatten wählen, während wir in Figma diese Funktion unter Object > Flatten Selection ( ⌘ + E unter macOS, Strg + E unter Windows).

Boolesche Operationen

Boolesche Operationen sind Funktionen, die an Formen ausgeführt werden, um sie auf verschiedene Arten zu kombinieren. In Illustrator, Sketch und Figma gibt es 4 boolesche Standardoperationen:

• Vereinigung (vereinen)
  Eine Summe der Formen
• Subtrahieren (Minus vorne)
  Untere Form, subtrahiert von der gemeinsamen Fläche zwischen den Formen
• Schneiden
  Der gemeinsame Bereich zwischen den Shapes
• Unterschied (ausschließen)
  Eine Summe der Shapes, subtrahiert von der gemeinsamen Fläche zwischen den Shapes.

In Illustrator erzeugen alle diese Funktionen eine einzige Form (Umriss). Es ist eine Aktion, die nicht rückgängig gemacht werden kann – außer mit Undo ( ⌘ + Z unter macOS, Strg + Z unter Windows). In Sketch und Figma hingegen erstellen boolesche Operationen Ebenengruppen, die später wieder aufgelöst werden können, ohne dass die Formen darin Schaden nehmen. Sie können diese Gruppen jedoch zu einer einzigen Form zusammenführen, um ein ähnliches Ergebnis wie in Illustrator zu erzielen, indem Sie die im vorherigen Absatz erwähnten Flatten- Funktionen verwenden.

Die Frage ist, unterstützt SVG boolesche Operationen? Nein, tut es nicht. Sie werden einfach zusammengeführt. Daher wird jede kombinierte Form, die Sie mit booleschen Operationen in Figma oder Sketch erstellen, als einzelnes <path /> -Element exportiert.

Es sieht gleich aus, also warum ist es wichtig?

In Bezug darauf, wie verschiedene Formen in SVG definiert werden können, ist seine Syntax äußerst vielseitig. Betrachten wir ein einfaches Rechteck:

Eine solche Form kann in SVG auf verschiedene Arten definiert werden. Es kann ein <rect /> -Element oder ein <polygon /> -Element sein. Es kann definitiv ein <path /> -Element sein (da alles ein <path /> -Element sein kann). Es kann auch ein <line /> -Element (oder ein <polyline /> -Element) sein, wenn wir uns entscheiden, es mit Strichen anstelle von Füllungen zu erstellen.

Jedes dieser Elemente rendert ein Rechteck, das genau gleich aussieht:

Aber wenn das Endergebnis (die von einem Benutzeragenten in einem Browser gerenderte Grafik) gleich aussieht, spielt es dann wirklich eine Rolle, welchen Ansatz wir wählen? Nun, das tut es. Als Faustregel würde ich immer empfehlen, möglichst einfache Formen zu verwenden.

Verwenden Sie zu guter Letzt die offensichtlichsten Formen für den gegebenen Fall. Erstellen Sie beispielsweise keine Rechtecke mit Linien oder Kreise mit Rechtecken, wenn Sie keinen guten Grund haben. Dahinter stehen zumindest einige Argumente:

1. Semantik/Lesbarkeit
   Komprimierungswerkzeuge wie SVGO bieten Ihnen die Möglichkeit, alle grundlegenden Formen zu Pfadelementen zu berechnen. Es kann Ihnen ein paar Bissen ersparen, wird aber definitiv die Lesbarkeit Ihres Codes verringern. Die Syntax von <path /> ist äußerst unintuitiv. Wenn Ihr SVG also jemals in einem Code-Editor und nicht in einem Designtool geändert werden soll, ist es viel einfacher, es zu verstehen, wenn Sie die Grundformen als Grundformen beibehalten.
2. Dateigröße
   Das Komprimieren von Formen zu Pfaden kann Ihnen beim Minimieren von Dateien helfen, aber das ist nicht immer der Fall! Beispielsweise nimmt ein abgerundetes Rechteck als <path /> viel mehr Platz ein als als <rect /> .
3. Animationen
   Haben Sie jemals versucht, SVG zu animieren? Es macht viel Spaß – solange Sie mit sauberem, semantischem SVG arbeiten. Mit einfachen Formen können Sie Parameter wie Radius, Breite, Höhe oder Position des Punktes leicht manipulieren. Wenn Sie Ihre Formen zu Pfaden zusammenführen, sind die meisten dieser Operationen viel schwieriger zu erreichen oder einfach unmöglich.
4. Varianten/Reaktionsfähigkeit
   Denken Sie daran, dass SVG kein statisches Bild wie JPG ist. Sie können es gestalten, thematisieren, reaktionsschnell machen und so weiter. Genau wie bei Animationen hilft es Ihnen definitiv bei all diesen Aufgaben, Ihre Datei gut strukturiert und semantisch zu halten.

Wie bei jeder Regel gibt es einige Ausnahmen. Aber im Allgemeinen ist es eine gute Praxis, Ihr SVG so lesbar, flexibel und strukturiert wie möglich zu halten.

Werfen wir nun einen Blick auf andere Attribute und Funktionen wie viewBox, Gruppen, Transformationen und visuelle Effekte.

width , height und viewBox

Wenn Sie bereits etwas Erfahrung mit SVG haben, ist Ihnen wahrscheinlich aufgefallen, dass das öffnende <svg> -Tag häufig die folgenden Attribute hat: width , height und viewBox . In Design-Tools haben wir Abmessungen von Zeichenflächen (oder Rahmen im Fall von Figma). Wie genau hängen diese Werte also zusammen?

Beginnen wir mit der Erläuterung der gerade erwähnten <svg> -Attribute. Sie können sich eine viewBox wie eine virtuelle Leinwand in Form eines Koordinatensystems vorstellen. Der Mittelpunkt dieses Koordinatensystems wird in der oberen linken Ecke des bezeichneten Bereichs platziert. Alle Elemente innerhalb des <svg viewBox="…"> Tags werden gemäß diesem Koordinatensystem platziert und auch von ihm beschnitten – alles, was die viewBox wird nicht gerendert. viewBox akzeptiert 4 Zahlen als Wert:

 <svg viewBox="0 0 12 8"> … </svg>

Da SVG für Scalable Vector Graphics steht, werden für diese Zahlen keine Einheiten benötigt. Stellen Sie es sich einfach als ein abstraktes Koordinatensystem vor, das auf jede beliebige Größe vergrößert und verkleinert werden kann. Machen Sie sich nicht zu viele Gedanken über die ersten beiden Zahlen, höchstwahrscheinlich werden Sie sie nicht brauchen. Die letzten beiden sind das, was normalerweise zählt. Dies sind die tatsächlichen Abmessungen unserer SVG-Leinwand.

viewBox bestimmt nicht die Größe von SVG. Es gibt nur die Koordinaten des Bereichs an, in dem unser SVG gezeichnet wird. Daher nimmt <svg> bei Verwendung im Web mit einer angegebenen viewBox immer den gesamten verfügbaren Platz ein und behält das von der viewBox festgelegte Verhältnis bei – es sei denn, wir verhindern dies mit CSS oder setzen die Attribute width und/oder height .

width und height sind die <svg> -Attribute, die die tatsächliche Breite und Höhe des SVG-Elements festlegen. Im Gegensatz zu viewBox sollten sie vorgegebene Einheiten wie Pixel, ems oder rems verwenden. Das bedeutet, dass wir auch das SVG mit ihnen transformieren können – wenn das Verhältnis zwischen width und height anders ist als das Verhältnis zwischen den Werten der viewBox , verzerrt SVG die in der viewBox angegebene Grafik entsprechend den width und height :

Was passiert nun, wenn wir SVG aus Design-Tools exportieren? In Sketch und Figma erhalten alle Assets (egal ob es sich um einzelne Ebenen, Gruppen oder Zeichenflächen handelt) immer eine viewBox , die den Abmessungen des exportierten Elements entspricht, und width und height in Pixeln, die den letzten beiden Werten von entsprechen viewBox . In Illustrator haben alle Assets eine viewBox , die auf die gleiche Weise wie in Sketch und Figma angegeben wird, aber keine width und height angewendet werden.

Gruppen

Gruppen sind das grundlegende Mittel zum Organisieren von Ebenen in Designwerkzeugen. Abgesehen vom Festlegen der Hierarchie werden Gruppen verwendet, um Massenoperationen wie Transformationen auf mehrere Elemente anzuwenden. Es gibt keinen signifikanten Unterschied in der Funktionsweise von Gruppen in Illustrator, Sketch und Figma und glücklicherweise ist die grundlegende Funktionalität von SVG-Gruppen ( <g>…</g> ) ziemlich gleich.

Verwandelt

In SVG gibt es fünf grundlegende Transformationen, die wir auf ein Element anwenden können:

1. translate : verschiebt das Element entlang der vertikalen und/oder horizontalen Achse;
2. scale : skaliert das Element entlang der vertikalen und/oder horizontalen Achse:
3. Rotieren : erzeugt eine zweidimensionale rotate um einen bestimmten Winkel, der in Grad angegeben ist, um einen bestimmten Punkt;
4. skew ( skewX oder skewY ): neigt das Element um einen in Grad angegebenen Winkel entlang der vertikalen oder horizontalen Achse;
5. matrix : die komplexeste und vielseitigste verfügbare Transformationsfunktion. Da es ziemlich viel Algebra-Gespräch erfordern würde, um zu erklären, wie Matrizentransformationen funktionieren, geht dies weit über den Rahmen dieses Artikels hinaus. Lassen Sie uns einfach anerkennen, dass Sie mit matrix viele komplizierte Transformationen wie Dehnen, Quetschen, Scheren und so weiter durchführen können.

Hinweis : Beachten Sie, dass einige der SVG-Transformationen CSS-Transformationen zwar sehr ähnlich sehen, aber nicht identisch sind. Beispielsweise bietet CSS sowohl 2D- als auch 3D-Rotationsfunktionen, während SVG nur eine 2D-Rotationsfunktion hat. Während CSS verschiedene Winkeleinheiten wie Grad oder Bogenmaß akzeptiert, werden SVG-Rotationen immer in Grad angegeben, daher kann eine Einheit weggelassen werden (z. B. rotate rotate(45) , NOT ~~rotate(45deg)~~ ).

Alle diese Transformationen können auf jedes SVG-Element wie Formen oder Gruppen angewendet werden und sind nicht destruktiv, dh sie beeinflussen nicht die ursprüngliche Geometrie des Elements. Wir wenden Transformationen über ein transform an:

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Werfen wir jetzt einen Blick auf die Design-Tools! Die meisten Transformationen, die wir in Designwerkzeugen anwenden, interagieren also direkt mit der Geometrie der Objekte und ihrer Position auf der Leinwand. Sie sind nicht unabhängig von den Formen und werden nicht als SVG-Transformationsfunktionen exportiert.

Drehungen sind hier die Ausnahme, da ihre Werte getrennt von der Geometrie des Elements im Inspektor gespeichert und als transform="rotate(…)" Funktion exportiert werden.

Interessanterweise gilt die gleiche Regel für Flips (Reflexionen) in Sketch und Figma (nicht in Illustrator!). Jeder von ihnen hat jedoch seinen eigenen Ansatz. Sketch verwendet eine Kombination aus negativer Skalierung und Übersetzung, um einen Flip-Effekt zu erzielen, während Figma einen Flip innerhalb einer einzelnen Matrixfunktion durchführt.

Grenzradius

Wir haben bereits über abgerundete Rechtecke gesprochen, aber was ist mit dem Abrunden anderer Formen? Tatsächlich können Sie in allen von uns besprochenen Designwerkzeugen die Ecken jeder Form abrunden, nicht nur eines Rechtecks.

Aber was ist mit SVG? Haben die Elemente <polygon /> und <path /> auch ein rx und ein ry Attribut? Unglücklicherweise nicht. Jede andere Form als ein Rechteck wird, nachdem Sie eine ihrer Ecken abgerundet haben, immer als <path /> -Element exportiert, wobei die abgerundeten Ecken als integraler Bestandteil der Geometrie der Form behandelt werden.

Füllungen und Striche

Illustrator, Sketch und Figma unterstützen alle Füllungen und Striche als grundlegende Eigenschaften aller Formen, und so geschieht es in SVG. Daher werden in Designtools angegebene Füllungen innerhalb eines Füllungsattributs exportiert und stroke werden innerhalb eines fill exportiert. Denke aber nicht, dass das alles so einfach ist. Der Teufel steckt im Detail.

Farbfüllung

Die Farbfüllung ist die grundlegendste der verfügbaren Füllungen und wird mit einer einzigen einfachen Farbe angegeben (z. B. #3fd8e2 ). In SVG wird dieser Wert direkt in das fill -Attribut eingefügt (zB fill="#3fd8e2" ).

Designtools exportieren Farbfüllungen mit Hex-Werten (z. B. #0000ff ), obwohl Sie in SVG auch alle anderen CSS-bekannten Benennungsschemata verwenden können, wie Farbnamen (z. B. blue ), RGB-Werte (z. B. rgb(0,0,255) ) oder sogar HSL-Werte (z. B. hsl(240,100%,50%) ).

Deckkraft füllen

Wenn es um die Deckkraft von Füllungen geht, akzeptiert SVG halbtransparente Farben (z. B. RGBA-Werte), obwohl es auch ein Attribut für fill-opacity bereitstellt. Aufgrund von Kompatibilitätsproblemen ist die Verwendung von fill-opacity ein empfohlener Ansatz, der auch von Figma und Sketch verwendet wird. (Ich erwähne Illustrator hier nicht, da Illustrator es Ihnen nicht erlaubt, die Fülldeckkraft zu steuern.) Wenn Sie also ein SVG-Quadrat erstellen möchten, das mit halbtransparenter roter Farbe gefüllt ist, können Sie Folgendes tun:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

aber ein empfohlenerer Ansatz (verwendet von Sketch und Figma) wäre:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Verlaufsfüllung

Wenn Sie mit CSS vertraut sind, wissen Sie vielleicht, dass das Wechseln zwischen Farb- und Verlaufshintergründen relativ einfach ist, wenn es um Hintergründe geht. In beiden Fällen kann dieselbe Eigenschaft background-color (oder background ) verwendet werden. Da Farbverläufe in SVG viel älter sind als CSS-Verläufe, ist auch ihre Syntax ganz anders.

Um einen Farbverlauf in SVG zu verwenden, müssen Sie ihn zuerst in den <defs>…</defs> -Tags definieren und dann in einem fill darauf verweisen, z.

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Was also während des SVG-Exports passiert, wenn Sie eine Farbverlaufsfüllung verwenden, ist, dass ein Farbverlauf zu den <defs> hinzugefügt wird und im Code unten darauf verwiesen wird.

Es ist wichtig, sich daran zu erinnern, dass SVG nur lineare und radiale Farbverläufe unterstützt. Effekte wie Winkelverlauf oder Verlaufsgitter werden nicht nach SVG exportiert.

Muster/Bildfüllung

Sketch und Figma bieten auch eine Bildfüllung, bei der eine Rastergrafik entweder zum Füllen des gesamten Elements oder als sich wiederholendes Muster verwendet wird.

Wenn es darum geht, Bildfüllungen in SVG zu exportieren, ist es eigentlich ziemlich ähnlich wie bei Farbverläufen. Bilder werden in <defs> mit einem <pattern>…</pattern> -Element definiert und dann innerhalb eines fill referenziert:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Damit es funktioniert, muss das referenzierte #picture image irgendwo definiert werden. Die Design-Tools werden sie direkt als <image/> -Elemente in SVG einbetten, obwohl dies in Bezug auf die Leistung kein empfohlener Ansatz ist. Wenn Sie wirklich Rasterbilder in Ihrem SVG verwenden müssen, würde ich vorschlagen, das Bild-Tag aus dem SVG zu entfernen und stattdessen eine eigenständige Datei zu verwenden:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Striche

stroke Attribut in SVG akzeptiert wie das fill Attribut Farben in verschiedenen Formaten, z. B. Hex, RGB oder HSL. Und ähnlich wie bei fill können Sie die Deckkraft von Strichen mit stroke-opacity steuern. Ebenso wie bei fill können Striche Farbverläufe als Wert verwenden. Alle diese Effekte können in Design-Tools erzielt und erfolgreich in SVG exportiert werden.

Stroke Caps und Joins

Es gibt jedoch auch einige Schlaganfall-spezifische Attribute. Erstens können Sie die Strichbreite steuern. Design stroke-width exportiert. Sie können auch Enden und Verbindungen der Striche steuern. Mit SVG können Sie sie über die Attribute stroke-linecap und stroke-linejoin definieren. Es gibt drei mögliche Kappen: butt , round Kappe und square Kappe, und drei mögliche Verbindungen: miter , round Verbindung und bevel Verbindung. Sowohl Kappen als auch Verbindungen können in Illustrator, Figma und Sketch gesteuert werden, und die verfügbaren Kappen und Verbindungen stimmen mit denen überein, die in SVG verfügbar sind.

Gestrichelte und gepunktete Striche

Ein weiterer Effekt, den wir mit Strichen erzielen können, sind gestrichelte Striche. In Illustrator und Figma können Sie mehrere Striche und Lücken setzen, während in Sketch nur eine einzige Folge von Strichen und Lücken möglich ist.

Mit SVG können Sie gestrichelte Linien mit einem stroke-dasharray Attribut erstellen. stroke-dasharray ermöglicht die Übergabe einer Folge von mehreren Bindestrichen und Lücken als Wert, der den Funktionen von Figma und Illustrator entspricht. Es bedeutet auch, dass Sketch Ihnen in diesem Fall nicht erlaubt, die vollen Möglichkeiten von SVG zu nutzen.

Ein interessanter Grenzfall ist eine gepunktete Linie. Wir erreichen dies, indem wir die stroke-linecap auf round und die Strichlänge auf Null setzen, z. B.:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Hinweis : Derzeit haben Figma-Benutzer einen Fehler, der es ihnen nicht erlaubt, gepunktete Linien zu erstellen. Wenn Sie beispielsweise 0, 10 oder 10, 0 als Striche genauso interpretiert wie 10, 10 und ergibt eine regelmäßige gestrichelte Linie anstelle einer gepunkteten Linie. Glücklicherweise gibt es einen Weg, dies zu umgehen. Verwenden Sie statt Null einen sehr kleinen Wert, z. B. 0.0001, 10 – dies sollte wie erwartet zu einer perfekt gepunkteten Linie führen.

Strichausrichtung

Es gibt einen weiteren, viel wichtigeren Unterschied zwischen Design-Tools und SVG: Strichausrichtung. Mit Illustrator, Sketch und Figma können Sie die Ausrichtung des Strichs steuern und ihn innen, außen oder mittig ausrichten. Aber rate mal was? SVG 1.1 unterstützt keine Strichausrichtung. In SVG sind alle Striche mittig ausgerichtete Striche. Keine Innen- oder Außenschläge. Aus diesem Grund passieren einige sehr seltsame Dinge, wenn Sie Ihre außen- und innen ausgerichteten Striche in SVG exportieren.

Illustrator exportiert in diesem Fall die Form und ihren Strich als zwei separate Formen. Wenn Sie also in Illustrator einen inneren Strich oder einen äußeren Strich auf ein Rechteck anwenden, führt dies in SVG zu einem Rechteck und einem separaten <path /> -Element, das den Strich des Rechtecks ​​darstellt, z.

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

Dieses Verhalten hat einige sehr wichtige Auswirkungen. Sie können beispielsweise die Breite des Strichs nicht mehr ändern oder ihn gestrichelt machen. Es wird auch nicht auf die gleiche Weise skaliert wie „echte“ Striche. Darüber hinaus ändert Illustrator die Abmessungen der ursprünglichen Form, z. B. wird ein 100 × 100-Quadrat mit einem 20-Einheiten-fetten inneren Strich tatsächlich als 120 × 120-Quadrat exportiert, um Rendering-Probleme zu vermeiden. Schließlich ist es einfach kein Schlaganfall. Es ist nur eine andere Form mit einer Füllung.

Figma und Sketch haben jedoch einen anderen Ansatz. Sie exportieren alle Striche originalgetreu als Striche, berechnen aber die Abmessungen der Form neu. Wenn Sie also einen Kreis mit einem Radius von 5 und einem inneren Strich von 2 haben, finden Sie in Ihrem SVG einen Kreis mit einem Radius von 4 (und einem Strich von immer noch 2).

Dieser Ansatz ermöglicht es Figma und Sketch, die meisten der im Fall von Illustrator erwähnten Probleme zu vermeiden. Bei einigen komplizierteren Formen kann sich diese Technik jedoch als nicht präzise herausstellen und das Endergebnis etwas anders als erwartet ausfallen. Aus diesem Grund ist der Ansatz von Sketch und Figma nicht unbedingt besser – er ist definitiv semantischer, performanter und flexibler, aber die Lösung von Illustrator ist genauer.

Hinweis: Dasselbe Problem mit der Strichausrichtung gilt auch für CSS. Die CSS -Eigenschaft border unterstützt weder die innere noch die äußere Ausrichtung. Wenn Sie möchten, können Sie dieses Verhalten jedoch mit outline und box-shadow Eigenschaften hacken.

Mehrere Füllungen und Striche

In Designwerkzeugen können Sie mehrere Füllungen und Striche pro Ebene hinzufügen. Dies ist sehr sinnvoll, wenn es mit Attributen wie Deckkraft und Mischmodi kombiniert wird. Leider unterstützt SVG eine solche Funktion nicht. Wenn Sie eine Ebene exportieren, die Füllungen und/oder Striche enthält, wird sie multipliziert und jeder der Striche und Füllungen wird auf eine eigene Ebene angewendet.

Schatten, Filter und andere Effekte

Lassen Sie uns jetzt über einige weniger beliebte Effekte sprechen. SVG ist eine sehr mächtige Sprache, sogar viel mächtiger als sie normalerweise im Web verwendet wird. Eine der interessantesten Funktionen von SVG ist eine große Auswahl an erweiterten visuellen Effekten, die als SVG-Filter bekannt sind.

Der volle Umfang der Möglichkeiten von SVG-Filtern ist viel zu groß, um in diesem Artikel beschrieben zu werden. Wenn Sie mehr darüber erfahren möchten, empfehle ich Ihnen dringend, sich einige Vorträge und Artikel zu diesem Thema von Sarah Soueidan anzusehen.

Filters, same as patterns or gradients, need to be defined to apply them later to a layer. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. We can. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Mischmodi

Mischmodi (wie z. B. Abdunkeln , Multiplizieren oder Überlagern ) ermöglichen das Mischen von zwei oder mehr Elementen, indem ihre Werte auf unterschiedliche Weise kombiniert werden. Grafikdesignern (und Anwendungen wie Adobe Photoshop) wohlbekannt, funktionieren Mischmodi auch in Sketch, Figma und Illustrator.

In SVG existieren Mischmodi als einer der Filter. Sie haben ihr eigenes <feBlend /> Filterelement. Da die Syntax von <feBlend /> jedoch ziemlich kompliziert ist, verwenden Sketch, Figma und Illustrator stattdessen CSS:

 .rectangle { mix-blend-mode: overlay; }

Da mix-blend-mode Browserunterstützung heutzutage ziemlich gut ist, sollte dies kein großes Problem sein. Wenn es Ihnen jedoch wichtig ist, eine kugelsichere Browserunterstützung sicherzustellen, die Microsoft Edge und IE enthält, müssen Sie die CSS-Mischmodi manuell durch SVG-Filter ersetzen.

Genau wie bei mehreren Füllungen und Strichen unterstützt SVG keine Mischmodi, die direkt auf Füllungs- und Strichattribute angewendet werden (und nicht auf ganze Ebenen). Wenn Sie versuchen, Füllungen und Striche mit ihren eigenen Mischmodi von einem Designtool nach SVG zu exportieren, wird die Ebene multipliziert und die Mischmodi auf die entsprechenden Kopien der Ebene angewendet.

Symbole und Komponenten

In einigen der obigen Codebeispiele ist Ihnen vielleicht ein Element aufgefallen, das wir noch nicht besprochen haben: ein <use>…</use> -Element. Mit <use> können wir Elemente in SVG definieren und wiederverwenden, ähnlich wie Symbole in Illustrator und Sketch oder Komponenten in Figma. Denken Sie daran, Muster, Farbverläufe und Filter innerhalb der <defs>…</defs> -Tags zu definieren, damit sie in einem anderen Teil Ihres SVG-Codes verwendet werden können? Tatsächlich kann jedes SVG-Element auf diese Weise definiert und wiederverwendet werden. Sobald Sie eine Form oder Gruppe definiert haben, können Sie im Rest des Dokuments beliebig oft darauf verweisen, z.

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

Sie können auch viel komplexere Strukturen mit einem <symbol>…</symbol> -Tag wiederverwenden. Das Symbol fungiert als separater Körper innerhalb unseres SVG und kann sein eigenes viewBox Attribut haben (siehe Breite, Höhe und viewBox als Referenz).

Bedeutet das, dass die Symbole und Komponenten unserer Designtools in SVG-Symbole exportiert werden? In Illustrator – ja, das tut es. In Sketch und Figma – nein, tut es nicht. Warum? In erster Linie, weil Illustrator-Symbole ziemlich einfach sind und leicht in SVG übersetzt werden können, während die Symbole von Sketch und die Komponenten von Figma überhaupt nicht so einfach sind und das Exportieren einiger seiner Funktionen (z. B. verschachtelte Überschreibungen) sehr schwierig oder sogar unmöglich wäre.

Text

Es wäre kein umfassender Leitfaden, wenn wir die Typografie nicht erwähnen würden. Alle Design-Tools bieten eine Vielzahl von Werkzeugen für Text. Obwohl SVG normalerweise für Grafiken verwendet wird, unterstützt es auch Textelemente.

Illustrator, Sketch und Figma unterstützen alle den Export von Text in SVG und berechnen Textebenen in <text>…</text> -Elemente in SVG. SVG-Textelemente werden wie alle anderen Grafikelemente, Formen usw. gerendert, mit dem einzigen Unterschied, dass es sich um Text handelt.

Wie in CSS können wir alle Parameter des grundlegenden Textes steuern, wie z. B. Gewicht, Zeilenhöhe oder Ausrichtung. Wenn Sie wissen, wie man Text in CSS formatiert, wissen Sie bereits, wie man es in SVG macht. Es kann sich jedoch ein bisschen altmodisch anfühlen. Zunächst müssen alle Parameter in Inline-Attributen gesetzt werden, ähnlich den goldenen Standards von HTML 3.2. Zweitens gibt es keine Abkürzungen. Beispielsweise werden Sie nichts finden, was einer font -CSS-Eigenschaft ähnelt. Das liegt daran, dass SVG-Textattribute tatsächlich auf der CSS 2-Spezifikation basieren, die uns in die 90er Jahre zurückführt und viel älter ist als CSS, das wir heute kennen.

Nichtsdestotrotz werden all diese Attribute jedes Mal perfekt aus den Designwerkzeugen exportiert, wenn wir wollen, dass eine Textebene zu SVG-Code wird.

Benutzerdefinierte Schriftarten

Leider wird es bei benutzerdefinierten Schriftarten etwas knifflig. Damals, als der SVG 1-Standard erstellt wurde, waren benutzerdefinierte Schriftarten im Web nicht üblich. Alle verwendeten Standardschriften wie Tahoma, Verdana oder Courier. Ausgefallen zu werden und Schriftarten zu verwenden, die die Leute nicht standardmäßig auf ihren Computern hatten, bedeutete normalerweise, sie rücksichtslos zu rastern und sie als Bilder zu verwenden. SVG hat jedoch ein eigenes Schriftartenformat namens SVG-Schriftarten implementiert. Heute, 18 Jahre nach der Veröffentlichung von SVG 1.0, werden SVG-Schriftarten in den meisten gängigen Browsern nicht mehr unterstützt.

Glücklicherweise spielt SVG sehr gut mit CSS, was bedeutet, dass wir Webfonts anstelle von SVG-Fonts verwenden können, z.

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Lassen Sie mich hier nicht näher auf die Implementierung von Webfonts eingehen, abgesehen von einem entscheidenden Hinweis: Vergessen Sie es nicht. Mit anderen Worten, wenn Sie benutzerdefinierte Schriftarten in Ihrem SVG verwenden, müssen Sie daran denken, diese Schriftarten dem Client bereitzustellen, genau wie in HTML/CSS.

Gliederung von Schriftarten

Man könnte argumentieren, dass es viel einfacher wäre, alle Textebenen zu skizzieren und sich danach keine Sorgen mehr zu machen, als sich um Schriftarten und alles zu streiten. Trotzdem gibt es zumindest ein paar gute Gründe, Ihren Text nicht in Formen umzuwandeln:

1. Umrissenen Text können Sie weder vor noch nach dem Export bearbeiten.
   Wenn Sie mit konturiertem Text arbeiten, müssen Sie daran denken, immer eine bearbeitbare Kopie in Ihrer Illustrator-, Sketch- oder Figma-Datei zu behalten. Andernfalls können Sie Ihre Textebenen nicht bearbeiten, sobald sie umrissen sind. Dies fügt dem Prozess unnötige Komplexität hinzu. Ganz zu schweigen von der Bearbeitung des umrissenen Textes nach dem Export der SVG. Text in SVG kann jederzeit aktualisiert werden. Umrissener Text erfordert das Öffnen der Quelldatei jedes Mal, wenn Sie die kleinste Kopie ändern möchten.
2. Umrissener Text ist nicht barrierefrei .
   Text in SVG kann, genau wie andere Textelemente im Web, von Screenreadern und anderen zugänglichen Technologien gelesen werden. Indem Sie Textebenen skizzieren, verhindern Sie, dass Personen, die solche Technologien verwenden, auf Ihre Inhalte zugreifen.
3. Die Leute erwarten, dass Text Text ist .
   Die meisten Leute, die das Internet nutzen, wissen absolut nichts über SVG, HTML oder Design-Tools. Wenn sie Text sehen, erwarten sie genau das. Sie können es auswählen, kopieren oder in eine Suchmaschine eingeben. All dies ist mit Text in SVG möglich – es sei denn, Sie skizzieren ihn.
4. Vergessen Sie SEO nicht .
   Text in SVG ist auch zugänglich und wird von Suchmaschinen verwendet. Indem Sie Text gliedern, machen Sie Ihre Inhalte weniger durchsuchbar und möglicherweise weniger sichtbar für die Öffentlichkeit.

Zusammenfassung

Vielen Dank, dass Sie mich auf eine Reise durch die Vor- und Nachteile der Arbeit mit SVG und Design-Tools begleitet haben. Dieser Artikel deckt definitiv nicht das gesamte Spektrum des Themas ab, obwohl es ausreichen sollte, die häufigsten Anwendungsfälle zu behandeln. Wenn Sie Fragen oder Anregungen zu den Dingen haben, die hier nicht erwähnt wurden, zögern Sie nicht, diese in den Kommentaren zu posten!