The problem isn't the corners, it's that your lines extend beyond the page boundary, and are therefore being clipped by the browser. You can see, for example, that the line thickness on the edges is less than that at the corners, since the part of the line that falls outside the page boundary is not rendered. Either increase the page size to compensate, or scale down the size of your graphic so it fits entirely within the page boundary.
Yes snapping isn´t easy to set up methinks: "Snapping to bounding box corners + page borders needs to be enabled. But pixel size and alignment should work.
One thing to be aware of is that SVG draws strokes half inside, and half outside the actual path defining your shape. So if you set the stroke to 10px, for example, your page would need to be at least 310px wide to include it (300px plus 5px outside on the left, and 5px outside on the right). Alternatively the rectangle would need to be 290px to fit in a 300px page.
I was describing how the SVG format works, not how the Inkscape UI works. I agree that choosing the Visual bounding box gives the impression of a 300px × 300px rectangle fitting into a 300px × 300px page, but that's not what ends up in the SVG. Since the intention here is to produce something to be displayed in a browser, it may be useful for the OP to understand the way SVG strokes are drawn and defined outside of Inkscape.
Beginners' Questions Round corners of stroked rectangle
Inkscape.org
Hi
I have a rectangle with a stroke, and I want to set round corners.
Please see the attached image. see the left rectangle - this is how it looks in Inkscape. looks ok.
The right image is how the browser displays the same svg file. corners are not perfect.
Why is that?
Thank you
OJ
Everything outside the page is clipped as you can see on the left. Scale the rectangle to the max page size.
The problem isn't the corners, it's that your lines extend beyond the page boundary, and are therefore being clipped by the browser. You can see, for example, that the line thickness on the edges is less than that at the corners, since the part of the line that falls outside the page boundary is not rendered. Either increase the page size to compensate, or scale down the size of your graphic so it fits entirely within the page boundary.
@Xav @Polygon
Yes I saw the width differences, but I didn't realize this is because it was clipped ...hard learning curve )
How to scale exactly?
I set the both page and rectangle size to be 300x300px.
I tried to snap it to the page, but I am not sure I did that right. Is it something with the snapping ?
Yes snapping isn´t easy to set up methinks: "Snapping to bounding box corners + page borders needs to be enabled. But pixel size and alignment should work.
One thing to be aware of is that SVG draws strokes half inside, and half outside the actual path defining your shape. So if you set the stroke to 10px, for example, your page would need to be at least 310px wide to include it (300px plus 5px outside on the left, and 5px outside on the right). Alternatively the rectangle would need to be 290px to fit in a 300px page.
Not when Bounding Box is set to "Visual" like in my example above: 300x300px rectangle on 300x300px page.
I was describing how the SVG format works, not how the Inkscape UI works. I agree that choosing the Visual bounding box gives the impression of a 300px × 300px rectangle fitting into a 300px × 300px page, but that's not what ends up in the SVG. Since the intention here is to produce something to be displayed in a browser, it may be useful for the OP to understand the way SVG strokes are drawn and defined outside of Inkscape.
@Xav @Polygon
Thank you