Tips on making svg shapes more predictable on inkscape

Toggling bounding box and scaling settings can make Inkscape shapes more predictable on resize.

By Ace Z. Alba

Published on April 4, 2023, 2:43 pm

Category: Web Design

Tag: inkscape, bounding box, shapes, debugging

Inkscape has a weird way of handling border sizes on SVG which makes web design painful. When you change your border sizes, you also change the size of the shape. This is the opposite of box-sizing: border-box, which does not increase the size of the shape when resizing. This makes container alignment a mess. You end up wrestling between two size values: the original geometric box-size, which is the first base values that Inkscape uses when creating shapes, and the calculated visual bounding box-size, which is added after the shape is rendered. So when you have a 200x200 px square with a 10px border, you will actually generate a 210x210px square once you switch to Select.

Though I haven't really solved how to consistently create a box-sizing: border-box behavior for Inkscape, digging and mixing through Inkscape forum tips got me a set of tips to make SVG shape resizing less painful.

Switch from visual bounding box to geometric bounding box when needed.

On Edit > Preferences > Tools under Switch bounding box to use, toggle Geometric bounding box.

Why is this so? Though Visual bounding box may be the one you want to use, and is the default, geometric bounding box, which only uses the path as a basis for shape sizes and boundaries, is more predictable and behaves more consistently, especially when snapping to grid lines and resizing. When debugging shape distortions, you may want to toggle between these two settings.

Unselect scale stroke width and scale radiiwhen under the Select tool.

When under the Select tool, check out the top toolbar. On the right of the Height values, you'd see four settings that are toggled default. You'd want to hover over each of them to see what they do, which is scaling behavior. Toggle off the first two of the buttons, which are scale stroke width by same proportion and scale the radii of rounded corners.

Stroke width and border radius are two values that you'd want to be consistent when resizing containers. Inkscape resizes these together with the shape by default, so you'd want to turn these settings off.