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 radii
when 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.