Some SVGs not render correctly

Question

Some SVGs not render correctly

User756675678 opened this issue 4 years ago · comments

I use v1.0.19 x64
1.
<svg width="68" height="48" xmlns="http://www.w3.org/2000/svg"><path d="M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1a89.6 89.6 0 000 32.5c.8 3 2.5 5.5 5.4 6.3C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.6c3-.7 4.6-3.2 5.4-6.1C68 35 68 24 68 24s0-11-1.5-16.3z"/><path fill="#fff" d="M45 24L27 14v20"/></svg>
Must be

But rendered as

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.3 1c-.7.1-3 .7-3.3 4a5.2 5.2 0 011.8 9.8A5.3 5.3 0 014.7 11c-1-6 4-10.2 9.5-10A10 10 0 000 10a10 10 0 1014.3-9z" fill="#F91600"/></svg>
Must be:

But rendered as

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0A10 10 0 000 10.4C2.6 6 6 5.3 6.2 5.3V5a2.2 2.2 0 11.5 1.4c-4 2.5-5 8.1-4.9 9.2l1.5 1.8A15 15 0 0113.3 9a2.2 2.2 0 11.5 1.4 11.5 11.5 0 00-6.7 9A10 10 0 0020 10 10 10 0 0010 0z" fill="#FBB616"/></svg>
Must be:

But rendered as

I can provide more examples if need, but I think reason is same for all.

how I can fix render of this svg?
I use SVGOMG for build it.

matt wilkie · Answer 1 · Thu Jan 30 2020 05:15:09 GMT+0800 (China Standard Time)

I get the same wrong results here. The sample svg look fine in Inkscape, Firefox and Chrome.

Tibold Kandrai · Answer 2 · Sun Feb 02 2020 18:20:37 GMT+0800 (China Standard Time)

Thanks for the examples.
I'll see if there is anything we can do about it. My initial guess is that we'll need to report these to the Qt guys as bugs.

User756675678 · Answer 3 · Tue Feb 11 2020 14:16:31 GMT+0800 (China Standard Time)

Possible reason not in render, Maybe in some options for it.
If such options exists of course.
IDK have you render files and exists some options or not.

User756675678 · Answer 4 · Tue Feb 11 2020 15:08:58 GMT+0800 (China Standard Time)

I found cause. QT bug.
If EllipticalArcCommands written in short form then it is buggy. For example bugged svg:
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.3 1c-.7.1-3 .7-3.3 4a5.2 5.2 0 011.8 9.8A5.3 5.3 0 014.7 11c-1-6 4-10.2 9.5-10A10 10 0 000 10a10 10 0 1014.3-9z" fill="#F91600"/></svg>
Fixed svg:
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.3 1c-.7.1-3 .7-3.3 4a5.2 5.2 0 0 1 1.8 9.8A5.3 5.3 0 0 1 4.7 11c-1-6 4-10.2 9.5-10A10 10 0 0 0 0 10a10 10 0 1 0 14.3-9z" fill="#F91600"/></svg>
I add spaces for flags in A command.
before:
a5.2 5.2 0 011.8 9.8
after:
a5.2 5.2 0 0 1 1.8 9.8
So you can easy fix it use some regular expression for find this commands and add spaces if it is not there. After that pass fixed svg to render until QT not fix a bug.
As dirty fix it can be done via some simple regexp.
As proper solution you need carefully read SVG path definition docs, because duplicate of same commands can be written in short form without command name.
Maybe exists some another pitfalls.

Also need report to QT about this bug.

User756675678 · Answer 5 · Tue Feb 11 2020 15:34:43 GMT+0800 (China Standard Time)

Simple regex for fix:
([Aa][\x09\x20\x0A\x0C\x0D,]*(?:[0-9]+(?:[.][0-9]+)?|[.][0-9]+)[\x09\x20\x0A\x0C\x0D,]*(?:[0-9]+(?:[.][0-9]+)?|[.][0-9]+)[\x09\x20\x0A\x0C\x0D,]*(?:[0-9]+(?:[.][0-9]+)?|[.][0-9]+)[\x09\x20\x0A\x0C\x0D,]*)([01])[\x09\x20\x0A\x0C\x0D,]*([01])
replace with:
$1 $2 $3
Pay attention for ending space.
$n for capture group number. In some regex need use \n syntax instead.

User756675678 · Answer 6 · Tue Feb 11 2020 15:35:56 GMT+0800 (China Standard Time)

Search can be done for entire svg code. But more proper way - search path attributes and fix only this.

Tibold Kandrai · Answer 7 · Tue Feb 11 2020 21:20:06 GMT+0800 (China Standard Time)

Hey, this is really cool. Thanks! I have a pending release but I think I can include this workaround until at fixes it Tibold Kandrai Software Architect & Engineer

…

________________________________ From: User756675678 <notifications@github.com> Sent: Tuesday, February 11, 2020 8:35:56 AM To: tibold/svg-explorer-extension <svg-explorer-extension@noreply.github.com> Cc: Tibold Kandrai <tibold@kandrai.eu>; Comment <comment@noreply.github.com> Subject: Re: [tibold/svg-explorer-extension] Some SVGs not render correctly (#65) Search can be done for entire svg code. But more proper way - search path attributes and fix only this. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#65?email_source=notifications&email_token=AAPCDA64JDQKWFWN4VUPWHLRCJINZA5CNFSM4KM5AG6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELLOR2Y#issuecomment-584509675>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAPCDA4T6MFPNAHJGYZ747DRCJINZANCNFSM4KM5AG6A>.

User756675678 · Answer 8 · Sat Feb 29 2020 23:09:00 GMT+0800 (China Standard Time)

Any progress here?
Also I try find issue on QT tracker and do not find it. You did not create yet?

User756675678 · Answer 9 · Thu Jun 11 2020 00:07:55 GMT+0800 (China Standard Time)

New release 1.1.0 but issue still here.