Mobile app version of vmapp.org
Login or Join
Smith574

: It sounds like what you are asking for is similar to box-sizing:border-box in CSS. There is no analog for this property in SVG. Inkscape does have a built-in work around for this problem.

@Smith574

It sounds like what you are asking for is similar to box-sizing:border-box in CSS. There is no analog for this property in SVG.

Inkscape does have a built-in work around for this problem. The work around attempts to re-size your object so that result is as though the stroke moved inward. This is a one-time only function so you'd have to do it again any time you size your object. It also requires you to plan ahead your sizes.


Draw a rectangle with a stroke width of 5px.
Duplicate it with Ctrl+D and move it off to the size.
In your duplicate, change your border to 10px.
With the duplicate selected, click Path > Inset.


If you compare the size of the two rectangles, you'll see that it didn't work! The reason is for the imaginary border box. So when you change to inset for a 10px border, it reducing the object's size by (w / 2) + 1 px.

In other words, to expand the border of a 5px box, could change it to 9px and use inset once, change it to 13px and use inset twice, change it to 17px and use inset 3 times, etc. You can't just pick an arbitrary value, you have to grow the border based on the current border size.

This is obviously really awkward to use. A more reliable technique is described in Wrzlprmft's answer.

10% popularity Vote Up Vote Down


Login to follow query

More posts by @Smith574

0 Comments

Sorted by latest first Latest Oldest Best

Back to top | Use Dark Theme