How to use SVG Wave Generator
- Choose a wave style and adjust the amplitude.
- Set the colour to match the section it divides.
- Copy the SVG and mark it aria-hidden.
- Use preserveAspectRatio=“none” with width: 100% so it spans any viewport.
- Mark it aria-hidden=“true” — it is decorative and carries no meaning.
- Inline the SVG rather than base64-encoding it; it is text and compresses well already.
Why SVG rather than an image
A wave is a few curve commands, so the SVG is typically well under a kilobyte, scales to any width without blurring, and can be recoloured in CSS. A PNG of the same shape is orders of magnitude larger, fixed in resolution, and needs regenerating whenever the brand colour changes. There is no case where the raster version is better.
Making it span any viewport
Set preserveAspectRatio=“none” and give the SVG width: 100% with a fixed height, so the wave stretches horizontally rather than scaling proportionally and leaving gaps. Without that, a divider that looks right at 1440px will show background at 2560px — the most common implementation error with these shapes.
Keep them decorative
A divider carries no information, so give it aria-hidden=“true” and no accessible name; otherwise a screen reader announces a graphic that means nothing. Also watch the height on phones: a wave sized for a desktop hero can eat a third of a small screen. Either scale it down at narrow widths or accept a straighter edge there.
Frequently asked questions
Can I use multiple wave layers with different colors?
Is this tool client-side only?
Can I download the SVG file, not just copy the code?
Why is there a gap beside my wave on wide screens?
Should I use SVG or a PNG for a section divider?
Do wave dividers affect accessibility?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.