Softonic

SVG-vormgenerator

Stap 1 / 2

De meeste ontwerpsystemen hebben slechts een beperkt aantal vormen nodig: een cirkel voor een avatar, een vierkant voor een statuschip, een driehoek voor een spelicon, een ster voor een beoordeling en een hexagon voor een badge. Deze generator genereert alle zeven standaardvormen (cirkel, vierkant, driehoek, ster, hexagon, pentagon en hart) met perfect afstemde geometrie, de ster heeft de juiste binnenstraling, de hexagonen en pentagonen zijn met de punt naar boven georiënteerd en het hart is centraal op het scherm, en levert het resultaat <svg> uit, klaar voor plakken.

Hoe je een vorm genereert

  1. 1

    Kies een vorm

    Cirkel, vierkant, driehoek, ster, pentagon, hexagon of hart.

  2. 2

    Setgrootte en penseelstreep

    De grootte van de canvas in pixels. De lijndik bepaalt de dikte van de rand; 0 verwijdert deze volledig.

  3. 3

    Kies de kleur voor het vullen en de lijn

    Elke hexagonale kleur. Stel de vulling in op `none` voor holle vormen.

  4. 4

    Voor sterren: instellingen

    De Star-primitief accepteert tussen de 3 en 12 punten. Vijf is klassiek; zeven geeft een uiterlijk dat doet denken aan een sheriff-embleem.

  5. 5

    Kopieer de SVG

    Markup gebruikt de corresponderende SVG-primitieven (`<circle>`, `<rect>`, `<polygon>`, `<path>`) voor zo min mogelijk bytes.

Vormgeometrie in één oogopslag

Vorm SVG-primitief Belangrijke parameters
Cirkel <circle> straal, vulling, lijndikte
vierkant <rect> breedte, hoogte, lijndikte (rx wordt hier niet vermeld)
driehoek <polygon> (3 punten) gelijkzijdig, gericht naar boven
* Ster <polygon> (N × 2) punten (3–12), verhouding binnenste/ buitenste straal
Pentagon <polygon> (5 punten) gericht naar boven
Hexagon <polygon> (6 punten) gericht met de punt naar boven (rotatie: 30° voor platte vorm)
Hart <path> met Beziers centraal op doek, symmetrisch

Voorbeelduitvoering: een vijfsterrenbeeld

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

De binnenstraal is vastgesteld op 40% van de buitenstraal, wat overeenkomt met de klassieke verhoudingen die worden gebruikt bij vlag- en trofee Sterren.

Toepassingsvoorbeelden

  • Avatars en maskers, gebruik een cirkel als klippad voor profielfoto’s.
  • Statuschips – vierkantig (afgerond met CSS border-radius of een latere versie van rx), als eenvoudige indicatie voor de status.
  • Beoordelingsinterface’s – sterren die volledig gevuld, deels gevuld of met een lijn omgekrooid zijn, voor schalen van 0 tot 5.
  • Emblemen en kroonmotieven, een hexagon met tekst of een icon op de binnenkant.
  • Afiëatieknoppen, een hart voor ‘lik’, wensenlijsten en gespeegelde items.

Waarom SVG-primitieven via een generieke route

Gebruik <circle> of <polygon> in plaats van het equivalente <path>:

– Is kleiner in bytes voor eenvoudige vormen (10–30 bytes). – Eenvoudiger te animeren – attributen als r, cx, cy en points kunnen rechtstreeks worden gemoduleerd met CSS of GSAP. – Leesbaarder in inspectieverslagen en afwijkingen.

Voor complexe vormen (blobs, iconen, logos) zijn paden de voorkeur waard, omdat ze curven en gemengde segmenten kunnen weergeven in één enkel element.

Toegankelijkheid

Alle gegenereerde SVG-bestanden zijn standaard decoratief. Als de vorm een betekenis heeft (een rode cirkel = fout, een groene vakje = succes), wikkel deze in een ouder-element met role="img" en aria-label, of voeg een kind-element met <title> toe binnen het SVG.

Veelgestelde vragen

De binnenste straal bepaalt de ‘dikte’ van elke arm. Deze generator gebruikt een verhouding van binnenste = 40% van buitenste om een evenwichtig uiterlijk te bereiken. Voor een scherper sterretje verlaag het verhouding in het uitgevoerde SVG-bestand (bijvoorbeeld tot 25%); voor een minder scherp, lego-achtig sterretje verhoog het tot 60%.

Deze generator produceert een eenvoudige <rect>. Voeg rx="8" ry="8" toe aan de rect om de hoeken af te ronden, of gebruik de CSS-eigenschap border-radius als u het SVG-werkstuk wilt omsluiten.

Ja – wikkel de SVG op in een ouder-element met transform: rotate(30deg), of wijzig de route door de starthoek met 30° te veranderen. De generator stelt standaard de richting op naar boven, omdat dit overeenkomt met de meeste badgeontwerpen.

Ja. De SVG gebruikt een correcte viewBox, coördinaten op volledige pixelsniveau en minimale markering. U kunt hem zonder wijzigingen gebruiken in React, Vue, Astro, e-mail of gewone HTML.

Nee. Vormparameters worden gebruikt om de SVG voor de huidige vraag te renderen en worden daarna verwijderd.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Afbeelding naar grijswaarden

Zet kleurenafbeeldingen in uw browser om naar grijswaarden. Gratis en privé, er wordt niets geüpload.

Kruissteekpatroon maken

Zet JPEG, PNG of WebP om in een afdrukbaar kruissteekpatroon van 10–150 steken met 2–40 eigen kleuren, symbolen, exacte aantallen en stofmaten.

Tool beschikbaar in andere talen