Darren Rose Posted August 15, 2019 Posted August 15, 2019 Can someone tell me why my SVG file doesn't look correct in Affinity but fine in other apps? Best explained by way of attached image - top is how SVG should look, bottom is how it looks in Affinity Thanks Quote
Staff Patrick Connor Posted August 15, 2019 Staff Posted August 15, 2019 @Darren Rose Welcome to the Serif Affinity forums. I see an issue with line thickness on the triangle and it looks like the gradient has been lost or mis-transformed on the radial transparency white hilight. We need the SVG file to understand more about this problem. Quote Patrick Connor Serif Europe Ltd Latest V2 releases on each platform Help make our apps better by joining our beta program! "There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self." W. L. Sheldon
Darren Rose Posted August 15, 2019 Author Posted August 15, 2019 Yes the main issue is the radial transparency highlighting Please find the SVG file attached Thanks for your reply affinity.svg Quote
Darren Rose Posted August 15, 2019 Author Posted August 15, 2019 P.S. Ignore the line thickness on the triangle - that is not a problem, just be posting wrong image!! Quote
Staff Patrick Connor Posted August 15, 2019 Staff Posted August 15, 2019 OK, this has been reported to the developers, but it is not a new problem. Thanks for your help. I do not have a work around for this, sorry. Perhaps you have another program that can read the SVG in and then re-Export without using fill:url(#x) to define the fill/transparency, which is the part we do not interpret accurately at present. Quote Patrick Connor Serif Europe Ltd Latest V2 releases on each platform Help make our apps better by joining our beta program! "There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self." W. L. Sheldon
Darren Rose Posted August 15, 2019 Author Posted August 15, 2019 Okay thanks for reply, I hope it can one day support it, as out of all the editing apps I have been testing I do prefer Affinity, and if this was working would be ready to purchase. Several apps seem to suffer with same problem such as Xara, the only apps which open it okay so far are Inkscape and Boxy SVG. Patrick Connor 1 Quote
Staff Patrick Connor Posted August 15, 2019 Staff Posted August 15, 2019 Did you check if either of them can re-export it in a way that Affinity can import correctly? Quote Patrick Connor Serif Europe Ltd Latest V2 releases on each platform Help make our apps better by joining our beta program! "There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self." W. L. Sheldon
v_kyr Posted August 15, 2019 Posted August 15, 2019 That's an Inkscape generated SVG (in Inkscape format) with applied gaussian blur filters, which I believe Affinity's SVG parser doesn't know to make any use out of. Quote ...<filter height="1.72" width="1.72" y="-0.36000001" x="-0.36000001" id="a"> <feGaussianBlur id="feGaussianBlur2-7" stdDeviation="2.46429" /> </filter> ... <path style="fill:#ffffff;fill-opacity:0.75;fill-rule:evenodd;filter:url(#a)" id="path36" d="m 111.31,731.2 c -3.283,-3.925 -3.5949,-6.1477 -2.0238,-10.438 3.3358,-6.1448 4.4954,-8.0682 5.41,-9.4048 1.9008,5.1616 2.1257,19.14 -3.3862,19.843 z" transform="matrix(0.75,0,0,0.80303,78.571,150.98)" /> Thus the applied filter isn't taken into account for those gradients and it looks instead like this in Affinity! 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
Staff Patrick Connor Posted August 15, 2019 Staff Posted August 15, 2019 Yes, that seems to be correct, thanks @v_kyr Quote Patrick Connor Serif Europe Ltd Latest V2 releases on each platform Help make our apps better by joining our beta program! "There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self." W. L. Sheldon
Darren Rose Posted August 15, 2019 Author Posted August 15, 2019 4 hours ago, Patrick Connor said: Did you check if either of them can re-export it in a way that Affinity can import correctly? Yes, tried export but still same issue when opened in Affinity Patrick Connor 1 Quote
Darren Rose Posted August 15, 2019 Author Posted August 15, 2019 4 hours ago, v_kyr said: That's an Inkscape generated SVG (in Inkscape format) with applied gaussian blur filters, which I believe Affinity's SVG parser doesn't know to make any use out of. Thus the applied filter isn't taken into account for those gradients and it looks instead like this in Affinity! Okay thanks for the information. Hopefully one day Affinity will support Inkscape generated SVG files, since it is probably one of the most common sources of files Patrick Connor 1 Quote
v_kyr Posted August 15, 2019 Posted August 15, 2019 Well it doesn't matter if it's a Inkscape generated SVG (since Inkscape can also export SVG drawings as a more general SVG format compliance), or from some other SVG capable software here. Instead it has overall more to do with the spectrum/degree of SVG specification support, which is limited in Affinity and thus far from beeing complete. Keywords: Filter Effects, feGaussianBlur 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
Darren Rose Posted August 15, 2019 Author Posted August 15, 2019 Okay that make sense. as a newcomer to Affinity I am surprised they don't support it fully?, I thought the whole point of the product was to be the best at what it does? Seems odd that Boxy SVG (https://boxy-svg.com/) an app which can be bought for under £10 can do it, but Serif can't. Shame as I like everything else about it, and would be ready to spend some money if this worked better Quote
Palatino Posted August 16, 2019 Posted August 16, 2019 I appreciate Boxy SVG very much and use it to prepare graphics for the web (control code and the like). But I don't design anything with Boxy SVG. The program is made for a very special field of application and is also very good in it, but in the sum is not comparable to Affinity Designer/Publisher. I consider filters to be something very "special" and would never expect them to show the same results across multiple programs. Here's an example of what happens when I shrink your file in Affinity. The reverse effect is also available in Boxy SVG. Quote Thanks to DeepL.
Darren Rose Posted August 16, 2019 Author Posted August 16, 2019 In your image above you seem to have the blue affect looking okay in Affinity when compared to my post - how? Quote
Palatino Posted August 16, 2019 Posted August 16, 2019 5 hours ago, Palatino said: Here's an example of what happens when I shrink your file in Affinity. The reverse effect is also available in Boxy SVG. Reduce to 10 %. Patrick Connor 1 Quote Thanks to DeepL.
Palatino Posted August 16, 2019 Posted August 16, 2019 Ah! 2.5 px –> 25 px Patrick Connor and Darren Rose 2 Quote Thanks to DeepL.
Darren Rose Posted August 16, 2019 Author Posted August 16, 2019 1 hour ago, Palatino said: Ah! 2.5 px –> 25 px Thank you Palatino - changing it from 2.5 to 25 works fine Quote
v_kyr Posted August 16, 2019 Posted August 16, 2019 14 hours ago, Darren Rose said: Seems odd that Boxy SVG (https://boxy-svg.com/) an app which can be bought for under £10 can do it, but Serif can't. Well that Boxy SVG tool uses a ... Quote Chromium-based rendering engine. The editor renders SVG documents exactly the same way as the most popular desktop and mobile web browsers. ... so it's no surprice, since Webbrowsers (Firefox, Chrome etc.) tend to have the best full feature supported SVG engines included. Thus tools which use webbrowser based SVG render engines do support a much wider and richer set of the SVG spec, they can parse and interpret a whole bunch more of possible SVG code. 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
Darren Rose Posted August 16, 2019 Author Posted August 16, 2019 @v_kyr - that make sense Any way all fixed now as just need gausian blue radius changing from 2.5px to 25px as per Palatino reply, and the images now look same in Affinity as they do in Boxy and Inkscape Quote
v_kyr Posted August 16, 2019 Posted August 16, 2019 Yes but there is one essential difference then now, when you save again as SVG code exported from Affinity, it will now contain pixels (an image) for the with gaussian blur affected parts. In Inkscape and Boxy those areas were vectors, in Affinity these now got pixels due to the applied "Gauße Unschärfe Ebeneneffect". 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
Darren Rose Posted August 16, 2019 Author Posted August 16, 2019 @v_kyr Okay thanks for explanation, I see what you mean after saving it and reopening it. I need to try and get the same blue effect using something Affinity does support then Quote
kboortz Posted May 21, 2023 Posted May 21, 2023 Old thread, but I hit the SVG import problem. I completed a test to become a drone pilot and the license card was downloadable in SVG. After importing into Affinity Designer 2, it looked not even close. The QR code was misplaced etc. It imported fine in Inkscape, but exporting it again to SVG or PDF did produce something that Affinity Designer 2 think is blank. The solution I found was to run a command line tool that I assume cleaned up and/or normalized the SVG to something Affinity Designer 2 is ok with brew install librsvg rsvg-convert -f svg -o dronecard_cleaned_up.svg dronecard.svg kent charles-dyfis-net 1 Quote
charles-dyfis-net Posted July 17, 2023 Posted July 17, 2023 On 5/21/2023 at 12:32 PM, kboortz said: Old thread, but I hit the SVG import problem. I completed a test to become a drone pilot and the license card was downloadable in SVG. After importing into Affinity Designer 2, it looked not even close. The QR code was misplaced etc. It imported fine in Inkscape, but exporting it again to SVG or PDF did produce something that Affinity Designer 2 think is blank. The solution I found was to run a command line tool that I assume cleaned up and/or normalized the SVG to something Affinity Designer 2 is ok with brew install librsvg rsvg-convert -f svg -o dronecard_cleaned_up.svg dronecard.svg kent Beautiful, thank you! Can confirm svg->svg round-tripping through rsvg transformed my sigil (originally constructed in Inkscape off a hand-drawn template) into a form in which the Affinity suite can handle it properly. To allow the Affinity team to try to figure out the bugs that prevent a SVG that works in other, strictly standards-compliant renderers from behaving properly, I'm attaching both the original (`tcarls-sigil.svg`, rendering incorrectly in Affinity) and post-processed version (`tcarls-sigil-rsvg.svg`, which Affinity renders correctly) here. tcarls-sigil.svg tcarls-sigil-rsvg.svg Quote
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.