twltr/svg-design

Was macht svg-design?

Blatt-Fertigkeit im Bereich Design; erreichbar über seine Domäne oder seinen Namen.

Beginne mit der Rolle der Grafik in der Marke oder Benutzeroberfläche. Wähle ihre Komposition, Silhouette, Proportionen, Typografie und Farbe für diesen Kontext, wobei eine bestehende visuelle Richtung erhalten bleibt, falls vorhanden. Drücke das Design dann als sauberes, minimales SVG-Markup aus. Jedes Element und Attribut sollte seinen Platz verdienen.

Diese Fertigkeit umfasst Logos, Icon-Sets, Marken-Assets und dekorative oder expressive Web- Grafiken. Wähle nach Zweck: Das Logo einer Landingpage und dekoratives Hero-Artwork gehören hierher; ein Diagramm, das erklärt, wie das Produkt funktioniert, gehört zu editorial-svg-diagrams. Seitenkomposition und Interface-Layout gehören zu frontend-design.

Eine kleine Logo-Entscheidung

Illustrative Aufgabenstellung: Erstelle ein Bergsymbol, das in einem Website-Header und einem kompakten App-Icon erkennbar bleibt. Beginne mit der äußeren Silhouette und einem markanten Bergkamm-Ausschnitt; verzichte auf feine Schneelinien, die beim Verkleinern verschwinden. Überprüfe das Symbol in beiden tatsächlichen Größen und auf jeder vorgesehenen Oberfläche, bevor du Farbe oder Details hinzufügst. Wenn diese Verwendungen unterschiedliche Detailstufen erfordern, erstelle explizit eine Kleinformat-Variante, anstatt ein unleserliches Symbol zu verkleinern.

Beurteile vor einer umfangreichen Komposition oder visuellen Überprüfung die visuellen Fähigkeiten des Modells und den Zugang zu gerenderten Nutzungsgrößen und -oberflächen. Wenn Puppeteer verfügbar ist, nutze dessen aktuelle Phasen-/Modell-Routing für einen besser geeigneten Autor oder unabhängigen Prüfer, wobei die Aufgabenstellung, die etablierte Richtung und die Zielgrößen übergeben werden. Verwende einen aktiven Delegierungsbesitzer; eine kleine, geeignete Bearbeitung kann direkt bleiben. Die Überprüfungen des Designers selbst sind keine unabhängige Abnahme. Fehlende Fähigkeiten oder gerenderter Zugriff lassen diese Prüfung offen; gültiges SVG allein begründet noch kein gutes Design.

Themen-Routing

Aufgabe	Referenz laden
Bogen-Flag-Kombinationen, häufige Pfadformen	references/path-patterns.md
Logo-Design, Typografie, Negativraum	references/logo-techniques.md
Icon-Design, Rastersysteme, Pixelausrichtung	references/icon-design.md
Verläufe, Masken, Clips, Filter, Transformationen (Design-Entscheidungen)	references/advanced-techniques.md
Animation (CSS-Keyframes, Stagger, GPU, Easing, SVG-spezifisch)	references/animation.md
Optimierung, Sprites, SVGO-Konfiguration	references/optimization.md
Barrierefreiheit, Browser-Fallstricke	references/accessibility-and-pitfalls.md
Bearbeitungsworkflow, boolesche Operationen, SVGs kombinieren	references/editing-workflow.md

SVG-Grundgerüst

Für ein gestricheltes UI-Icon beginne mit dieser Struktur:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- Inhalt -->
</svg>

Passe viewBox an die Designleinwand an. Lass width/height-Attribute weg, damit das SVG mit seinem Container skaliert (füge sie nur hinzu, wenn eine feste Größe benötigt wird).

Für Logos und Webgrafiken wähle Leinwand, Füllungen und Striche basierend auf der Komposition, anstatt die Icon-Standardwerte zu übernehmen.

Konventionen zur Leinwandgröße

Größe	Anwendungsfall	Hinweise
0 0 16 16	Mikro-Icons, Favicons	Heroicons micro, GitHub Octicons
0 0 20 20	Kleine UI-Icons, Formularelemente	Heroicons mini
0 0 24 24	Standard-Icons (am häufigsten)	Lucide, Heroicons outline, Material
0 0 32 32	Mittelgroße Icons, Navigation	Phosphor verwendet intern 256x256
0 0 48 48	Große Anzeige-Icons	App-Icons, Illustrationen
Benutzerdefiniert	Logos, Illustrationen	Entspricht dem natürlichen Seitenverhältnis

