Weasyprint: SVG width not rendering correctly

[danielepolencic]

I'm not sure this is a bug.

I use images in my document with the regular <img src="url" /> tag.
The image tag can contain regular images and SVGs.

The parent tag has a width set to width: 60% and all the images have max-width: 100%.

All the non-SVG images are rendering correctly:

All the SVGs are not:

They are tiny.

I can manually set a width on the images, and that seems to do a good job. However, it's not ideal because of the aspect ratio (taller images are breaking the layout).

Usually, this is a rendering engine specific issue, and several workarounds can be applied. However, I'm not sure what rendering engine is in place here, so I don't know how I can go about debugging it.

[liZe]

Hello!

Thank you for this bug report. Could you please provide one of your SVG files, so that I can test?

[danielepolencic]

Here it is:

<svg viewBox="0 0 891 878" xmlns="http://www.w3.org/2000/svg"><style>.sans-serif{font-family:-apple-system,BlinkMacSystemFont,'avenir next', avenir,'helvetica neue',helvetica,ubuntu,roboto,noto,'segoe ui',arial,sans-serif}</style><g transform="translate(198.000000, 18.000000)" fill="none" fill-rule="evenodd"><g transform="translate(0.900000, 478.100000)" fill-rule="nonzero"><path d="M479.12 5.65v22.6H0V5.65C0 2.486 2.486 0 5.65 0h467.82c3.164 0 5.65 2.486 5.65 5.65z" fill="#D2D2D2"></path><path d="M7.91 6.78h4.52v4.52H7.91V6.78zm6.78 0h4.52v4.52h-4.52V6.78zm6.78 0h4.52v4.52h-4.52V6.78z" fill="#A3A3A3"></path></g><g transform="translate(0.900000, 497.360000)" fill-rule="nonzero"><g transform="translate(106.220000, 0.000000)"><path fill="#9EEBCF" d="M9.04 7.91v97.18H5.65V7.91z"></path><circle stroke="#9EEBCF" stroke-width="3.39" fill="#FFF" cx="7.345" cy="7.345" r="7.345"></circle><path fill="#9EEBCF" d="M7.345 109.61l-6.215-9.04h12.43z"></path></g><g transform="translate(0.000000, 105.090000)"><path d="M226 191.083c0 1.13-.678 2.147-1.582 2.147H1.582c-.904 0-1.582-1.017-1.582-2.147V5.65C0 2.486 2.486 0 5.65 0h214.7c3.164 0 5.65 2.486 5.65 5.65v185.433z" fill="#FF003C"></path><path d="M5.65 0h214.7c3.164 0 5.65 2.486 5.65 5.65v20.34H0V5.65C0 2.486 2.486 0 5.65 0z" fill="#CCC"></path><path d="M19.21 14.125a5.064 5.064 0 0 1-5.085 5.085 5.064 5.064 0 0 1-5.085-5.085 5.064 5.064 0 0 1 5.085-5.085 5.064 5.064 0 0 1 5.085 5.085" fill="#E74C3C"></path><path d="M37.29 14.125a5.064 5.064 0 0 1-5.085 5.085 5.064 5.064 0 0 1-5.085-5.085 5.064 5.064 0 0 1 5.085-5.085 5.064 5.064 0 0 1 5.085 5.085" fill="#F1C40F"></path><path d="M54.24 14.125a5.064 5.064 0 0 1-5.085 5.085 5.064 5.064 0 0 1-5.085-5.085 5.064 5.064 0 0 1 5.085-5.085 5.064 5.064 0 0 1 5.085 5.085" fill="#2ECC71"></path></g></g><g id="anime-unhappy-pod" transform="translate(254.000000, 497.260000)"><g transform="translate(106.220000, 0.000000)" fill-rule="nonzero"><path fill="#9EEBCF" d="M9.04 7.91v97.18H5.65V7.91z"></path><circle stroke="#9EEBCF" stroke-width="3.39" fill="#FFF" cx="7.345" cy="7.345" r="7.345"></circle><path fill="#9EEBCF" d="M7.345 109.61l-6.215-9.04h12.43z"></path></g><g transform="translate(0.000000, 105.090000)" fill-rule="nonzero"><path d="M226 191.083c0 1.13-.678 2.147-1.582 2.147H1.582c-.904 0-1.582-1.017-1.582-2.147V5.65C0 2.486 2.486 0 5.65 0h214.7c3.164 0 5.65 2.486 5.65 5.65v185.433z" fill="#FF003C"></path><path d="M5.65 0h214.7c3.164 0 5.65 2.486 5.65 5.65v20.34H0V5.65C0 2.486 2.486 0 5.65 0z" fill="#CCC"></path><path d="M19.21 14.125a5.064 5.064 0 0 1-5.085 5.085 5.064 5.064 0 0 1-5.085-5.085 5.064 5.064 0 0 1 5.085-5.085 5.064 5.064 0 0 1 5.085 5.085" fill="#E74C3C"></path><path d="M37.29 14.125a5.064 5.064 0 0 1-5.085 5.085 5.064 5.064 0 0 1-5.085-5.085 5.064 5.064 0 0 1 5.085-5.085 5.064 5.064 0 0 1 5.085 5.085" fill="#F1C40F"></path><path d="M54.24 14.125a5.064 5.064 0 0 1-5.085 5.085 5.064 5.064 0 0 1-5.085-5.085 5.064 5.064 0 0 1 5.085-5.085 5.064 5.064 0 0 1 5.085 5.085" fill="#2ECC71"></path></g><text fill="#AAA" font-size="20" font-weight="600" class="sans-serif"><tspan x="127.351" y="86.67">PORT 3000</tspan></text><text id="anime-ip-before" fill="#4A4A4A" font-size="20" font-weight="600" class="sans-serif"><tspan x="72.772" y="332.671">10.0.0.2</tspan></text><text id="anime-ip-after" fill="#FF3030" font-size="20" font-weight="600" class="sans-serif"><tspan x="72.772" y="332.671">10.0.0.3</tspan></text></g><path d="M323 745l6.2 6.1c20.8-20.5 54.8-20.5 75.6 0l6.2-6.1c-11.8-11.5-27.4-17.9-44-17.9s-32.2 6.4-44 17.9zm3-41.9l7-7 7 7 6-6-7-7 6.9-7-6-6-6.9 6.9-6.9-6.9-6 6 6.9 7-7 7 6 6zm87.9-20l-6-6-6.9 6.9-6.9-6.9-6 6 6.9 7-7 7 6 6 7-7 7 7 6-6-7-7 6.9-7z" id="anime-unhappy" fill="#000" fill-rule="nonzero"></path><text fill="#AAA" font-size="20" font-weight="600" class="sans-serif"><tspan x="3.8" y="460.7">PORT 80</tspan></text><text fill="#AAA" font-size="20" font-weight="600" class="sans-serif"><tspan x="126.5" y="584">PORT 3000</tspan></text><text fill="#4A4A4A" font-size="20" font-weight="600" class="sans-serif"><tspan x="67.695" y="830">10.0.0.1</tspan></text><text fill="#4A4A4A" font-size="20" font-weight="600" class="sans-serif"><tspan x="377.83" y="460.7">10.96.0.1</tspan></text><g transform="translate(93.700000, 0.070000)"><path d="M145.77 492.115l-40.68-73.45h81.36l-40.68 73.45zm-11.3-297.755h22.6v224.305h-22.6V194.36z" fill="#B8E986" fill-rule="nonzero"></path><g fill-rule="nonzero"><path d="M0 194.36v-79.552c0-1.695 1.469-3.164 3.164-3.164h61.359c1.243-.452.791-.791.565-1.13-3.955-6.441-6.441-13.447-7.458-21.131-2.26-17.402 2.712-32.431 14.577-45.426.678-.791 1.243-1.469 2.034-2.147.565-.565.565-.565 0-1.13-1.808-1.695-3.503-3.616-4.859-5.876-3.164-4.972-4.972-10.396-5.085-16.385 0-1.469.226-1.695 1.582-1.017 1.469.678 2.938 1.356 4.52 1.808.226-2.599-.113-4.746-.113-7.006 0-.791-.113-1.582 0-2.373 0-1.13.339-1.356 1.356-.791a38.624 38.624 0 0 0 4.859 2.373c1.017.452 1.017.452.904-.678a35.44 35.44 0 0 1 0-8.475c.226-1.13.791-1.356 1.13-1.017.226.226.452.565.678.791 3.503 4.407 7.345 8.249 11.978 11.413 4.068 2.712 8.475 4.181 13.334 4.181 3.729.113 7.232-.678 10.622-2.034 3.164-1.13 6.328-2.486 9.605-3.164 3.277-.678 6.667-1.017 10.057-.226 5.65 1.356 9.492 5.085 11.978 10.283.904 2.034 1.356 4.068 1.695 6.215.113.904.113.904 1.017.791 4.972-.339 9.718.452 14.012 3.051 5.198 3.051 8.136 7.797 9.266 13.56.791 4.294.565 8.588-.113 12.882-.565 3.39-1.469 6.667-2.486 9.831-.339.791-.452.791.565 1.13 4.972 1.695 8.136 5.198 9.04 10.396 1.243 7.232-3.277 13.56-9.944 15.142a10.86 10.86 0 0 1-3.842.339c-.452-.113-.678.226-.791.678a63.611 63.611 0 0 1-3.842 10.057c-3.277 6.441-7.571 11.978-12.995 16.724-1.243.904-1.356 1.356-1.13 2.034.678 1.808 1.243 3.616 1.808 5.311 3.616 11.413 7.345 22.713 10.961 34.126.339.791.678 1.13 1.469 1.243 3.616.791 5.876 3.051 6.78 6.554.226.791.339 1.582.452 2.373.904-.565 1.243-1.017 1.808-1.469 1.469-1.243 3.164-1.582 5.085-.904 1.808.678 2.938 2.034 3.277 4.068.113.678.226.791.904.904 3.164.565 5.085 3.616 3.955 6.667-.226.791-.113 1.356.452 2.034 1.356 1.582 2.147 3.616 2.486 5.763.113.904 0 .904 1.017.904h18.645c0-1.921-.565-3.39-.904-4.972-2.147.113-3.616.452-4.972.904-.791.339-1.243.113-1.356-.339-.113-.452.226-.678.904-.904 1.356-.452 2.712-.791 3.955-1.243 1.356-.339 1.13-.113 1.13-1.469 0-.678-.226-.791-.565-.791h-6.554c-1.13-.113-1.356-.339-1.356-.678.904-.678 1.13-.565 1.356-.565h6.441c.565 0 .791-.226.904-.791.226-1.582.226-1.582-1.243-2.034-1.356-.339-2.599-.791-3.842-1.13-1.017-.339-1.13-.678-1.13-1.017 1.017-.452 1.356-.339 1.582-.226 1.582.452 3.051.904 4.633 1.356 2.034-3.164 3.842-5.424 6.215-7.119.452-.339.565-.678.565-1.243v-13.899c.113-.678.565-.904 1.017-.565 4.52 4.181 8.475 7.797 12.317 11.413 1.017 1.017.678 1.017 1.921.113a24.455 24.455 0 0 1 28.25 0c1.017.791.791 1.017 1.921-.113 3.955-3.616 7.91-7.232 11.865-10.961.339-.226.678-.791 1.243-.565.678.226.452.791.452 1.243v20.34c0 1.356 0 1.356 1.243.904 1.017-.226 2.034-.565 3.164-.904 1.582.678 1.469.904 1.017 1.13l-2.599.791-2.26.678c-.678 1.017-.678 1.695-.565 2.373 3.277.226 5.198.226 7.232.226 1.13.113 1.356.339 1.243.678-.791.678-1.13.678-1.356.678h-6.328c-.904 0-.904 0-.904.791 0 1.469-.113 1.13 1.13 1.469 1.13.452 2.486.678 3.729 1.13 1.017.452 1.13.678 1.017 1.13-2.712-.226-3.842-.565-5.198-.904-.678 1.808-.678 3.164-.678 4.52 0 .452.113.678.678.678h19.549c.452 0 1.017 0 1.469.226v.904c-1.13.226-1.469.226-1.808.226H0z" fill="#151D38"></path><path d="M52.432 186.45v-.113h50.398c1.13 0 1.13 0 1.13-1.13v-70.173c0-1.13-.678-1.921-1.921-2.034H3.503c-1.695.113-2.373.791-2.373 2.373v69.947c0 1.13 0 1.13 1.13 1.13h50.172z" fill="#CCD6DA"></path><path d="M84.976 111.644h16.498c1.695 0 2.938 1.017 3.277 2.599.113.339.113.678.113 1.13v18.758c0 1.017.113 1.017.904 1.017 6.554.904 13.108.452 19.549-1.243 14.69-3.842 25.764-12.43 33.335-25.538 2.26-3.729 3.842-7.684 4.972-11.865.226-.904.226-.904-.452-1.13-.452-.113-.904-.226-1.243-.339-.791-.339-1.017-.565-.904-1.017.113-.565.565-.565 1.356-.339 2.147.791 4.294 1.017 6.554.565 6.667-1.243 10.961-8.023 9.266-14.69-1.808-6.667-8.814-10.509-15.255-8.249-.339 0-.565.226-.904.226-.339.113-.565-.113-.678-.339-.113-.339 0-.565.226-.791a.863.863 0 0 1 .565-.226c.452-.226.904-.339 1.356-.452.113-.113.226-.113.339-.226.113-.226-.113-.226-.339-.226-.113-.113-.339-.113-.565-.226a41.88 41.88 0 0 1-9.605-4.633c-5.424-3.616-9.605-8.136-12.317-14.125-1.243-2.825-2.034-5.763-2.599-8.814-.113-.904-.113-.904-.904-.565-.226.226-.452.339-.791.452-3.955 2.373-8.023 4.407-12.43 5.989-9.266 3.503-18.871 4.972-28.702 3.164-6.78-1.243-13.221-3.729-18.758-8.023-.791-.452-.791-.452-1.356.113-4.972 4.859-9.04 10.396-11.865 16.724-4.52 9.944-5.876 20.227-4.181 31.075 1.13 7.232 3.729 14.012 7.571 20.227.452.791 1.017 1.13 1.921 1.13 5.311-.113 10.622-.113 16.046-.113z" fill="#FAE0D6"></path><path d="M105.09 161.59v24.521c0 .565.226.791.791.791h17.289c1.017 0 1.13.113 1.13 1.017v4.52c0 .678-.113.791.678.791h17.402c.678 0 .791-.226.791-.678.226-1.695.678-3.277 1.582-4.633.339-.565.339-1.017.113-1.582l-2.712-8.475c-2.26-6.893-4.52-13.899-6.78-20.792 0-.226-.113-.452-.226-.678 0-.452.113-.791.565-.791.339-.113.565 0 .791.339 0 .113 0 .339.113.452 1.582 4.859 3.164 9.831 4.746 14.69 1.469 4.633 2.938 9.266 4.52 13.899.226.791.226.791.791.226 1.695-1.582 3.616-2.599 5.763-3.164.678-.113.791-.113.565-.791-.339-1.469-.791-3.051-1.13-4.52-1.017-4.633 1.808-9.266 6.215-10.396.339-.113.565-.113.904-.226.339 0 .452-.226.339-.565-.113-.226-.113-.339-.226-.452-3.503-11.074-7.119-22.035-10.622-33.109l-2.034-6.102c-.113-.452-.339-.678-.678-.226a1.56 1.56 0 0 1-.452.339 45.61 45.61 0 0 1-9.605 5.65c-6.554 3.051-13.56 4.859-20.792 5.085-3.051.113-6.215.113-9.153-.339-.565-.113-.678.113-.678.565v24.634z" fill="#FFF3A2"></path><path d="M249.278 193.117h19.775c1.017 0 1.017 0 1.017-.904v-33.448c0-.226.113-.452-.113-.565-.226-.113-.339.226-.565.339-2.373 2.26-4.859 4.52-7.345 6.78-1.469 1.356-2.938 2.825-4.407 4.181-.678.565-.791.565-1.469.113-.226-.226-.339-.339-.565-.452-3.503-2.712-7.458-4.294-11.978-4.633-5.876-.452-11.187 1.13-15.933 4.859-1.017.791-1.017.791-2.034-.113l-.113-.113-10.848-10.17c-.226-.226-.452-.791-.904-.565-.226.113-.113.565-.113.904v11.865c0 .565 0 1.017-.565 1.356-6.554 4.407-8.023 13.108-4.294 19.775.339.678.791.904 1.582.904h14.351c.339 0 .791.113.904-.226.113-.226-.339-.452-.565-.678-2.373-2.599-3.051-5.537-2.034-8.814.904-3.277 3.277-5.311 6.554-5.989.678-.226 1.356-.339 2.034-.226.339 0 .565.226.565.678 0 .339-.226.565-.565.565-.452.113-.791.113-1.13.113-3.164.452-5.876 2.825-6.441 5.876a7.537 7.537 0 0 0 3.39 8.023c.678.452 1.356.678 2.26.678 6.667-.113 13.108-.113 19.549-.113z" fill="#C27659"></path><path d="M52.545 187.58c-9.266.113-18.532.113-27.685.113H1.808c-.452 0-.678.113-.678.565v2.373c0 1.469 0 1.469 1.695 1.469h38.759c20.227 0 40.454-.113 60.681-.113h.791c.678 0 .904-.226.904-.791v-3.051c0-.452-.226-.565-.678-.565H52.545zm112.435 5.65h19.775c.452 0 .565-.113.565-.565a11.348 11.348 0 0 0-2.034-5.311c-.226-.226-.339-.226-.452.113-.113.113-.113.339-.226.452-1.469 3.164-5.085 4.068-7.797 1.808-.452-.452-.791-.452-1.356-.226-1.695.678-3.277.452-4.746-.565-1.582-1.13-2.26-2.599-2.147-4.633.113-.678 0-.678-.565-.565-1.356.452-2.712.226-3.955-.452-.226-.226-.565-.226-.904-.226h-6.215c-4.746.113-8.814 3.503-10.057 8.249-.113.452-.226.904-.226 1.469 0 .339.113.452.452.452h19.888z" fill="#CCD6DA"></path><path d="M157.07 181.139h2.486c.339 0 .452-.113.339-.452-.904-2.373-1.017-4.972-1.582-7.458-.113-.565.113-.904.452-1.017.452-.113.791.226.904.791l.339 1.695c.226 1.469.452 2.938.791 4.407.452 1.921 2.373 3.164 4.52 2.712 2.034-.339 3.277-2.034 3.051-4.068-.339-1.695-.565-3.39-1.017-4.972-.904-3.729-4.859-6.102-8.814-5.424-3.842.678-6.554 4.407-5.876 8.023.339 1.695.904 3.39 1.243 5.198.113.339.339.565.791.565h2.373zm11.3 3.729c.113 1.356.452 2.373 1.469 3.051 2.147 1.582 5.085.791 5.989-1.695.904-2.373 1.695-4.859 2.486-7.232.113-.339.113-.565.226-.904.113-1.808-.904-3.39-2.712-3.955-1.695-.452-3.616.226-4.407 1.808-.565 1.13-1.017 2.26-1.243 3.503-.113.904-.339 1.808-.791 2.599a7.135 7.135 0 0 0-1.017 2.825z" fill="#FAE0D6"></path><path d="M113.904 192.1h8.475c.452-.113.791-.226.791-.678v-3.39c0-.339-.226-.452-.452-.452h-16.837c-.565 0-.791.226-.791.678v3.051c0 .791 0 .791.904.791h7.91z" fill="#CCD6DA"></path><path d="M183.06 183.512c0-2.034-1.356-3.503-3.277-3.729-.904-.226-1.017-.113-1.243.565-.565 1.469-1.017 2.825-1.582 4.181-.452 1.243-.678 2.599-1.695 3.729-.339.339 0 .565.226.791 2.034 1.469 5.085.791 6.215-1.469.452-1.017.791-2.147 1.243-3.277.113-.339.113-.678.113-.791z" fill="#FAE0D6"></path><path d="M65.54 150.516c-.339 5.537-3.729 9.605-8.814 10.735-6.441 1.582-12.769-2.938-13.673-9.492-.791-5.65 2.825-11.3 8.588-12.656 1.243-.226 1.356-.226 1.582 1.017.791 4.294 3.616 7.458 7.797 8.475 1.017.226 1.921.226 2.938.113 1.356-.113 1.469 0 1.582 1.356v.452z" fill="#151D38"></path><path d="M54.466 160.46c.678 0 1.582-.113 2.486-.339 4.068-1.13 7.232-5.085 7.458-9.153 0-1.017 0-1.017-.791-1.017-5.537.113-10.283-3.616-11.413-8.927-.339-1.243-.452-.904-1.243-.678-4.633 1.582-7.571 6.441-6.78 11.526.791 4.859 5.085 8.588 10.283 8.588z" fill="#FFF"></path><path d="M103.734 70.512h14.916c2.26 0 4.52 0 6.78.113 1.13 0 1.356.452.904 1.356-3.39 6.328-8.249 10.735-15.255 12.317-7.119 1.469-13.334-.452-18.645-5.537-2.147-1.921-3.729-4.294-4.972-6.893-.113-.339-.339-.565-.339-.791-.226-.565 0-.791.565-1.017h.565c4.407 0 8.814.113 13.221.113.791 0 1.469.113 2.26.113v.226z" fill="#151D38"></path><path d="M107.463 71.416h-4.068c-1.695 0-3.277 0-4.972-.113-2.825-.113-5.763-.113-8.588-.113-.678 0-.678 0-.339.565 1.13 2.034 2.599 3.842 4.294 5.424 4.972 4.407 10.848 6.215 17.402 4.859 6.102-1.13 10.622-4.52 13.899-9.492.565-.904.565-1.017-.565-1.017-5.65 0-11.413-.113-17.063-.113z" fill="#FFF"></path><path d="M64.41 77.405c0-3.729 2.825-7.345 7.345-7.345a7.33 7.33 0 0 1 7.345 7.345 7.33 7.33 0 0 1-7.345 7.345 7.33 7.33 0 0 1-7.345-7.345zm87.01 1.13c.113 3.503-2.825 7.345-7.345 7.345a7.33 7.33 0 0 1-7.345-7.345c0-4.068 3.164-7.345 7.345-7.345 4.407-.113 7.571 3.616 7.345 7.345z" fill="#E5384A"></path><path d="M81.925 61.02c2.26 0 3.955 1.695 3.955 3.955s-1.695 3.955-3.842 3.955c-2.26 0-4.068-1.695-4.068-3.955 0-2.147 1.695-3.955 3.955-3.955zm50.85 1.13c2.26 0 3.955 1.695 3.955 4.068 0 2.147-1.808 3.842-3.955 3.842-2.147 0-3.955-1.808-3.955-3.955 0-2.26 1.695-3.955 3.955-3.955zm41.245 20.453c0 4.52-4.746 7.797-9.266 6.328-.113-.113-.226-.113-.339-.226-.452-.113-.678-.452-.452-.904.113-.339.452-.452.904-.339.226 0 .452.226.678.226 3.164.791 6.441-1.13 7.006-4.068.678-3.164-1.469-6.102-4.746-6.554-.226 0-.565-.113-.904-.113-.226 0-.452-.339-.452-.565 0-.452.226-.565.565-.678h.791c3.616.452 6.215 3.39 6.215 6.893zm-66.67-21.922c0 .339-.226.452-.565.678-.904.452-1.808.904-2.712 1.469-.339.113-.452.339 0 .565.678.565 1.469 1.13 2.147 1.695.226.113.452.339.565.452.226.226.226.565.113.904-.226.226-.452.226-.791.226a1.56 1.56 0 0 0-.452-.339c-1.13-.904-2.26-1.695-3.39-2.599-.791-.678-.791-1.13.113-1.695 1.243-.678 2.599-1.356 3.842-2.034.678-.226 1.13 0 1.13.678zm-35.03 2.486c.113-3.277 2.26-5.989 5.311-6.554.339-.113.678-.113 1.017-.113.226.113.452.339.452.565 0 .339-.113.678-.339.791-.339 0-.678.113-.904.113-2.373.565-3.955 2.373-4.181 4.972v.791c-.113.452-.226.678-.678.678-.452 0-.565-.339-.678-.791v-.452zm68.93 0v.791c-.113.339-.339.452-.678.452s-.565-.226-.565-.452v-.678c-.226-2.712-1.921-4.746-4.407-5.311-.226 0-.339 0-.452-.113-.452-.113-.791-.339-.678-.791.113-.565.452-.565.904-.565 1.469.226 2.825.791 3.842 1.808 1.243 1.356 1.921 2.938 2.034 4.859zM241.481 189.84c-1.695-.113-2.938-.565-3.729-1.695-.339-.452-.565-.452-.904 0-1.582 1.921-3.955 2.26-5.763.904-.678-.452-1.243-1.017-1.582-1.808-.113-.339-.226-.904.226-1.13.452-.226.791 0 1.017.452.113.339.339.565.565.904 1.469 1.695 4.068 1.13 4.972-1.017.113-.452.226-.791-.339-.904-.904-.226-1.356-.904-1.921-1.582-.226-.226-.339-.565-.452-.904-.113-.678.113-1.13.791-1.13h5.876c.565 0 .791.452.678 1.13-.339 1.13-1.13 1.695-1.921 2.26-.339.226-.791.226-.904.565 0 .452.226.791.452 1.243 1.243 1.808 3.729 1.808 5.085 0l.339-.678c.226-.339.565-.452.904-.226.339.113.452.452.226.791a4.92 4.92 0 0 1-1.13 1.808c-.904.678-1.808 1.017-2.486 1.017zm15.029-12.43c1.921 0 3.39 1.469 3.39 3.39s-1.582 3.39-3.503 3.39-3.277-1.582-3.277-3.503 1.469-3.277 3.39-3.277zm-39.55 6.78c-1.921 0-3.39-1.469-3.39-3.39s1.356-3.39 3.277-3.39c2.034 0 3.503 1.469 3.503 3.39s-1.469 3.39-3.39 3.39z" fill="#151D38"></path></g><g transform="translate(172.890000, 203.400000)" fill="#7DA159" font-size="20" font-weight="600" class="sans-serif"><text><tspan x="0" y="20">Incoming</tspan></text><text><tspan x="0" y="44.86">traffic</tspan></text></g></g><g stroke-dasharray="6.78" transform="translate(112.330000, 194.500000)" stroke="#F5A623" stroke-width="14.69"><path d="M256.51 428.496V297.755H127.125V0" id="anime-path1" stroke-dasharray="13.56"></path><path d="M129.611 428.496V297.755H.226V0" id="anime-path1-2" opacity="0" stroke-dasharray="13.56" transform="translate(64.918500, 214.248000) scale(-1, 1) translate(-64.918500, -214.248000)"></path></g></g></svg>

