Affinity Designer: United Kingdom flag displayed in black

[Pyanepsion]

Hello everyone,

I wanted to share a problem I encountered while working on a project in Affinity Designer. I followed a link from Wikipedia to create the UK flag, using the file entitled King’s_Queen’s Colour (1900-present) – construction sheet.svg

Flag, using the file entitled King’s_Queen’s Colour (1900-present) – construction sheet.svg.

When you open this file in InkScape, everything worked perfectly and the image was correctly displayed. When you try to open it in Affinity Designer, the background of the image appears completely transparent.

If you ingroup the elements, the whole image becomes black.

InkScape

Affinity Designer

[Affinityconfusesme]

Hi @Pyanepsion can you please upload the files to see if we can reproduce the issue...

[Pyanepsion]

Click on the link.

[Affinityconfusesme]

I can reproduce the issue in 2240 beta.

[debraspicher]

If you unclip the canvas, the numbers are way in the top left... so something not going right here... also using beta.


* Found the flag colors... (see X, Y)

[v_kyr]

Well there are a bunch of things the Affinity SVG parser doesn't interpret correctly here and thus has no clue of those SVG things.

Some simple SVG examples to be previewed in a webbrowser (like FF) and then compared to when opened in ADe then.

1. SVG ClipPath - doesn't work as it should (2 examples)
    

   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <clipPath id="myClip">
       <!--
         Everything outside the circle will be
         clipped and therefore invisible.
       -->
       <circle cx="40" cy="35" r="35" />
     </clipPath>
   
     <!-- The original black heart, for reference -->
     <path
       id="heart"
       d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
   
     <!--
       Only the portion of the red heart
       inside the clip circle is visible.
     -->
     <use clip-path="url(#myClip)" href="#heart" fill="red" />
   </svg>

    

   <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <clipPath id="clipPath">
             <rect x="15" y="15" width="40" height="40" />
         </clipPath>
     </defs>
   
     <circle cx="25" cy="25" r="20"
             style="fill: #0000ff; clip-path: url(#clipPath); " />
   </svg>

2. SVG marker - lines with arrows (1 example)
    

   <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <!-- A marker to be used as an arrowhead -->
       <marker
         id="arrow"
         viewBox="0 0 10 10"
         refX="5"
         refY="5"
         markerWidth="6"
         markerHeight="6"
         orient="auto-start-reverse">
         <path d="M 0 0 L 10 5 L 0 10 z" />
       </marker>
     </defs>
   
     <!-- A line with a marker -->
     <line
       x1="10"
       y1="10"
       x2="90"
       y2="90"
       stroke="black"
       marker-end="url(#arrow)" />
   
     <!-- A curved path with markers -->
     <path
       d="M 110 10
          C 120 20, 130 20, 140 10
          C 150 0, 160 0, 170 10
          C 180 20, 190 20, 200 10"
       stroke="black"
       fill="none"
       marker-start="url(#arrow)"
       marker-mid="url(#arrow)"
       marker-end="url(#arrow)" />
   </svg>

3. Opacity - works halfway, but a defined rectangle with width="100%" height="100%" isn't interpreted correctly here
    

   <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
         <stop offset="0%" style="stop-color:skyblue;" />
         <stop offset="100%" style="stop-color:seagreen;" />
       </linearGradient>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
     <circle cx="50" cy="50" r="40" fill="black" />
     <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
   </svg>

4. Flag SVG example -> s_display & f_display (clipPath id s/f - text placements etc. mismatches)
   ... and many other SVG specific deficits, too much to list them all here ...
    

So all in all it's no wonder (at least for me) that this SVG UK flag can't be rendered the right way in ADe here.

[Bit Disappointed]

6 hours ago, Pyanepsion said:

Hello everyone,

I wanted to share a problem I encountered while working on a project in Affinity Designer. I followed a link from Wikipedia to create the UK flag, using the file entitled King’s_Queen’s Colour (1900-present) – construction sheet.svg

Flag, using the file entitled King’s_Queen’s Colour (1900-present) – construction sheet.svg.

