Crashes because of panic

[i-am-the-slime]

thread '' panicked at /Users/runner/.cargo/git/checkouts/resvg-4b7e4ee32ad6d954/3495d87/crates/resvg/src/geom.rs:27:61:
called Option::unwrap() on a None value

Fortunately this unwrap() is gone in the most current version of resvg.
Could you publish a version that depends on the latest version? I can't seem to be able to even catch this and it crashes my server.

I think the below SVG is what's causing it:

<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="2400" viewBox="0 0 1080 2400"><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="45.0" y="556.0" width="990px" height="101px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="75.0" y="0.0" width="2325px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="1500.0" y="0.0" width="900px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="#000000" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="1080.0" width="2400px" height="1px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="45.0" y="556.0" width="990px" height="101px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="45.0" y="556.0" width="990px" height="101px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="75.0" y="0.0" width="2325px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="98.0" y="770.0" width="1px" height="203px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="75.0" y="793.0" width="3px" height="158px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="283.0" y="928.0" width="1px" height="1px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="283.0" y="928.0" width="1px" height="1px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="300.0" y="770.0" width="714px" height="203px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="300.0" y="817.0" width="360px" height="109px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="300.0" y="817.0" width="360px" height="58px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="300.0" y="853.0" dy="11.0" dx="4" stroke="0.25" font-size="36"><tspan x="300.0" dy="0">Almette Romania</tspan></text></g><g><rect class="rect" x="300.0" y="875.0" width="360px" height="51px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="300.0" y="923.0" dy="1.5" dx="4" stroke="0.25" font-size="48"><tspan x="300.0" dy="0">almette.ro</tspan></text></g><g><rect class="rect" x="705.0" y="826.0" width="286px" height="90px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="739.0" y="842.0" width="218px" height="58px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="739.0" y="878.0" dy="11.0" dx="4" stroke="0.25" font-size="36"><tspan x="739.0" dy="0">Learn more</tspan></text></g><g><rect class="rect" x="1655.0" y="866.0" width="745px" height="113px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="1655.0" y="866.0" width="722px" height="90px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="1655.0" y="866.0" width="559px" height="90px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="1655.0" y="902.0" dy="27.0" dx="4" stroke="0.25" font-size="36"><tspan x="1655.0" dy="0">Videoclipul va fi redat în curând</tspan></text></g><g><rect class="rect" x="2214.0" y="866.0" width="163px" height="90px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="1655.0" y="866.0" width="1px" height="90px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="0.0" y="0.0" width="2400px" height="1080px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="188.0" y="0.0" width="1px" height="1px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="2400.0" y="6.0" width="1px" height="1px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="37.0" y="427.0" width="2325px" height="225px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="75.0" y="607.0" width="2325px" height="473px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="75.0" y="889.0" width="2325px" height="90px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="308.0" y="1080.0" width="2092px" height="1px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="1098.0" y="438.0" width="203px" height="203px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="103.0" y="962.0" width="486px" height="101px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="103.0" y="1010.0" dy="2.5" dx="4" stroke="0.25" font-size="48"><tspan x="103.0" dy="0">Sponsorizat · 1 din </tspan><tspan x="103.0" dy="48">2 · 0:07</tspan></text></g><g><rect class="rect" x="0.0" y="1027.0" width="2400px" height="53px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g><g><rect class="rect" x="1755.0" y="6.0" width="639px" height="135px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="1755.0" y="66.0" dy="7.5" dx="4" stroke="0.25" font-size="60"><tspan x="1755.0" dy="0">Accesează site-ul adv</tspan><tspan x="1755.0" dy="60">ertiserului</tspan></text></g><g><rect class="rect" x="103.0" y="962.0" width="486px" height="101px" opacity="1.0" fill="rgb(255,255,255)" stroke="rgba(0,0,0)" stroke-width="4px" rx="8" ry="8"></rect><text x="103.0" y="1010.0" dy="2.5" dx="4" stroke="0.25" font-size="48"><tspan x="103.0" dy="0">Sponsorizat · 1 din </tspan><tspan x="103.0" dy="48">2 · 0:06</tspan></text></g><g><rect class="rect" x="120.0" y="793.0" width="158px" height="158px" opacity="0.1" fill="rgba(255,255,255,0.02)" stroke="rgba(0,0,0)" stroke-width="2px" style="user-select:none" rx="8" ry="8"></rect></g></svg>

[yisibl]

Can you simplify this SVG?

[i-am-the-slime]

Okay, @yisibl here you go:

<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="2400" viewBox="0 0 1080 2400">
      <rect class="rect" x="2214.0" y="866.0" width="163px" height="90px" opacity="0.1"></rect>
</svg>

Looks like it's opacity="0.1"

[yisibl]

I have further simplified the test cases.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect fill="green" x="450" y="0" width="100%" height="100%" opacity="0.99"></rect>
</svg>

@RazrFalcon I confirm that this is a bug introduced in resvg v0.34.0 and v0.34.1, which resvg v0.35.0 seems to fix.

Should we add this test to resvg just to be sure?

panicked at crates/resvg/src/geom.rs:27:61:
called `Option::unwrap()` on a `None` value
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

[i-am-the-slime]

Also, I don't know if this is related, but even when it doesn't crash, resvg-js never carried over any opacity values to the PNG. I'm using fill-opacity (which is actually a better idea in my case anyway) but that's surely not quite right.

[RazrFalcon]

@yisibl I assume this is out-of-viewbox rendering bug and we have a test for it already. So no need to.

[i-am-the-slime]

@yisibl So is there a possibility you could release a new version that depends on the latest resvg version?

[yisibl]

@yisibl So is there a possibility you could release a new version that depends on the latest resvg version?

Upgrading the resvg version will take some time, so please be patient. Until then you should try resvg-js 2.5.0.

[MaikuMori]

I can confirm 2.5.0 works, 2.6.0 does not. Looking forward to the upgrade.