Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG width not rendering correctly #901

Closed
danielepolencic opened this issue Jul 14, 2019 · 11 comments

Comments

@danielepolencic
Copy link

commented Jul 14, 2019

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:

image

All the SVGs are not:

image

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

This comment has been minimized.

Copy link
Member

commented Jul 14, 2019

Hello!

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

@danielepolencic

This comment has been minimized.

Copy link
Author

commented Jul 14, 2019

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 liZe added bug conformance and removed bug labels Jul 24, 2019

@liZe

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

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

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

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

This comment has been minimized.

Copy link
Author

commented Jul 24, 2019

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

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

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 😉.

@danielepolencic

This comment has been minimized.

Copy link
Author

commented Jul 24, 2019

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

@liZe

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

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 😄.

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 added a commit that referenced this issue Jul 24, 2019
@liZe

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

(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

This comment has been minimized.

Copy link
Author

commented Jul 24, 2019

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 added a commit that referenced this issue Jul 25, 2019
@liZe

This comment has been minimized.

Copy link
Member

commented Jul 25, 2019

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

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

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

@liZe liZe closed this Jul 25, 2019

@liZe liZe added this to the 49 milestone Jul 25, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.