SVG Waveform Generator
Create scalable SVG waveform visualizations from audio data — crisp at any size, interactive with CSS and JavaScript.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why SVG for Audio Waveforms
SVG waveforms outperform canvas and raster waveforms for podcast and music UI.
- Infinite scale: waveforms display crisply in any container width — no re-rendering
- CSS styling: bar colors, animation, and hover states via CSS without canvas redraw
- Accessibility: add ARIA labels and keyboard-navigable regions to SVG waveform
- Lightweight: a 100-bar waveform SVG is typically 3–5KB
- Interactive: click/scrub events on SVG bars to seek audio position
Generating SVG Waveforms
Tools and libraries for audio-to-SVG waveform generation.
- audiowaveform (BBC): CLI tool — generates waveform data JSON → svg from audio files
- wavesurfer.js: renders interactive waveform in SVG or Canvas from audio URL
- peaks.js (BBC): full-featured waveform editor using SVG, with segment markers
- Web Audio API: analyzeAudio() → Float32Array → generate SVG rects from amplitude values
- ffmpeg + script: extract amplitude data with ffmpeg, render as SVG with Node.js
Frequently Asked Questions
How do I create an SVG waveform from a podcast audio file?
Use the audiowaveform CLI: audiowaveform -i podcast.mp3 -o waveform.svg. Or process with ffmpeg to extract amplitude data, then generate SVG <rect> bars proportional to amplitude values.
How many bars should an SVG waveform have?
100–200 bars provides a good visual resolution for most player widths. More bars (500+) for detailed views. Each bar is a <rect> in the SVG — 200 bars = still under 10KB.
Can I animate an SVG waveform during audio playback?
Yes — update SVG bar heights or colors with JavaScript in sync with the Web Audio API's AnalyserNode. This creates a live waveform/spectrum analyzer animation.
Can I make an interactive SVG waveform for a podcast player?
Yes — add click handlers to the SVG waveform bars. On click, calculate the audio position from the clicked bar's x position and call audio.currentTime = position. This gives you a scrubable waveform.
What's the difference between a waveform and a spectrogram SVG?
A waveform shows amplitude over time (volume). A spectrogram shows frequency distribution over time (pitch). Waveforms are simpler to generate and display. Spectrograms require FFT processing and 2D color mapping.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free