Ein Set.
Ein gemeinsamer Stil.

01 · Das Stilprofil

Lege wenige Regeln vor dem Entwurf fest.

Für diese eigenen Beispiele nutzen wir einen Zeichenraum von 0 0 24 24, keine Füllung, eine Strichstärke von 1.8 und runde Linienenden. Das sind unsere Entwurfswerte, keine allgemeine SVG-Norm. viewBox legt den inneren Koordinatenraum fest; die dargestellte Pixelgröße bestimmst du getrennt. MDN erklärt viewBox.

Zeichenraum

24 × 24 Einheiten

Kontur

1,8 · runde Enden

Füllung

Keine

Grundrand

3 Einheiten als Startwert

Die Strichstärke misst sich hier in Einheiten des SVG-Zeichenraums. Bei gleichem viewBox und gleicher Anzeigegröße lässt sich das Gewicht unmittelbar vergleichen. W3C: stroke-width.

02 · Sichtbar statt vermutet

So wirkt eine uneinheitliche Kontur.

Links sind Kalender, Ordner und Uhr absichtlich mit verschiedenen Strichstärken gezeichnet. Rechts verwenden dieselben Formen ein gemeinsames Profil. Wähle die Größe und betrachte die Icons ohne Vergrößerung.

Die gemeinsame Kontur behebt hier genau einen Fehler. Prüfe zusätzlich Abstände, erkennbare Bedeutung und optisches Gewicht. Ein Kreis kann bei denselben Außenmaßen größer wirken als ein offener Ordner. Solche Korrekturen sind bewusste Gestaltung und gehören in deine Prüfung.

03 · Ein vollständiges Beispiel

Ein einfaches SVG lässt sich nachvollziehen.

Dieses Uhr-Icon braucht nur einen Kreis und einen Pfad. Der Code enthält keine eingebetteten Bilder oder externen Ressourcen. Du kannst ihn als clock.svg speichern und in einem geeigneten SVG-Editor öffnen.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.8"
     stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="8"/>
  <path d="M12 7v5l3 2"/>
</svg>

Eigener Erklärungscode. Die Beispielwerte dienen dem Vergleich und sind kein automatisches Qualitätszertifikat für fremde Dateien.

04 · Dein Freigabecheck

Sechs Prüfungen vor dem Bündeln.

Nutze die Liste für deine tatsächlich exportierten Dateien. Die Auswahl bleibt nur auf dieser Seite und wird weder gespeichert noch übertragen.

0 von 6 Prüfungen erledigt

Packe nur das ein, was du geprüft hast.

Ein brauchbarer Download enthält die tatsächlichen SVGs, eine passende Vorschau, klare Dateinamen und verständliche Nutzungsbedingungen. Öffne das fertige ZIP selbst einmal neu und kontrolliere, ob die enthaltenen Dateien deiner Beschreibung entsprechen. Unser kostenloses Beispielset zeigt die Auslieferungsstruktur; es belegt keine Nachfrage oder Verkäufe.