SVG Scheider Generator
Genereer direct SVG-sectiescheiders. Kies driehoek, diagonaal, zigzag, curve of pijl — kopieer het HTML-fragment en gebruik het tussen paginasecties.
① Kies een vorm ② Stel hoogte en vulkleur in ③ Kopieer de SVG HTML
Vulkleur
#C9B89A
Hoe het werkt
Elke scheider is een SVG op volle breedte met preserveAspectRatio="none". De polygoon- of padcoördinaten zijn gedefinieerd in een viewBox die overeenkomt met de hoogte, zodat de vorm elke containerbreedte vult.
Spiegelopties
Verticaal spiegelen keert de vorm ondersteboven met transform: scaleY(-1). Horizontaal spiegelen spiegelt links-rechts met scaleX(-1). Beide kunnen worden gecombineerd voor 4 oriëntaties per vorm.
Gebruik
Plaats de SVG tussen twee secties. Stel de vulkleur in om overeen te komen met de onderliggende sectie. Voeg display:block toe voor volledige dekking.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none" width="100%" height="80" style="display:block">
<g fill="#c9b89a">
<polygon points="-500,80 720,0 1940,80" />
</g>
</svg>
Wat is een SVG-sectiescheider?
Een SVG-sectiescheider is een schaalbare vectorvorm tussen twee paginasecties voor een vloeiende visuele overgang. Veelgebruikte vormen zijn driehoeken, diagonale sneden, zigzags, curves en pijlen. Omdat de scheider in SVG is gedefinieerd met preserveAspectRatio="none", strekt deze zich uit tot elke containerbreedte. Deze techniek vereist geen afbeeldingen.
Veelgestelde vragen
Een SVG-sectiescheider is een schaalbare vectorafbeelding tussen twee paginasecties voor een vloeiende visuele overgang. Scheiders gebruiken vormen zoals driehoeken, curves of zigzags.
Het SVG-attribuut preserveAspectRatio="none" vertelt de browser om de SVG-inhoud exact uit te rekken naar de containerafmetingen, waarbij de oorspronkelijke beeldverhouding wordt genegeerd.
Een curvescheider gebruikt een vloeiend kubisch Bezier-pad verankerd in het bovenmidden van het viewBox, wat een enkele zachte boog creëert. Een golfscheider gebruikt een sinusvormig pad met meerdere pieken.
Stel de vulkleur in deze tool exact in op de background-color van de sectie onder de scheider.
Ja. Elke vorm heeft 4 mogelijke oriëntaties door de combinatie van verticaal en horizontaal spiegelen, dus 5 vormen × 4 oriëntaties = 20 unieke scheiders.
Plak de SVG HTML direct tussen de twee section-tags. Zorg dat de SVG display:block heeft om de kleine ruimte te elimineren die browsers toevoegen onder inline SVG-elementen.
Ja. Inline SVG maakt deel uit van de HTML DOM en vereist geen HTTP-verzoeken. Zoekmachines lezen het als HTML.