Polyline/polygon bounding box cuts off part of miter joint

[ANSH3LL]

The tips of miter joints in polygons, polylines and paths are cut-off when Crop by BBox is selected.
Rect shapes rotated 45 degrees are also affected when stroke is applied.
It seems that the bbox calculations do not include the full length of the miter.
This might be a bug in the underlying resvg library, but I'm not sure how resvg-js performs cropping.

Polyline: Before cropping

Polyline: After cropping

Path: Before cropping

Path: After cropping

Rotated rect: Before cropping

Rotated rect: After cropping

---

Polyline svg

<svg viewBox="18 8 43 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="60 20 20 20 30 30 30 10 40 20" fill="none" stroke="black" stroke-linejoin="miter" />
</svg>

Path svg

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    stroke-miterlimit="8"
    d="M1,29 l7   ,-3 l7   ,3
       m2, 0 l3.5 ,-3 l3.5 ,3
       m2, 0 l2   ,-3 l2   ,3
       m2, 0 l0.75,-3 l0.75,3
       m2, 0 l0.5 ,-3 l0.5 ,3" />
</svg>

Rect svg

<svg width="31" height="31" xmlns="http://www.w3.org/2000/svg">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" stroke="pink" stroke-width="2" />
</svg>

[yisibl]

Yes, it could be an upstream problem. You need to clone the latest resvg and run:

cargo run --example draw_bboxes -- bbox.svg bbox.png -z 10

You'll see that the bbox has a red border.

By the way, in what scenarios do you use Crop by BBox?

[ANSH3LL]

I use it when generating shapes programmatically so that I don't have to calculate the svg viewbox.

[ANSH3LL]

It appears that the problem is in resvg. The polyline svg's bbox is especially broken. Maybe @RazrFalcon can look into this?

[ANSH3LL]

Also, what is the difference between the green and red borders?

[RazrFalcon]

Path bbox calculation is correct. The draw_bbox example glitches out on Polyline svg because it ignores the viewbox transform. I've updated the example code to fix it just now.

Red rectangle - path bbox.
Green rectangle - path bbox including stroke.

Meaning the issue is with the way resvg-js reinterprets resvg/usvg output.

[yisibl]

Meaning the issue is with the way resvg-js reinterprets resvg/usvg output.

Yes, This requires resvg-js to update resvg to the latest version.