Softonic

SVG-formgenerator

Steg 1 / 2

De flesta designsystem behöver bara ett litet vokabulär av former: en cirkel för en avatar, en kvadrat för en statuschip, en triangel för en spela-ikon, en stjärna för ett betyg, en sexhörning för ett märke. Den här generatorn renderar alla sju standardformer (cirkel, kvadrat, triangel, stjärna, sexhörning, femhörning, hjärta) med perfekt kalibrerad geometri, stjärnspetsar vid rätt inre radie, sexhörningar och femhörningar orienterade med spetsen uppåt, hjärta centrerat på arbetsytan, och matar ut <svg> redo att klistra in.

Så genererar du en form

  1. 1

    Välj en form

    Cirkel, kvadrat, triangel, stjärna, femhörning, sexhörning eller hjärta.

  2. 2

    Ställ in storlek och streck

    Arbetsytans storlek i pixlar. Linjebredd styr konturens tyngd; 0 tar bort konturen.

  3. 3

    Välj fyllnings- och streckfärg

    Valfri hex-färg. Sätt fyllning till `none` för ihåliga former.

  4. 4

    För stjärnor, ställ in spetsar

    Stjärnprimitiven accepterar 3-12 spetsar. Fem är klassisk; sju ger ett sheriffmärkesutseende.

  5. 5

    Kopiera SVG:n

    Märkningen använder den matchande SVG-primitiven (`<circle>`, `<rect>`, `<polygon>`, `<path>`) för minsta antal byte.

Formgeometri i korthet

Form SVG-primitiv Parametrar som spelar roll
Cirkel <circle> radie, fyllning, streck
Kvadrat <rect> bredd, höjd, streck (ingen rx här)
Triangel <polygon> (3 punkter) liksidig, pekar uppåt
Stjärna <polygon> (N × 2) spetsar (3-12), inre/yttre radieförhållande
Femhörning <polygon> (5 punkter) orienterad med spets upp
Sexhörning <polygon> (6 punkter) orienterad med spets upp (rotera 30° för platt)
Hjärta <path> med Bézier centrerat på arbetsytan, symmetriskt

Exempelutdata: en femuddig stjärna

<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>

Den inre radien är fastställd till 40% av den yttre radien, vilket matchar de klassiska proportionerna som används i flagg- och pokalstjärnor.

Användningsfall

  • Avatarer och masker, cirkel som en clip-path för profilfoton.
  • Statuschips, kvadrat (rundad via CSS border-radius eller en senare rx) som en enkel flaggindikator.
  • Betygs-UI:er, stjärnor fyllda, halvfyllda och konturerade för skalor 0-5.
  • Märken och emblem, sexhörning med inre text eller ikon.
  • Tillgivenhetsknappar, hjärta för gilla, önskelistor och sparningar.

Varför SVG-primitiver framför en generisk path

Att använda <circle> eller <polygon> istället för motsvarande <path>:

  • Är mindre i byte för enkla former (10-30 byte).
  • Är lättare att animera, attribut som r, cx, cy, points är direkt tween-bara med CSS eller GSAP.
  • Läses tydligare i inspektörer och diffar.

För komplexa former (blobbar, ikoner, logotyper) vinner pathar eftersom de kan beskriva kurvor och blandade segment i ett enda element.

Tillgänglighet

Alla genererade SVG:er är dekorativa som standard. Om formen bär mening (en röd cirkel = fel, en grön bock = lyckat), linda den i ett överordnat element med role="img" och en aria-label, eller lägg till ett <title>-barn inuti SVG:n.

Vanliga frågor

Den inre radien avgör hur “fet” varje arm är. Den här generatorn använder inre = 40% av yttre för ett balanserat utseende. För en skarpare stjärna, sänk förhållandet i utdata-SVG:n (t.ex. 25%); för en trubbigare, Lego-klossliknande stjärna, höj det till 60%.

Den här generatorn matar ut en vanlig <rect>. Lägg till rx="8" ry="8" på rect:en för att runda hörnen, eller använd CSS-egenskapen border-radius om du lindar SVG:n.

Ja, linda SVG:n i ett överordnat element med transform: rotate(30deg), eller redigera pathen: förskjut startvinkeln med 30°. Generatorn använder spets upp som standard eftersom det matchar de flesta märkesdesigner.

Ja. SVG:n använder korrekt viewBox, heltalspixelkoordinater och märkning av minsta längd. Du kan släppa in den i React, Vue, Astro, e-post eller vanlig HTML utan ändring.

Nej. Formparametrar används för att rendera SVG:n för den aktuella förfrågan och kastas sedan.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Konverterare för bildformat

Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.

Invertera färger i bilden

Vänd varje RGB-kanal i en bild om för att få en negativbild – användbart vid kreativa redigeringar och när du ska titta på filmskanningar.

Verktyget finns på andra språk