Affinity is not able to render correctly a standard SVG

[ETO]

Affinity is not able to open SVG files with a special syntax where some whitespaces are missing.
This syntax follows the standard SVG 1.1 so is expected that Affinity is able to read.

In the attached example an arc is wrote as:

a.65.65 0 011.109-.459

 The string 011.109 contains 3 values:

• 0
• 1 (a boolean is required here, it cannot be 11.109)
• 1.109

This syntax (with missing whitespaces) follows the SVG 1.1 standard: https://www.w3.org/TR/SVG11/paths.html#PathDataBNF

 

Quote

 

The following notation is used in the Backus-Naur Form (BNF) description of the grammar for path data:*: 0 or more

• +: 1 or more
• ?: 0 or 1
• (): grouping
• |: separates alternatives
• double quotes surround literals

elliptical-arc:
    ( "A" | "a" ) wsp* elliptical-arc-argument-sequence
elliptical-arc-argument-sequence:
    elliptical-arc-argument
    | elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
elliptical-arc-argument:
    nonnegative-number comma-wsp? nonnegative-number comma-wsp? 
        number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair

comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","

wsp:
    (#x20 | #x9 | #xD | #xA)

[...]

 

The example is properly displayed on Chrome and Firefox.

This issue has been discovered using SVGO (https://github.com/svg/svgo/issues/1137)

not working.svg

working.svg

[Sean P]

Hi ETO,

Thanks for letting us know - I've passed this onto development to be looked into.

[Delineated]

Yes, pretty much every SVG file that you can find anywhere will not render correctly in Affinity Designer after it has been optimised with SVGO v1.3 or above but will render correctly in all common web browsers and other software following SVG specifications.

A workaround in the meantime until this bug is fixed by the Affinity developers - if needing to edit an SVG file in Affinity that has already been run through SVGO - just open the SVG in a web browser like Chrome, then "Print to PDF" (Ctrl+P on Windows), then save the page to PDF and open it with Affinity to extract the vector graphic from the PDF which will then be correctly formatted.

[Patrick Connor]

We have made fixes/improvements to this area (Error parsing SVG path with optimized ARC parameters) of the program in the latest release.

The fixes and how to update are described in these forum posts.

• Affinity Designer 1.8.4 for Windows            ( Microsoft Store and Affinity Store )
• Affinity Designer 1.8.4 for macOS               ( Mac App Store and Affinity Store )
• Affinity Designer 1.8.4 for iOS                      ( Apple iPad Store )
   
• Affinity Photo 1.8.4 for Windows                ( Microsoft Store and Affinity Store )
• Affinity Photo 1.8.4 for macOS                   ( Mac App Store and Affinity Store )
• Affinity Photo 1.8.4 for iOS                          ( Apple iPad Store )
    
• Affinity Publisher 1.8.4 for Windows         ( Microsoft Store and Affinity Store )
• Affinity Publisher 1.8.4 for macOS            ( Mac App Store and Affinity Store )

We would appreciate you checking that this issue has now been resolved for you,

[ETO]

Great! It works!