[liZe]

The size of your SVG is not defined, that's why this problem appears. You can add width="891px" height="878px" to your svg tag and it will work.

I have to check the spec about that, because the 3 main web renderers increase the size of "sizeless" SVG files, just as if they had a width="100%" property set.

[liZe]

There's a bug. The spec tells that

Otherwise, its size is resolved as a contain constraint against the default object size.

That's not what we do.

EDIT: it's not related. For replaced elements, we have to follow what's in CSS2, and it doesn't rely on concrete object size.

[danielepolencic]

I'm a bit lost. I'd like to avoid width="xxx" and height="xxxx" as those are not responsive, is there anything else I should try?

[liZe]

I'm a bit lost. I'd like to avoid width="xxx" and height="xxxx" as those are not responsive, is there anything else I should try?

You just have to wait for me to fix this bug :wink:.

[danielepolencic]

Ok, apologies. I didn't fully understand the previous two comments. Thanks for looking into this.

[liZe]

Ok, apologies. I didn't fully understand the previous two comments.

No problem, I often add technical stuff and specification quotes in comments so that I can remember what I've understood and done after a few months, when new related bugs are reported :smile:.

From CSS 2.1 (10.3.2):

If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width, then the used value of 'width' is undefined in CSS 2.1. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.

It means that this use case is undefined, but there's a "suggestion". Browsers actually follow this suggestion. WeasyPrint didn't, because I had found a better solution (as I'm really smarter than those spec nerds, you know).

I was wrong. Of course. And it's not the first time. At all.

I've blindly followed what's in the spec, and the result is now the same as what browsers do. Surprise.

Note that when an image with no intrinsic size is included in a block whose size depends on the children sizes (for example, an SVG img in an inline-block div), the image size is currently random in WeasyPrint (and it's undefined in the spec, but other browsers give something beautiful)… This "bug" is somehow the same as #656 and #776.

[liZe]

(It's not fixed in master because some changes in the perf branch were useful. perf will be merged soon.)

(And I need to add a test before closing.)

[danielepolencic]

Thanks for the detailed write-up.
After reading your comment I noticed that the description for the bug report wasn't accurate.
I'm using the same tag, but we different image types:

<img src="XXX.png" />

and

<img src="XXX.svg" />

I'm not using inline SVGs (for now).
From what I could gather your fix should address both. I will keep an eye on perf branch.

[liZe]

I'm not using inline SVGs (for now).

WeasyPrint doesn't support inline SVG yet (see #75).

I've added the test in fb90a736, time to close!