Building an SVG Funnel Chart by Hand
A funnel chart stacks trapezoids whose narrowing widths show how a quantity decreases across sequential stages.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Trapezoids from Stage Value Pairs
Each funnel segment is a trapezoid whose top width comes from the current stage's value and whose bottom width comes from the next stage's value, rendered as a polygon element with four points computed by centering both widths on a shared vertical axis.
- Each segment's top width comes from the current stage's value
- Its bottom width comes from the following stage's value
- A four-point polygon centers both widths on a shared vertical axis
Labeling Stages and Drop-Off Rates
A funnel chart communicates most clearly when each segment is labeled with both its absolute value and the percentage retained from the previous stage, since the visual narrowing alone rarely conveys the precise magnitude of drop-off between two adjacent stages.
- Label each segment with its absolute value for precise reading
- Include the percentage retained from the previous stage as well
- Visual narrowing alone rarely conveys exact drop-off magnitude
Frequently Asked Questions
How is each funnel segment shaped in SVG?
Each is a polygon element with four points forming a trapezoid, where the top width reflects the current stage's value and the bottom width the next stage's.
Should funnel segments be labeled with percentages or raw values?
Both is usually best — raw values give precise magnitude while stage-to-stage percentages make the drop-off rate immediately legible.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG