Softonic

SVG-Formgenerator

Schritt 1 / 2

Die meisten Designsysteme benötigen nur einen kleinen Wortschatz an Formen: einen Kreis für ein Avatar, ein Quadrat für einen Statuschip, ein Dreieck für ein Play-Icon, einen Stern für eine Bewertung, ein Sechseck für ein Abzeichen. Dieser Generator rendert alle sieben Standardformen (Kreis, Quadrat, Dreieck, Stern, Sechseck, Fünfeck, Herz) mit perfekt kalibrierter Geometrie, Sternspitzen am richtigen inneren Radius, Sechsecke und Fünfecke mit der Spitze nach oben, Herz zentriert auf der Leinwand, und gibt das <svg> aus, bereit zum Einfügen.

So generieren Sie eine Form

  1. 1

    Wählen Sie eine Form

    Kreis, Quadrat, Dreieck, Stern, Fünfeck, Sechseck oder Herz.

  2. 2

    Größe und Strich festlegen

    Leinwandgröße in Pixeln. Die Strichbreite steuert das Gewicht der Umrandung; 0 entfernt die Umrandung.

  3. 3

    Füll- und Strichfarbe wählen

    Jede Hexfarbe. Setzen Sie die Füllung auf `none` für hohle Formen.

  4. 4

    Für Sterne, Punkte festlegen

    Das Sternprimitive akzeptiert 3-12 Punkte. Fünf ist klassisch; sieben gibt einen Sheriff-Abzeichen-Look.

  5. 5

    Kopieren Sie das SVG

    Markup verwendet das entsprechende SVG-Primitiv (`<circle>`, `<rect>`, `<polygon>`, `<path>`) für minimale Bytes.

Formgeometrie auf einen Blick

Form SVG-Primitiv Wichtige Parameter
Kreis <circle> radius, fill, stroke
Quadrat <rect> width, height, stroke (kein rx hier)
Dreieck <polygon> (3 Punkte) gleichseitig, nach oben zeigend
Stern <polygon> (N × 2) Punkte (3-12), Verhältnis innerer/äußerer Radius
Fünfeck <polygon> (5 Punkte) nach oben zeigend
Sechseck <polygon> (6 Punkte) nach oben zeigend (30° drehen für flach)
Herz <path> mit Béziers zentriert auf der Leinwand, symmetrisch

Beispielausgabe: ein fünfzackiger Stern

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

Der innere Radius ist auf 40 % des äußeren Radius festgelegt, was den klassischen Proportionen entspricht, die in Flaggen- und Pokalsternen verwendet werden.

Anwendungsfälle

  • Avatare und Masken, Kreis als Clip-Pfad für Profilbilder.
  • Statuschips, Quadrat (abgerundet über CSS border-radius oder später rx) als einfacher Flaggenindikator.
  • Bewertungs-UIs, Sterne gefüllt, halb gefüllt und umrandet für 0-5 Skalen.
  • Abzeichen und Wappen, Sechseck mit innerem Text oder Icon.
  • Affektionsschaltflächen, Herz für Likes, Wunschlisten und Speicher.

Warum SVG-Primitiven über einen generischen Pfad

Verwendung von <circle> oder <polygon> anstelle des entsprechenden <path>:

  • Ist kleiner in Bytes für einfache Formen (10-30 Bytes).
  • Ist einfacher zu animieren, Attribute wie r, cx, cy, points sind direkt mit CSS oder GSAP tweenbar.
  • Liest sich klarer in Inspektoren und Diffs.

Für komplexe Formen (Blobs, Icons, Logos) gewinnen Pfade, da sie Kurven und gemischte Segmente in einem einzigen Element beschreiben können.

Barrierefreiheit

Alle generierten SVGs sind standardmäßig dekorativ. Wenn die Form eine Bedeutung hat (ein roter Kreis = Fehler, ein grüner Haken = Erfolg), wickeln Sie sie in einen Elternteil mit role="img" und einem aria-label, oder fügen Sie ein <title>-Kind innerhalb des SVG hinzu.

Häufig gestellte Fragen

Der innere Radius bestimmt die “Fülle” jedes Arms. Dieser Generator verwendet inner = 40 % von außen für ein ausgewogenes Aussehen. Um einen schärferen Stern zu erhalten, senken Sie das Verhältnis im ausgegebenen SVG (z. B. 25 %); für einen stumpferen, Lego-Stern erhöhen Sie es auf 60 %.

Dieser Generator gibt ein einfaches <rect> aus. Fügen Sie rx="8" ry="8" zum Rechteck hinzu, um die Ecken abzurunden, oder verwenden Sie die CSS-Eigenschaft border-radius, wenn Sie das SVG umwickeln.

Ja, wickeln Sie das SVG in einen Elternteil mit transform: rotate(30deg), oder bearbeiten Sie den Pfad: verschieben Sie den Startwinkel um 30°. Der Generator ist standardmäßig nach oben zeigend, da dies den meisten Abzeichendesigns entspricht.

Ja. Das SVG verwendet das richtige viewBox, ganzzahlige Pixelkoordinaten und minimalen Markup. Sie können es ohne Modifikation in React, Vue, Astro, E-Mail oder einfaches HTML einfügen.

Nein. Die Formparameter werden verwendet, um das SVG für die aktuelle Anfrage zu rendern und verworfen.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

Vision Board erstellen

Verwandeln Sie Ihre Ziele in ein visuelles Board: Bilder hochladen, persönlichen Titel und Bildunterschriften ergänzen, Farben und Layout wählen und ein druckbares PNG herunterladen. Alles bleibt in Ihrem Browser.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Bildrahmen hinzufügen

Fügen Sie um jedes Foto einen einfarbigen Rahmen mit einstellbarer Dicke, einer kontrastierenden Innenlinie und Live-Vorschau hinzu, alles in Ihrem Browser.

Liniertes Papier Generator

Erstellen Sie kostenlos druckbares liniertes Papier. Wählen Sie College-, breite oder schmale Linierung, legen Sie den Zeilenabstand in mm, das Papierformat und eine Randlinie fest und drucken Sie das Blatt oder laden Sie es als SVG herunter.

Tool in anderen Sprachen verfügbar