Parametric shapes as path data
Polygons, stars, gears, arcs and a real superellipse — every point on a circle inscribed in the box, so nothing clips.
Parametric shapes as path data
Polygons, stars, gears, arcs and a real superellipse — every point placed on a circle inscribed in the box, so nothing clips at any size.
Which parts of the path are inside
A path that crosses itself raises a question with two legitimate answers, and SVG lets you choose with fill-rule. Under the default, nonzero, a five-pointed star drawn as one continuous crossing line fills solid, including the pentagon in the middle. Under evenodd, the same path leaves that centre hollow.
Neither is correct in general — they are different questions about the same geometry — but it explains a shape that arrives from another tool looking unexpectedly solid or unexpectedly pierced. It matters most for stars, knots, and any glyph with a counter, and the fix is one attribute rather than a redraw.
Scale with the viewBox, not with the numbers
The coordinates in a path are meaningless on their own; they are interpreted against the viewBox, which declares the coordinate system the shape was drawn in. Change the width and height the SVG is displayed at and the path scales to fit, because the viewBox has not moved.
This is why resizing an SVG never means editing its path data, and why a shape generated at one size works at any other. It also explains the sizing surprise: an SVG with a viewBox and no width or height will stretch to whatever its container gives it, while one with fixed width and height ignores the container. Setting the viewBox and leaving the dimensions to CSS is usually what you want, with preserveAspectRatio deciding what happens when the container's shape does not match the viewBox's.
The squircle is not a rounded rectangle
A superellipse satisfies |x/a|n + |y/b|n = 1. At n=2 it is a circle; as n grows it approaches a square. Around 4 to 5 is the shape used for app icons.
The difference from border-radius is curvature continuity: a rounded rectangle switches abruptly from a straight edge to a circular arc, and the eye sees the join. A superellipse has no join, which is why it reads as smoother at the same corner size.
The other shapes place their vertices on a circle inscribed in the viewBox, so the shape fills its box and never overruns it.
A path beats a polygon element
<path> works everywhere a shape can be used — in a clip path, as a mask, as an icon, in a CSS path() for motion. A <polygon> only works as an element.
Stroke changes the size
A stroke is centred on the path by default, so half of it falls outside the shape and outside the viewBox. A shape at full size with a 4px stroke clips by 2px all round. Either inset the shape or use vector-effect: non-scaling-stroke and give the viewBox room.