Softonic

SVG-streeppatroongenerator

Stap 1 / 4
Volgende

Straalpatronen zijn een van de meest betrouwbare manieren om een heldsectie, scheiding of lege kaart te vullen zonder afhankelijk te zijn van een standaardfoto. Deze generator genereert een schone SVG-bestand gebaseerd op <pattern> met twee kleuren, een instelbare streepbreedte en een rotatiehoek, zodat hetzelfde bestand nauwkeurig schaalbaar is van een 320px mobiel heldbeeld tot een 4K bureaubladbanner.

Hoe je een SVG-streeppatroon genereert

  1. 1

    Stel de schermgrootte in

    Geef de gewenste breedte en hoogte op, SVG gebruikt een viewBox, waardoor het ook op de pagina schaalbaar blijft.

  2. 2

    Straalbreedte selecteren

    Kleinere waarden zorgen voor een strakke streepstructuur; grotere waarden leiden tot banden in de vorm van een parapet.

  3. 3

    Kies de hoek

    Gebruik 0 voor horizontale lijnen, 90 voor verticale lijnen of 45 voor klassieke diagonalen.

  4. 4

    Kies twee kleuren

    Stel de hex-waarden van voorgrond en achtergrond in, transparante strepen zijn ook prima.

  5. 5

    Kopieer de SVG

    Plak het direct in de tekst, sla het op als een .svg-bestand of plaats het in een CSS-achtergrond met behulp van de SVG-naar-CSS-converter.

Hoe het patroon wordt opgebouwd

De SVG-definitie bevat een kleine <pattern> met de grootte van twee strepen, gevolgd door een <rect> die het hele viewBox bedekt wordt door een fill="url(#stripes)". Aangezien patronen automatisch worden herhaald, verandert een wijziging in de schermgrootte niet de dikte van de strepen, maar alleen het aantal strepen dat past.

patternTransform="rotate(angle)" zorgt ervoor dat u diagonalen kunt gebruiken zonder de geometrie opnieuw te hoeven berekenen. Het patroon past nog steeds naadloos bij elke hoek.

Handboek voor de breedte van strepen

breedte van de streep weergave veelgebruikt
2–6 px Fijne streepmotieven Vormachtige achtergronden met subtiele textuur
10–20 px Gebalanceerde diagonaal Hoofdssecties, kaarten, scheidingen
30–60 px Sterke schermdekking Banners op de landingpagina en vakantieartwerken
80 px+ Blokken in posterformaat Koppen die op grote afstand moeten worden weergegeven

Tippen

Houd de contrastgraad laag (bijvoorbeeld #f5f5f5 versus #ffffff) wanneer het patroon achter tekst staat. Hoeken van 15, 30 en 45 graden lijken meer ‘geconceerd’ dan een strikte hoek van 0 of 90 graden. Om de strepen te animeren, wikkel het <rect> om een <g> en beweeg het in een lus; dankzij de patroonplaten krijgt u gratis oneindige scrollfunctie. Het resultaat is puur SVG zonder externe referenties, waardoor het veilig is om het te integreren in HTML- of e-mail templates die de <script>-taggen verwijderen.

Veelgestelde vragen

Ja. Speel de uitvoer op als een .svg-bestand en verwijst naar het bestand met background-image: url(...) of background-repeat: repeat; of voer het in de SVG-naar-CSS-converter om een URL voor inlinegegevens te verkrijgen.

Diagonalen worden door de browser anti-aliasd. Als u randverschijnselen zien, verklein de streepbreedte met 1 tot 2 pixels of rasteriseer naar een grotere PNG-bestand en schaal deze af.

De kleurkiezers leveren effen kleuren, dus maak een streep transparant door de uitvoer-SVG te bewerken: zet één fill op none, of op een 8-cijferige hex met alpha zoals #00000000. Wat achter de SVG zit, schijnt er dan doorheen.

Het resultaat is van jou: het bestaat uit een automatisch gegenereerde markering op basis van je invoergegevens, zonder gebruik van merkbeschermde vormen of externe assets.

Je twee kleuren en de breedte en hoogte worden alleen naar onze server gestuurd om het SVG-voorbeeld te renderen; er wordt niets opgeslagen of gelogd en er worden geen bestanden geüpload.

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.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

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.

Afbeelding naar grijswaarden

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

Contactblad maken

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

Tool beschikbaar in andere talen