Chart Legends in SVG
A legend pairs a color swatch with a label for each series, typically as repeated groups positioned along a row or column.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Grouping Swatches with Labels
Each legend entry is naturally a g element containing a small rect or circle swatch filled with the series color plus a text label, and positioning the whole group with a transform translate keeps the swatch and label locked together as one unit.
- Each entry is a g element holding a colored swatch and a text label
- A transform translate positions the entire group as one unit
- This keeps swatch and label locked together regardless of layout
Direct Labeling as an Alternative
Legends force readers to look back and forth between the key and the chart, so where space allows, labeling series directly at the end of each line or beside each area often communicates faster and removes the cognitive cost of the legend lookup entirely.
- Legends require readers to look back and forth to decode colors
- Direct labels at the end of each series remove that lookup cost
- Where layout permits, direct labeling usually communicates faster
Frequently Asked Questions
Why group each legend swatch and label together?
Grouping in a g element lets a single transform translate position both together, so adjusting layout never misaligns a swatch from its label.
Is a legend always necessary?
No — where space allows, labeling each series directly on the chart is often clearer, since it removes the back-and-forth lookup a legend requires.
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