Softonic

SVG-sectieverdeler maken

Stap 1 / 3
Volgende

Landingspagina’s hebben tegenwoordig zelden meer duidelijke horizontale grenzen tussen gekleurde secties; deze smelten naadloos samen via een gebogen golfvorm, een schuine helling of een rij driehoeken. Allemaal zijn dit eenvoudige SVG-vormen: een viewBox met een grootte die overeenkomt met de paginabreedte, een polygoon of pad gevuld met de achtergrondkleur van de volgende sectie en geankerd aan de onderkant van de vorige sectie. Deze generator genereert deze vormen in vijf stijlen (golf, curve, helling, driehoeken, trappen), met elke gewenste breedte, hoogte, kleur en verticale oriëntatie.

Hoe bouwt u een sectieverdeler?

  1. 1

    Kies een stijl

    Golfvorm (S-kromme), curve (enkele boog), helling (diagonaal), driehoeken (zigzag), trappen (gestapeld).

  2. 2

    Breedte en hoogte instellen

    breedte = de pagina-breedte (1200–1920); hoogte = de hoogte van de scheiding (meestal 50–200 px)

  3. 3

    Kies de vulling

    Kies de achtergrondkleur van het volgende gedeelte zodat de scheider naadloos erin verschijnt.

  4. 4

    Verticaal omkeren

    Wijzig de instelling van flipY om de vorm om te keren als u deze naar boven wilt richten in plaats van naar beneden.

  5. 5

    Kopieer de SVG

    Plaats het aan de onderkant van het uitgaande gedeelte of aan de bovenkant van het invoerende gedeelte. Gebruik `preserveAspectRatio="none"` (al ingebouwd), zodat de vorm zich aanpast aan het weergavevenster.

De vijf stijlen en wanneer je ze moet gebruiken

Stijl Sfeer Goed tussen
Golf Zacht, vriendelijk Hero → testimonials, pastelpaletten
Curve Strak, elegant Feature-grid → CTA, minimalistisch ontwerp
Helling Modern, gedurfd Donkere hero → lichte content, thema’s met hoog contrast
Driehoeken Scherp, technisch Ontwikkelaarstools, SaaS-dashboards
Trappen Gestructureerd, retro Prijstabellen, redactionele layouts

Plaats een scheider in uw markering

Typische plaatsing aan de onderkant van een sectie:

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Waarom preserveAspectRatio="none"

Standaard schaalt een SVG uniform. Voor een scheider die de volledige weergave omvat, moet de vorm horizontaal uitrekken, van rand tot rand, niet een kleine golf die centraal op de pagina ligt. preserveAspectRatio="none" beveelt de renderer aan het aspectverhouding vrij te verstoren, precies wat scheiders vereisen.

Toegankelijkheid en SEO

  • Markeer de verpakking aria-hidden="true" zodat schermlezers de decoratieve vorm overslaan.
  • Houd de SVG-bestanden kleiner dan enkele kilobytes; grote inline SVG-bestanden vertragen de analyse van het DOM. De uitvoerbestanden zijn hierbij sterk kleiner dan 1 KB.
  • Vermijd rasterbeelden voor scheidingen: ze worden op ultrawijdmonitoren en Retina-schermen gepixeliseerd.

Veelgestelde vragen

Niet strikt genomen: het attribuut width van de SVG bepaalt de intrinsieke grootte, maar met preserveAspectRatio="none" en een CSS-attribuut width: 100% vult de vorm de hele container. Het instellen van de breedte op een afgeronde waarde zoals 1200 maakt de cijfers in de route eenvoudig leesbaar.

Dit is meestal de standaard-inline-basislijn van het SVG-element. Voeg display: block (of vertical-align: bottom) toe aan het SVG om de ruimte te verwijderen.

Ja. Genereer twee of drie scheidslijnen in verschillende kleuren en transparantiegraden en stapel ze op elkaar. Verschuif elke lijn met een paar pixels met behulp van margin-top of CSS transform om een parallax-effect te creëren.

Het gegenereerde SVG-bestand is statisch. Voor geanimeerde golven kunt u een CSS-keyframe met de code transform: translateX() toevoegen aan het omhullingsbestand, of twee kopieën naast elkaar plaatsen en deze verschuiven.

Nee, niets wordt opgeslagen; de SVG wordt elke keer opnieuw gegenereerd op basis van de huidige formulierwaarden.

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