Building an SVG Heatmap by Hand
A heatmap is a grid of rect elements whose fill colors map to data values, making it one of the simplest charts to hand-code.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Laying Out the Grid of Cells
A heatmap's structure is a two-dimensional grid where each cell is a rect element positioned by multiplying its row and column index by a fixed cell size, producing evenly spaced squares that align without needing any layout calculation beyond simple multiplication.
- Each cell is a rect positioned by row and column index times cell size
- Simple multiplication produces evenly spaced, perfectly aligned squares
- No complex layout math is needed beyond this index-based positioning
Mapping Values to Fill Colors
The visual encoding comes from mapping each data value onto a color scale, typically by normalizing the value between the dataset's minimum and maximum, then interpolating between two or more colors to produce the fill applied to that cell's rect element.
- Normalize each value between the dataset's minimum and maximum first
- Interpolate between two or more colors using that normalized position
- Apply the resulting color as the fill on that cell's rect element
Frequently Asked Questions
Do I need a charting library to build an SVG heatmap?
No, a heatmap is one of the simplest charts to hand-code since it's just a grid of rect elements with fill colors mapped from normalized data values.
How do I choose colors for a heatmap scale?
Sequential color scales work well for single-direction magnitude data, while diverging scales suit data with a meaningful midpoint like zero or an average.
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