Für Standard-UI-Icons standardmäßig 24x24 verwenden, es sei denn, das umgebende Icon-System verwendet ein anderes Raster. Logos und Webgrafiken verwenden eine Leinwand, die zu ihrer Komposition passt.

Form vs. Pfad-Entscheidung

Form-Primitiv verwenden, wenn...	<path> verwenden, wenn...
Die Form eine grundlegende geometrische Form ist	Die Form Kurven oder komplexe Umrisse hat
Lesbarkeit wichtig ist (ein Kreis sollte wie <circle> aussehen)	Die Anzahl der Elemente minimiert werden muss
Einzelne Eigenschaften animiert werden sollen (r, cx, cy)	Mehrere Formen zu einem Element kombiniert werden
Die Form programmatisch modifiziert wird	Aus Designtools exportiert wird (Pfade sind universell)

Standard-Styling

Setze diese auf dem Wurzel-<svg>-Element, um Wiederholungen bei Kindern zu vermeiden:

Attribut	Icon-Standard	Logo-Standard	Warum
fill	none	variiert	Icons sind typischerweise gestrichelt, Logos gefüllt
stroke	currentColor	none oder currentColor	Erbt Textfarbe vom Elternelement
stroke-width	2 (bei 24x24)	variiert	Einheitliche Strichstärke bei Icons
stroke-linecap	round	round oder butt	Abgerundete Enden sehen bei kleinen Größen sauberer aus
stroke-linejoin	round	round oder miter	Verhindert scharfe Spitzen an Verbindungen

currentColor ist dein Freund. Es ermöglicht dem SVG, jede Farbe zu erben, die das Elternelement hat, wodurch Icons ohne zusätzliches CSS thematisierbar werden.

Strichstärke relativ zum ViewBox

stroke-width ist in ViewBox-Einheiten, nicht in Pixeln. Setze es immer relativ zu deinen Leinwandabmessungen:

viewBox	Typische stroke-width	Visuelles Ergebnis
16x16	1.5	~9,4% der Leinwand
24x24	2	~8,3% der Leinwand
32x32	2–2.5	~6,3–7,8% der Leinwand
48x48	3	~6,3% der Leinwand
256x256	16	~6,3% der Leinwand

Wann Formen in Pfade umgewandelt werden sollten

Konvertieren, wenn:

• Mehrere Formen zu einem einzigen zusammengesetzten Pfad kombiniert werden (boolesche Operationen)
• Die Form als Teil einer größeren Pfadkomposition benötigt wird
• In Umgebungen verteilt wird, die nur <path> unterstützen
• Zur Optimierung auf minimale DOM-Elemente

Als Formen belassen, wenn:

• Die Lesbarkeit des Codes wichtig ist (ein <circle> ist selbsterklärend)
• Bestimmte Eigenschaften animiert werden sollen (das Animieren von r auf einem Kreis ist sauberer als das Animieren von Pfaddaten)
• Das SVG programmatisch modifiziert wird

Template für abgerundetes Rechteck zu Pfad

Die Bogenparameter hier sind fehleranfällig abzuleiten. Verwende dies als Referenz:

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> wird zu: -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs. nonzero

Verwende evenodd, wenn zusammengesetzte Formen mit Löchern vorliegen. Es ist einfacher, da man sich keine Gedanken über die Wicklungsrichtung machen muss:

<!-- Donut mit evenodd (Richtung spielt keine Rolle) -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

Mit nonzero (Standard) muss der innere Kreis in die entgegengesetzte Richtung wickeln, um das Loch zu erzeugen.

Logo-Design-Prozess

Wenn Logos (nicht Icons) erstellt werden, befolge diesen Prozess:

0. Behebe nur eine materielle Lücke in der Aufgabenstellung. Verwende eine bereitgestellte Markenrichtung, einen Namen, eine Zielgruppe, Anwendungsfälle und eine Referenz wieder. Wenn eine fehlende Wahl das Design wesentlich verändern würde, stelle eine kurze Frage unter Verwendung der vom aktuellen Host unterstützten Interaktion. Verwende für sekundäre Entscheidungen einen sinnvollen, umkehrbaren Standard; nimm niemals ein bestimmtes Fragetool an oder verlange ein Mood-Board- Interview.

