Repository: linebender/resvg (language: rust)

Issue:
Weird black bar in rendered SVG
Originally reported at https://github.com/typst/typst/issues/5174.

With the following SVG:

![test](https://github.com/user-attachments/assets/3caf3779-f120-438b-8644-df1658c7adcc)

`resvg` renders it as:
![test](https://github.com/user-attachments/assets/0cdc81f4-eb09-4b14-b7a8-4b51a7b0e87d)

One problem is obviously the different font, but this is a known issue since we don't support `font-face` yet. However, another issue is that there is this weird black box for one path. In Chrome, it looks like that instead:
<img width="779" alt="image" src="https://github.com/user-attachments/assets/6f332edd-1555-4f3e-b8ee-6247c5e58652">

I'll try to get a MRE when I find the time to do so.


Discussion / hints:
More minimal example:
```svg
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1323.7171577802474 688.5421027317343" width="3971.151473340742" height="2065.626308195203">
    <symbol id="image-f5da33cc0fa141a0d80c2b5d141d763f10f73af3">
        <image width="100%" height="100%" href="data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjE2cHQiIGhlaWdodD0iNzJwdCIgdmlld0JveD0iMCAwIDIxNiA3MiIgdmVyc2lvbj0iMS4xIj4KIDxtZXRhZGF0YT4KICA8cmRmOlJERiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgIDxjYzpXb3JrPgogICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPgogICAgPGRjOmRhdGU+MjAyNC0xMC0wN1QwNzo1MzowOS42ODc4OTA8L2RjOmRhdGU+CiAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgIDxkYzpjcmVhdG9yPgogICAgIDxjYzpBZ2VudD4KICAgICAgPGRjOnRpdGxlPk1hdHBsb3RsaWIgdjMuOS4wLCBodHRwczovL21hdHBsb3RsaWIub3JnLzwvZGM6dGl0bGU+CiAgICAgPC9jYzpBZ2VudD4KICAgIDwvZGM6Y3JlYXRvcj4KICAgPC9jYzpXb3JrPgogIDwvcmRmOlJERj4KIDwvbWV0YWRhdGE+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPip7c3Ryb2tlLWxpbmVqb2luOiByb3VuZDsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHR9PC9zdHlsZT4KIDwvZGVmcz4KIDxnIGlkPSJmaWd1cmVfMSI+CiAgPGcgaWQ9InBhdGNoXzEiPgogICA8cGF0aCBkPSJNIDAgNzIgIEwgMjE2IDcyICBMIDIxNiAwICBMIDAgMCAgeiAiIHN0eWxlPSJmaWxsOiAjZmZmZmZmIi8+CiAgPC9nPgogIDxnIGlkPSJheGVzXzEiPgogICA8ZyBpZD0ibGluZTJkXzEiPgogICAgPHBhdGggZD0iTSA5LjgxODE4MiAzLjI3MjcyNyAgTCA1NS42MTY3MDggMy4zNjg0ODYgIEwgNTcuNTgyMzEgMy42NDY4ODQgIEwgNTkuMzUxMzUxIDQuMTI2NzM3ICBMIDYwLjkyMzgzMyA0Ljc3MjgwMiAgTCA2Mi40OTYzMTQgNS42NDgxMSAgTCA2NC4wNjg3OTYgNi43NjYzNTkgIEwgNjUuODM3ODM4IDguMzIyNzk4ICBMIDY3LjYwNjg4IDEwLjE5NDgxOSAgTCA2OS41NzI0ODIgMTIuNjMzNTc4ICBMIDcxLjUzODA4NCAxNS40MjY1OTcgIEwgNzMuODk2ODA2IDE5LjE5NzI3NSAgTCA3Ni40NTIwODggMjMuNzE1MTYyICBMIDc5Ljc5MzYxMiAzMC4xMTc3ODEgIEwgOTAuOTk3NTQzIDUyLjA0ODQ0NyAgTCA5My41NTI4MjYgNTYuMzU5ODU2ICBMIDk1LjcxNDk4OCA1OS42MTI5ODEgIEwgOTcuNjgwNTkgNjIuMjAyMTI5ICBMIDk5LjQ0OTYzMSA2NC4xOTg3MDYgIEwgMTAxLjIxODY3MyA2NS44NTM3MzggIEwgMTAyLjc5MTE1NSA2Ny4wMjE3MzEgIEwgMTA0LjM2MzYzNiA2Ny44OTI2MTggIEwgMTA1LjczOTU1OCA2OC40MDQyNzkgIEwgMTA3LjExNTQ3OSA2OC42NzgyNjYgIEwgMTA4LjQ5MTQgNjguNzEyNTY4ICBMIDEwOS44NjczMjIgNjguNTA2OTM0ICBMIDExMS4yNDMyNDMgNjguMDYyODczICBMIDExMi42MTkxNjUgNjcuMzgzNjQzICBMIDExMy45OTUwODYgNjYuNDc0MjM3ICBMIDExNS41Njc1NjggNjUuMTYxNzI3ICBMIDExNy4xNDAwNDkgNjMuNTcwMDA4ICBMIDExOC45MDkwOTEgNjEuNDY0ODA5ICBMIDEyMC44NzQ2OTMgNTguNzY1NjMgIEwgMTIzLjAzNjg1NSA1NS40MDY0MDkgIEwgMTI1LjU5MjEzOCA1MC45OTI0NzYgIEwgMTI4LjczNzEwMSA0NS4wNjIyNzcgIEwgMTMzLjg0NzY2NiAzNC44MzQ2NTQgIEwgMTM4LjU2NTExMSAyNS41NTAwODQgIEwgMTQxLjUxMzUxNCAyMC4yMDM1MDYgIEwgMTQ0LjA2ODc5NiAxNi4wMjQ4NzQgIEwgMTQ2LjIzMDk1OCAxMi44OTc0MjYgIEwgMTQ4LjE5NjU2IDEwLjQyMTk4NSAgTCAxNDkuOTY1NjAyIDguNTE1MzEgIEwgMTUxLjczNDY0NCA2LjkyMzYyNSAgTCAxNTMuNTAzNjg2IDUuNjQ4MTEgIEwgMTU1LjA3NjE2NyA0Ljc3MjgwMiAgTCAxNTYuNjQ4NjQ5IDQuMTI2NzM3ICBMIDE1OC40MTc2OSAzLjY0Njg4NCAgTCAxNjAuMzgzMjkyIDMuMzY4NDg2ICBMIDE2Mi43NDIwMTUgMy4yNzQ4NSAgTCAxODIuNzkxMTU1IDMuMjcyNzI3ICBMIDIwNi4xODE4MTggMy4yNzI3MjcgIEwgMjA2LjE4MTgxOCAzLjI3MjcyNyAgIiBjbGlwLXBhdGg9InVybCgjcGQ1ZWVjMjYyNDEpIiBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuNTsgc3Ryb2tlLWxpbmVjYXA6IHNxdWFyZSIvPgogICA8L2c+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSJwZDVlZWMyNjI0MSI+CiAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMTYiIGhlaWdodD0iNzIiLz4KICA8L2NsaXBQYXRoPgogPC9kZWZzPgo8L3N2Zz4=" preserveAspectRatio="none"></image>
    </symbol>
    <g transform="translate(111.70053296776496 208.21982684136765) rotate(0 91.9258839080735 30.641961302691186)">
        <use href="#image-f5da33cc0fa141a0d80c2b5d141d763f10f73af3" width="184" height="61" opacity="1"></use>
    </g>
</svg>
```

I guess some weirdness with symbol going on here. The SVG image in the symbol itself is rendered fine in resvg, but not when used in this context. The issue happens in usvg as well though, so it's definitely a usvg issue, and not a resvg issue. This is how usvg converts the above SVG, resulting in a weird black bar also when opening it in Chrome/Firefox:

```
<svg width="3971.1514" height="2065.6262" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="clipPath1">
            <path fill="#000000" stroke="none" d="M 0 0 L 184 0 L 184 61 L 0 61 Z"/>
        </clipPath>
        <clipPath id="pd5eec26241">
            <path fill="#000000" stroke="none" d="M 0 0 L 216 0 L 216 72 L 0 72 Z"/>
        </clipPath>
    </defs>
    <g transform="matrix(2.9999998 0 0 2.9999998 0.00012207 0)">
        <g transform="matrix(1 0 0 1 111.70053 208.21983)">
            <g clip-path="url(#clipPath1)">
                <g>
                    <g transform="matrix(4.59624 0 0 7.1723137 0 0)">
                        <image width="288" height="96" xlink:href="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMjg4IiBoZWlnaHQ9Ijk2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJwZDVlZWMyNjI0MSI+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSIgZD0iTSAwIDAgTCAyMTYgMCBMIDIxNiA3MiBMIDAgNzIgWiIvPgogICAgICAgIDwvY2xpcFBhdGg+CiAgICA8L2RlZnM+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzQgMCAwIDEuMzMzMzMzNCAwIDApIj4KICAgICAgICA8ZyBpZD0iZmlndXJlXzEiPgogICAgICAgICAgICA8ZyBpZD0icGF0Y2hfMSI+CiAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBzdHJva2U9Im5vbmUiIGQ9Ik0gMCA3MiBMIDIxNiA3MiBMIDIxNiAwIEwgMCAwIFoiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyBpZD0iYXhlc18xIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJsaW5lMmRfMSI+CiAgICAgICAgICAgICAgICAgICAgPGcgY2xpcC1wYXRoPSJ1cmwoI3BkNWVlYzI2MjQxKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gOS44MTgxODIgMy4yNzI3MjcgTCA1NS42MTY3MDcgMy4zNjg0ODYyIEwgNTcuNTgyMzEgMy42NDY4ODM3IEwgNTkuMzUxMzUzIDQuMTI2NzM3IEwgNjAuOTIzODMyIDQuNzcyODAyIEwgNjIuNDk2MzIgNS42NDgxMSBMIDY0LjA2ODc5NCA2Ljc2NjM1OSBMIDY1LjgzNzg0IDguMzIyNzk4IEwgNjcuNjA2ODggMTAuMTk0ODE5IEwgNjkuNTcyNDggMTIuNjMzNTc4IEwgNzEuNTM4MDg2IDE1LjQyNjU5OCBMIDczLjg5NjgwNSAxOS4xOTcyNzUgTCA3Ni40NTIwOSAyMy43MTUxNjIgTCA3OS43OTM2MSAzMC4xMTc3OCBMIDkwLjk5NzU0IDUyLjA0ODQ0NyBMIDkzLjU1MjgyNiA1Ni4zNTk4NTYgTCA5NS43MTQ5OSA1OS42MTI5OCBMIDk3LjY4MDU5IDYyLjIwMjEyNiBMIDk5LjQ0OTYzIDY0LjE5ODcxIEwgMTAxLjIxODY3IDY1Ljg1Mzc0IEwgMTAyLjc5MTE2IDY3LjAyMTczIEwgMTA0LjM2MzYzIDY3Ljg5MjYyIEwgMTA1LjczOTU1IDY4LjQwNDI4IEwgMTA3LjExNTQ4IDY4LjY3ODI3IEwgMTA4LjQ5MTM5NCA2OC43MTI1NyBMIDEwOS44NjczMjUgNjguNTA2OTM1IEwgMTExLjI0MzI0IDY4LjA2Mjg3NCBMIDExMi42MTkxNiA2Ny4zODM2NDQgTCAxMTMuOTk1MDkgNjYuNDc0MjM2IEwgMTE1LjU2NzU2NiA2NS4xNjE3MyBMIDExNy4xNDAwNSA2My41NzAwMDcgTCAxMTguOTA5MDkgNjEuNDY0ODEzIEwgMTIwLjg3NDY5IDU4Ljc2NTYzIEwgMTIzLjAzNjg2IDU1LjQwNjQwNiBMIDEyNS41OTIxMyA1MC45OTI0NzcgTCAxMjguNzM3MSA0NS4wNjIyOCBMIDEzMy44NDc2NyAzNC44MzQ2NTYgTCAxMzguNTY1MTEgMjUuNTUwMDgzIEwgMTQxLjUxMzUyIDIwLjIwMzUwNiBMIDE0NC4wNjg4IDE2LjAyNDg3NCBMIDE0Ni4yMzA5NiAxMi44OTc0MjYgTCAxNDguMTk2NTYgMTAuNDIxOTg1IEwgMTQ5Ljk2NTYgOC41MTUzMSBMIDE1MS43MzQ2NSA2LjkyMzYyNSBMIDE1My41MDM3IDUuNjQ4MTEgTCAxNTUuMDc2MTcgNC43NzI4MDIgTCAxNTYuNjQ4NjUgNC4xMjY3MzcgTCAxNTguNDE3NyAzLjY0Njg4MzcgTCAxNjAuMzgzMjkgMy4zNjg0ODYyIEwgMTYyLjc0MjAyIDMuMjc0ODUgTCAxODIuNzkxMTUgMy4yNzI3MjcgTCAyMDYuMTgxODIgMy4yNzI3MjcgTCAyMDYuMTgxODIgMy4yNzI3MjciLz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo="/>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
```
I suspect it's somehow zooming up the original image in such a way that there is a very big black bar, but due to the clip path some of it is cut off.
More reduced:
```svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="200" height="200">
    <symbol id="image1">

    </symbol>

    <g transform="translate(50 50)">
        <image width="150" height="100"
               href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFKUlEQVR4Xu3VsRWDQAwFQa5/6nWKGzAONv1DrkCj28d5Pvdz+QgQ+ClwBOJlEHgXEIjXQeCPgEA8DwIC8QYINAF/kOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUi8AVw2rznM39f5AAAAABJRU5ErkJggg=="
        ></image>
    </g>

    <!-- image frame -->
    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>
``` 

The above renders correctly:
![test](https://github.com/user-attachments/assets/5ecc87f8-d807-4134-a4b4-bb4ba5a60306)

```svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="200" height="200">
    <symbol id="image1">
        <image width="100%" height="100%"
               href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFKUlEQVR4Xu3VsRWDQAwFQa5/6nWKGzAONv1DrkCj28d5Pvdz+QgQ+ClwBOJlEHgXEIjXQeCPgEA8DwIC8QYINAF/kOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUi8AVw2rznM39f5AAAAABJRU5ErkJggg=="
               ></image>
    </symbol>

    <g transform="translate(50 50)">
        <use href="#image1" width="150" height="100"></use>
    </g>

    <!-- image frame -->
    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>
```

While the above does not anymore:
![test](https://github.com/user-attachments/assets/c5765d4b-a383-4f23-959d-92dc6d12733c)


Fix patch:
diff --git a/crates/usvg/src/parser/use_node.rs b/crates/usvg/src/parser/use_node.rs
index 20dc17f7a..723a0107b 100644
--- a/crates/usvg/src/parser/use_node.rs
+++ b/crates/usvg/src/parser/use_node.rs
@@ -54,6 +54,32 @@ pub(crate) fn convert(
     let linked_to_symbol = child.tag_name() == Some(EId::Symbol);
 
     if linked_to_symbol {
+        // If a `use` element has a width/height attribute and references a symbol
+        // then relative units (like percentages) should be resolved relative
+        // to the width/height of the `use` element, and not the original SVG.
+        // This is why we need to (potentially) adapt the view box here.
+        use_state.view_box = {
+            let def = Length::new(100.0, LengthUnit::Percent);
+            let x = use_state.view_box.x();
+            let y = use_state.view_box.y();
+
+            let width = if node.has_attribute(AId::Width) {
+                node.convert_user_length(AId::Width, &use_state, def)
+            } else {
+                use_state.view_box.width()
+            };
+
+            let height = if node.has_attribute(AId::Height) {
+                node.convert_user_length(AId::Height, &use_state, def)
+            } else {
+                use_state.view_box.height()
+            };
+
+            NonZeroRect::from_xywh(x, y, width, height)
+                // Fail silently if the rect is not valid.
+                .unwrap_or(use_state.view_box)
+        };
+
         if let Some(ts) = viewbox_transform(node, child, &use_state) {
             new_ts = new_ts.pre_concat(ts);
         }


Test patch:
diff --git a/crates/resvg/tests/integration/render.rs b/crates/resvg/tests/integration/render.rs
index 8d585dc9e..43fb0be5d 100644
--- a/crates/resvg/tests/integration/render.rs
+++ b/crates/resvg/tests/integration/render.rs
@@ -1227,6 +1227,7 @@ use crate::render;
 #[test] fn structure_symbol_unused_symbol() { assert_eq!(render("tests/structure/symbol/unused-symbol"), 0); }
 #[test] fn structure_symbol_with_custom_use_size() { assert_eq!(render("tests/structure/symbol/with-custom-use-size"), 0); }
 #[test] fn structure_symbol_with_overflow_visible() { assert_eq!(render("tests/structure/symbol/with-overflow-visible"), 0); }
+#[test] fn structure_symbol_with_size_on_use_and_relative_units() { assert_eq!(render("tests/structure/symbol/with-size-on-use-and-relative-units"), 0); }
 #[test] fn structure_symbol_with_transform_on_use_no_size() { assert_eq!(render("tests/structure/symbol/with-transform-on-use-no-size"), 0); }
 #[test] fn structure_symbol_with_transform_on_use() { assert_eq!(render("tests/structure/symbol/with-transform-on-use"), 0); }
 #[test] fn structure_symbol_with_transform() { assert_eq!(render("tests/structure/symbol/with-transform"), 0); }
diff --git a/crates/resvg/tests/tests/structure/symbol/with-size-on-use-and-relative-units.png b/crates/resvg/tests/tests/structure/symbol/with-size-on-use-and-relative-units.png
new file mode 100644
index 000000000..7b6af1b80
Binary files /dev/null and b/crates/resvg/tests/tests/structure/symbol/with-size-on-use-and-relative-units.png differ
diff --git a/crates/resvg/tests/tests/structure/symbol/with-size-on-use-and-relative-units.svg b/crates/resvg/tests/tests/structure/symbol/with-size-on-use-and-relative-units.svg
new file mode 100644
index 000000000..82445219e
--- /dev/null
+++ b/crates/resvg/tests/tests/structure/symbol/with-size-on-use-and-relative-units.svg
@@ -0,0 +1,14 @@
+<svg version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <title>With size on `use` and relative units</title>
+    <symbol id="image1">
+        <image width="100%" height="100%"
+               href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFKUlEQVR4Xu3VsRWDQAwFQa5/6nWKGzAONv1DrkCj28d5Pvdz+QgQ+ClwBOJlEHgXEIjXQeCPgEA8DwIC8QYINAF/kOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUi8AVw2rznM39f5AAAAABJRU5ErkJggg=="></image>
+    </symbol>
+
+    <g transform="translate(25 50)">
+        <use href="#image1" width="150" height="100"></use>
+    </g>
+
+    <!-- image frame -->
+    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
+</svg>
\ No newline at end of file