background-color doesn't work

[LaurenzV]

Originally reported at: typst/typst#4867

File:

<svg width="91" height="35" viewBox="0 0 91 35" fill="none" xmlns="http://www.w3.org/2000/svg"
     style="background-color: rgb(0, 0, 85); color: rgb(255, 255, 0);">
    <g id="logo">
        <path
                d="M7.88785 18.1481C7.88785 19.2805 8.05033 20.0404 8.3753 20.4278C8.70026 20.8152 9.29111 21.0089 10.1478 21.0089C11.0341 21.0089 12.1715 20.5619 13.56 19.6679L14.4463 21.143C11.8465 23.3184 9.70471 24.4061 8.02079 24.4061C6.33687 24.4061 5.00745 24.0038 4.03255 23.1992C3.05765 22.3648 2.5702 20.9046 2.5702 18.8186V7.10728H0.35451L0 5.45338L2.5702 4.64879V2.45849L7.88785 0V4.91699L13.1169 4.51469L12.6294 7.42018L7.88785 7.24138V18.1481Z"
                fill="currentColor" />
        <path
                d="M17.5836 34.5977H16.8302C16.1212 33.3759 15.5747 31.6326 15.1906 29.3678L16.2098 28.742C17.0666 29.2784 17.8199 29.5466 18.4698 29.5466C19.8583 29.5466 20.9219 28.9059 21.6604 27.6245L23.1671 24.0932L16.3871 8.13538C16.0326 7.33078 15.7224 6.82418 15.4565 6.61558C15.1906 6.40698 14.6884 6.25798 13.9498 6.16858L13.6396 4.51469C16.003 4.75309 17.7017 4.87229 18.7357 4.87229C19.7697 4.87229 21.6161 4.75309 24.2749 4.51469L24.0977 6.07918C24.0386 6.10898 23.8761 6.15368 23.6102 6.21328C23.3739 6.27288 23.1671 6.33248 22.9898 6.39208C22.8421 6.42188 22.6649 6.46658 22.4581 6.52618C22.0445 6.70498 21.8377 6.92848 21.8377 7.19668C21.8377 7.40528 21.8968 7.71818 22.0149 8.13538L25.9145 18.1928L29.7255 7.95657C29.8141 7.68837 29.8585 7.43508 29.8585 7.19668C29.8585 6.66028 29.0756 6.30268 27.5098 6.12388L27.4212 4.55938C28.8688 4.76798 30.08 4.87229 31.0549 4.87229C32.0298 4.87229 33.6399 4.76798 35.8851 4.55938L35.5749 6.21328C34.8659 6.24308 34.3637 6.37718 34.0683 6.61558C33.8024 6.82418 33.5217 7.27118 33.2263 7.95657L23.9204 29.9042C22.591 33.0332 20.4787 34.5977 17.5836 34.5977Z"
                fill="currentColor" />
        <path
                d="M49.1768 22.1264C50.329 22.1264 51.3039 21.4857 52.1015 20.2043C52.9287 18.8931 53.3423 16.9859 53.3423 14.4828C53.3423 9.83397 51.9981 7.50958 49.3098 7.50958C48.2167 7.50958 47.0202 8.12048 45.7204 9.34227V19.6232C46.0453 20.3384 46.5328 20.9344 47.1827 21.4112C47.8327 21.888 48.4974 22.1264 49.1768 22.1264ZM49.2655 35C46.518 34.7318 44.6568 34.5977 43.6819 34.5977C42.707 34.5977 40.7572 34.7318 37.8325 35L37.3894 33.3908C38.4529 33.1524 39.221 32.8842 39.6937 32.5862C40.1664 32.2882 40.4027 31.8263 40.4027 31.2005V8.89527C40.4027 7.88208 40.0187 7.37548 39.2506 7.37548L37.2121 7.64368L36.9906 5.94508C39.5312 4.81269 41.9389 4.14219 44.2137 3.93359L45.1443 4.96168C45.1443 5.61728 45.292 6.36228 45.5874 7.19668L47.5372 5.72158C48.8962 4.67859 50.1222 4.15709 51.2153 4.15709C53.9036 4.15709 55.883 4.97658 57.1533 6.61558C58.4236 8.25457 59.0588 10.6088 59.0588 13.6782C59.0588 16.7177 58.0987 19.2656 56.1784 21.3218C54.2581 23.378 51.7913 24.4061 48.778 24.4061C47.8031 24.4061 46.7839 24.0783 45.7204 23.4227V31.2899C45.7204 31.8561 45.9567 32.3031 46.4294 32.6309C47.1089 32.9289 47.9951 33.1673 49.0882 33.3461L49.5757 33.4355L49.2655 35Z"
                fill="currentColor" />
        <path
                d="M67.3337 22.2605C68.0427 22.2605 68.6336 22.037 69.1063 21.59C69.5789 21.143 69.8153 20.5917 69.8153 19.9361C69.8153 19.2507 69.7267 18.7441 69.5494 18.4163C69.3722 18.0587 69.0767 17.7309 68.6631 17.4329C68.0723 16.9561 67.2303 16.4496 66.1373 15.9132C65.0737 15.3768 64.2318 14.9149 63.6114 14.5275C63.0205 14.1401 62.4297 13.5143 61.8388 12.6501C61.2775 11.7561 60.9969 10.728 60.9969 9.56577C60.9969 7.89698 61.6468 6.58578 62.9467 5.63218C64.2761 4.64879 65.9157 4.15709 67.8655 4.15709C69.8153 4.15709 72.031 4.49979 74.5126 5.18518C74.4239 7.12218 74.1728 8.76117 73.7592 10.1022L71.9867 10.5045C71.2777 7.64368 69.9335 6.21328 67.9541 6.21328C66.6247 6.21328 65.96 7.00298 65.96 8.58237C65.96 9.20817 66.2111 9.74457 66.7133 10.1916C67.2451 10.6386 68.0132 11.1154 69.0176 11.622C70.0221 12.0988 70.7459 12.4713 71.189 12.7395C71.6322 12.9779 72.223 13.3802 72.9616 13.9464C74.3205 15.0192 75 16.524 75 18.461C75 20.398 74.2614 21.8731 72.7843 22.8863C71.3072 23.8995 69.3574 24.4061 66.9349 24.4061C64.542 24.4061 62.4444 24.0038 60.6423 23.1992C60.5833 22.6926 60.5537 21.8135 60.5537 20.5619C60.5537 19.2805 60.5833 18.3865 60.6423 17.8799L62.8137 17.3883C63.0501 18.8484 63.5671 20.0255 64.3647 20.9195C65.1623 21.8135 66.152 22.2605 67.3337 22.2605Z"
                fill="currentColor" />
        <path
                d="M84.4416 18.1481C84.4416 19.2805 84.604 20.0404 84.929 20.4278C85.254 20.8152 85.8448 21.0089 86.7016 21.0089C87.5878 21.0089 88.7252 20.5619 90.1137 19.6679L91 21.143C88.4003 23.3184 86.2584 24.4061 84.5745 24.4061C82.8906 24.4061 81.5612 24.0038 80.5863 23.1992C79.6114 22.3648 79.1239 20.9046 79.1239 18.8186V7.10728H76.9082L76.5537 5.45338L79.1239 4.64879V2.45849L84.4416 0V4.91699L89.6706 4.51469L89.1831 7.42018L84.4416 7.24138V18.1481Z"
                fill="currentColor" />
    </g>
</svg>

resvg output:

Chrome output:

Not sure if it's a bug or just not been implemented yet.

[RazrFalcon]

There is no background-color in SVG.

[LaurenzV]

Ah, right, so it's a CSS-only property and that's why it probably works in all other browsers.

Would you consider having support for this this though, given that it seemingly is used to some degree? I think it should be pretty straight-forward to implement, we could simply add an optional background-color attribute to the tree, and then each renderer can do with that information whatever they want. Or out of scope?

[RazrFalcon]

I think we can simply add a root rectangle with a fill color from background-color.

[LaurenzV]

I thought about that, too, but I think having this separate from the main tree would be better, because each client can that do with that information what they want.

For example, let's say you are developing an SVG viewer based on usvg, if we add a root rectangle than only everything within the bounding box of the SVG will be in that color while the rest will be white, while if we store that information separately than the client application can ensure that the whole canvas is in that color, similar to how it happens in web browsers.

[RazrFalcon]

The whole point of usvg is so people would not need to think about anything.
The edge case you're describing is too niche. Just a single rect would be fine.
usvg already strips an absurd amount of info.