Building an SVG Treemap by Hand
A treemap encodes hierarchical data as nested rectangles whose areas are proportional to each node's value.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Squarified Layout Algorithm
A treemap's core challenge is subdividing a rectangle into smaller rectangles whose areas match data proportions while keeping each rectangle's aspect ratio close to square, since long thin slivers are hard to read and compare visually.
- Each rectangle's area is proportional to its underlying data value
- Keeping aspect ratios near square makes rectangles easier to compare
- Long thin slivers are visually hard to read and should be avoided
Rendering Nested Rectangles in SVG
Once the layout algorithm produces x, y, width, and height for each node, rendering is straightforward: emit a rect element per node with those computed coordinates, optionally nesting child groups inside parent rectangles to reflect the data's hierarchy visually.
- The layout algorithm computes x, y, width, and height for each node
- Each node renders as a single rect element with those coordinates
- Nesting child groups inside parents reflects the hierarchy visually
Frequently Asked Questions
Why do treemap algorithms try to keep rectangles near square?
Long thin rectangles are visually difficult to compare in area, so squarified layouts produce treemaps where relative sizes are much easier to judge accurately.
Can a treemap show more than one level of hierarchy?
Yes, nesting child rectangles inside their parent's bounds shows multiple levels, though too many levels can make the smallest rectangles unreadably tiny.
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