Pyanepsion Posted January 26 Share Posted January 26 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 Quote 6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity Publisher, Affinity Designer, Affinity Photo). ███ Mais je vous le demande, peut-on imaginer une police sans sérifs ? Link to comment Share on other sites More sharing options...
Affinityconfusesme Posted January 26 Share Posted January 26 Hi @Pyanepsion can you please upload the files to see if we can reproduce the issue... Quote Lenovo IdeaPad 5 Ryzen 7 5700U Rx Vega 8 graphics 16GB RAM (15.3 usable) Acer KB202 27in 1080p monitor Affinity Photo 1.10.6 Affinity photo 2 2.4.2 Affinity Designer 2 2.4.2 Affinity Publisher 2 2.4.2 on Windows 11 Pro version 23H2 Beta builds as they come out. canon 80d| sigma 18-200mm F3.5-6.3 DC MACRO OS HSM | Tamron SP AF 28-75mm f/2.8 XR Di LD | Canon EF-S 10-18mm f/4.5-5.6 IS STM Autofocus APS-C Lens, Black Link to comment Share on other sites More sharing options...
Pyanepsion Posted January 26 Author Share Posted January 26 Click on the link. Quote 6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity Publisher, Affinity Designer, Affinity Photo). ███ Mais je vous le demande, peut-on imaginer une police sans sérifs ? Link to comment Share on other sites More sharing options...
Affinityconfusesme Posted January 26 Share Posted January 26 I can reproduce the issue in 2240 beta. Pyanepsion 1 Quote Lenovo IdeaPad 5 Ryzen 7 5700U Rx Vega 8 graphics 16GB RAM (15.3 usable) Acer KB202 27in 1080p monitor Affinity Photo 1.10.6 Affinity photo 2 2.4.2 Affinity Designer 2 2.4.2 Affinity Publisher 2 2.4.2 on Windows 11 Pro version 23H2 Beta builds as they come out. canon 80d| sigma 18-200mm F3.5-6.3 DC MACRO OS HSM | Tamron SP AF 28-75mm f/2.8 XR Di LD | Canon EF-S 10-18mm f/4.5-5.6 IS STM Autofocus APS-C Lens, Black Link to comment Share on other sites More sharing options...
debraspicher Posted January 26 Share Posted January 26 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) Pyanepsion 1 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 26 Share Posted January 26 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. 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> 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> 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> 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. Pyanepsion and Sean P 2 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Bit Disappointed Posted January 27 Share Posted January 27 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: Pyanepsion 1 Quote I simply no longer believe that there are any professional graphic designers here. Everything follows suit. Just everything. Link to comment Share on other sites More sharing options...
Staff Sean P Posted January 29 Staff Share Posted January 29 Thanks all - I will get these issues reported and passed on to development. Pyanepsion 1 Quote Link to comment Share on other sites More sharing options...
Staff Sean P Posted January 29 Staff Share Posted January 29 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. 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. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 29 Share Posted January 29 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Staff Sean P Posted January 29 Staff Share Posted January 29 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. Quote Link to comment Share on other sites More sharing options...
Staff Affinity Info Bot Posted January 29 Staff Share Posted January 29 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. Quote Link to comment Share on other sites More sharing options...
Staff Affinity Info Bot Posted January 29 Staff Share Posted January 29 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. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 29 Share Posted January 29 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. Pyanepsion 1 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Staff Affinity Info Bot Posted March 11 Staff Share Posted March 11 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. debraspicher 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.