Give an SVG a deliberate canvas

Start with the outer box

A small icon can look centered inside its editor and still arrive with unexpected margins elsewhere. SVG has a viewBox that describes the coordinate rectangle mapped into its displayed viewport.

Inkscape’s export guide separately offers page, drawing and selection bounds. This researched tutorial is for teens and adults making simple vector graphics.

For a practice design, use a square page and a single original shape that leaves equal breathing room on all sides. Write down both the canvas dimensions and the intended display size.

The exercise is about the relationship between a shape and its container, not about finding a supposedly universal icon size.

Compare two exports

Export a page-based PNG and a drawing-based PNG with different names. Open both at the same displayed width.

If the drawing export fits tightly around the object while the page export includes the planned margin, the difference comes from bounds rather than mysterious scaling.

Keep the SVG as a vector source and inspect it in the receiving program or browser. A viewBox allows the same coordinate design to be scaled, but it does not decide whether thin lines remain useful at a very small size.

Judge the actual shape at its intended use. A delicate interior gap may disappear even when the file is technically valid.

Leave a predictable result

For a set of icons, use consistent outer canvases so every object does not receive a different apparent size. Note whether the background is transparent and what export bounds you used.

The next volunteer then has a repeatable recipe. This lesson should take roughly twenty minutes; a complete visual identity or accessibility assessment requires work beyond this single-canvas comparison.