When you open this file in InkScape, everything worked perfectly and the image was correctly displayed. When you try to open it in Affinity Designer, the background of the image appears completely transparent.

If you ingroup the elements, the whole image becomes black.

InkScape

Affinity Designer

 

Ironically, variations of The Union Jack has given Serif problems several times - at least the SVG files on Wikipedia.

The position ends in hyperspace - but you can bring the flag in where it belongs like this (see X Y values in the transform panel):

If you paste the SVG source code to clipboard and select new file from clipboard, you get a slightly more usable version where the flag is actually displayed in miniature and can be scaled up with a mouse:

 

[Sean P]

Thanks all - I will get these issues reported and passed on to development.

[Sean P]

On 1/26/2024 at 10:42 PM, v_kyr said:

Well there are a bunch of things the Affinity SVG parser doesn't interpret correctly here and thus has no clue of those SVG things.

Some simple SVG examples to be previewed in a webbrowser (like FF) and then compared to when opened in ADe then.

1. SVG ClipPath - doesn't work as it should (2 examples)
    

   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <clipPath id="myClip">
       <!--
         Everything outside the circle will be
         clipped and therefore invisible.
       -->
       <circle cx="40" cy="35" r="35" />
     </clipPath>
   
     <!-- The original black heart, for reference -->
     <path
       id="heart"
       d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
   
     <!--
       Only the portion of the red heart
       inside the clip circle is visible.
     -->
     <use clip-path="url(#myClip)" href="#heart" fill="red" />
   </svg>

    

   <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <clipPath id="clipPath">
             <rect x="15" y="15" width="40" height="40" />
         </clipPath>
     </defs>
   
     <circle cx="25" cy="25" r="20"
             style="fill: #0000ff; clip-path: url(#clipPath); " />
   </svg>

Just to add these two are currently displaying fine in Affinity for me, however the others are as described.

[v_kyr]

10 minutes ago, Sean P said:

Just to add these two are currently displaying fine in Affinity for me, however the others are as described.

Not really as I used ADe v1 for those SVG samples ...

... which apperently can't handle these correctly.

[Sean P]

40 minutes ago, v_kyr said:

Not really as I used ADe v1 for those SVG samples ...

... which apperently can't handle these correctly.

I understand that, however this forum is specifically relating to issues with the version 2 beta.

[Affinity Info Bot]

An issue raised in this thread ("Specific SVG file is failing to open with layer in correct location") has now been reported to the developers by the testing team (Ref: AF-1900). Thank you very much for reporting this issue to us.

[Affinity Info Bot]

An issue raised in this thread ("SVG rectangle with width="100%" height="100%" is imported incorrectly as 1x1") has now been reported to the developers by the testing team (Ref: AF-1899). Thank you very much for reporting this issue to us.

[v_kyr]

1 hour ago, Sean P said:

I understand that, however this forum is specifically relating to issues with the version 2 beta.

Yes I know, though I always mostly check things also through v1 apps, so not only (or mainly) via v2 apps.

However, I generally recomend to check the Affinity SVG parsing and it's mapped interpretation behavior also against several SVG testsuites here ...

• https://www.antennahouse.com/svg-test-suite
• https://www.w3.org/Graphics/SVG/Test/Overview.html
• https://www.w3.org/Graphics/SVG/WG/wiki/Test_Suite_Overview#SVG_1.1_Second_Edition_Test_Suite:_16_August_2011
• ...

... and for several individual/specific/trickier SVG parts those then ideally against some of the examples from the ...

• MDN SVG Reference examples for SVG Elements & Attributes
• Scalable Vector Graphics (SVG) 1.1 (Second Edition) Spec
• ... etc.

[Affinity Info Bot]

The issue "SVG rectangle with width="100%" height="100%" is imported incorrectly as 1x1" (REF: AF-1899) has been fixed by the developers in internal build "2.5.0.2317".
This fix should soon be available as a customer beta and is planned for inclusion in the next customer release.
Customer beta builds are announced here and you can participate by following these instructions.
If you still experience this problem once you are using that build version (or later) please reply to this thread including @Affinity Info Bot to notify us.