1. Erkunde mehrere Metaphern, nicht mehrere Layouts einer Metapher. Konzeptionelle Vielfalt ist wichtiger als Layout-Varianten. Folge dem vollständigen Ideenfindungsprozess in references/logo-techniques.md, der domänenspezifisches Brainstorming, Anforderungen an die Kategorienvielfalt und die Vermeidung von Klischees behandelt.

2. Garantiere strukturelle Vielfalt. Jedes Logo-Set muss mehrere Kategorien von Ansätzen umfassen, nicht nur mehrere Metaphern innerhalb desselben Stils. Wenn 5+ Optionen präsentiert werden, muss mindestens eine aus jeder Spalte enthalten sein: ein typografischer/Schriftzug-Ansatz, ein symbolisches Icon, ein abstraktes geometrisches Zeichen und ein Hybrid aus Buchstabenform und Metapher. Siehe die Tabelle zur Kategorienvielfalt in references/logo-techniques.md.

3. Vorschau über den verfügbaren Host. Wenn ein progressiver Vergleich hilfreich ist, verwende die assets/preview.html dieser Fertigkeit und die Struktur in references/editing-workflow.md. Zeige oder überprüfe die Vorschau über einen vom aktuellen Host unterstützten Viewer; nimm keinen Browser, Shell-Befehl oder ein Vordergrundfenster an. Wenn kein Viewer sie rendern kann, benenne die Einschränkung und stelle die SVG-Dateien und eine gerenderte Vorschau bereit, wo unterstützt. Behandle eine nicht beobachtete Vorschau niemals als visuell verifiziert.

4. Erstelle für farbige Logos immer eine -dark.svg-Variante. Dunkle marineblaue Kanten (#1E3A5F), die auf Weiß großartig aussehen, verschwinden auf dunklen Hintergründen. Dunkle Varianten benötigen hellere Kanten (#4B8BBE), hellere Ringe (#3B6B8A) und gebrochen weiße Zentren (#E2E8F0).

5. Plane dein vertikales Budget, bevor du zeichnest. Auf einer 32x32-Leinwand mit 3 gestapelten Elementen hast du ~30 nutzbare Einheiten. Skizziere zuerst die vertikale Verteilung (z. B. Box=12, Abstand=2, Ebene=5, Abstand=2, Ebene=5), um ein Abschneiden an den ViewBox-Kanten zu vermeiden.

Anti-Patterns

Nicht machen	Stattdessen machen
width="24" height="24" ohne viewBox hartcodieren	Immer viewBox verwenden; width/height nur bei Bedarf hinzufügen
fill="none" auf einer <g>-Gruppe setzen	Füllung auf einzelnen Elementen oder dem Wurzel-<svg> setzen
px-Einheiten innerhalb von SVG verwenden	SVG-Koordinaten sind einheitenlos; sie beziehen sich auf die viewBox
Editor-Metadaten einschließen (<sodipodi:*>, <inkscape:*>)	Sämtlichen Editor-Overhead entfernen
<text> für Logo-Schriftzüge in verteilten SVGs verwenden	Text aus Portabilitätsgründen in Pfade konvertieren
Transformationen drei Ebenen tief verschachteln	Transformationen in Pfadkoordinaten abflachen
xlink:href verwenden	href verwenden (xlink ist veraltet)
xmlns bei eigenständigen SVG-Dateien vergessen	Immer xmlns="http://www.w3.org/2000/svg" einschließen
Dezimalgenauigkeit über 2-3 Stellen für Icons verwenden	Auf 2 Dezimalstellen für Icons runden, maximal 3 für komplexe Grafiken

Querverweise

• Das umgebende Website- oder Interface-Design ist nicht die Arbeit dieser Fertigkeit. Gib es an denjenigen zurück, der nach der Grafik gefragt hat, zusammen mit der Rolle und den Größenbeschränkungen der Grafik, und folge in der Zwischenzeit der etablierten Typografie, den Farben und der visuellen Hierarchie oder dem bestehenden Designsystem des Projekts.
• Wenn editorial-svg-diagrams verfügbar ist, verwende es für Abbildungen, die Konzepte, Beziehungen, Prozesse oder Systeme erklären. Andernfalls konzentriere die Ausgabe dieser Fertigkeit auf Marken- und Interface-Grafiken und erkläre die nicht verfügbare Diagramm-Funktion, falls das angeforderte Ergebnis davon abhängt.