tomn Posted February 7, 2021 Share Posted February 7, 2021 Hi, How to export svg to use in Xcode? I have tried all the options, but when the background is transparent, I always get a black svg in Xcode. When I export such svg directly from Figma for example, the background shows correctly. Regards, T. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 7, 2021 Share Posted February 7, 2021 Did you compared the generated SVG code from Figma and Affinity inside an editor to identify the possible code differences and thus different SVG handling? 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...
tomn Posted February 11, 2021 Author Share Posted February 11, 2021 <svg width="300" height="40" viewBox="0 0 300 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 20C0 8.95431 8.95431 0 20 0H280C291.046 0 300 8.95431 300 20C300 31.0457 291.046 40 280 40H20C8.9543 40 0 31.0457 0 20Z" fill="black" fill-opacity="0.03"/> </svg> Figma code is above. Affinity code is below. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 300 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <path d="M0,20C0,8.954 8.954,0 20,0L280,0C291.046,0 300,8.954 300,20C300,31.046 291.046,40 280,40L20,40C8.954,40 0,31.046 0,20Z" style="fill-opacity:0.07;fill-rule:nonzero;"/> </svg> When I take the SVG from the top, open it in Affinity and export, then Affinity export is different. Something in it causes the Xcode to read the SVG in a wrong way. Is there any way to export it correctly? Quote Link to comment Share on other sites More sharing options...
BofG Posted February 11, 2021 Share Posted February 11, 2021 Figma: fill-opacity="0.03" Affinity: style="fill-opacity:0.07;.." The difference being that Figma is using the property directly on the path, Affinity is setting it via CSS using the style attribute. If you change: style="fill-opacity:0.07;fill-rule:nonzero;" to fill-opacity="0.07" in the Affinity file and try that to see if it works. There's no way that I know of to force Affinity to output that way if it does work, hand editing might be your only option. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 11, 2021 Share Posted February 11, 2021 18 minutes ago, BofG said: hand editing might be your only option. Well there are tools which can do all that for you without the need of a text editor. - See for example ... SVGOMG - SVGO's Missing GUI svgo SVGOMG in action ... 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...
BofG Posted February 11, 2021 Share Posted February 11, 2021 7 minutes ago, v_kyr said: Well there are tools which can do all that for you without the need of a text editor. - See for example ... SVGOMG - SVGO's Missing GUI svgo SVGOMG in action ... Good suggestion! I need to work on my memory... lol v_kyr 1 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 11, 2021 Share Posted February 11, 2021 Well ... Quote "There is always a bigger fish", said Jedi master Qui-Gon Jinn with Obi-Wan Kenobi and Jar Jar Binks traveling in a bongo through the planetary core of Naboo. ... make that in our context here ... "There is mostly always a third party tool", ...which can do! 😉 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...
tomn Posted February 11, 2021 Author Share Posted February 11, 2021 Thanks for the link and the insight. Is there a way to bring an Affinity team attention to that, so they could could read this post and implement such export option inside the App so we don't have to use third party tools? Quote Link to comment Share on other sites More sharing options...
BofG Posted February 11, 2021 Share Posted February 11, 2021 38 minutes ago, tomn said: Thanks for the link and the insight. Is there a way to bring an Affinity team attention to that, so they could could read this post and implement such export option inside the App so we don't have to use third party tools? You can post it to the suggestions/feedback sub forum. I would strongly recommend against holding your breath for it to be implemented though Quote Link to comment Share on other sites More sharing options...
tomn Posted February 11, 2021 Author Share Posted February 11, 2021 Done. It's there. Let's see what good comes out of it. Quote Link to comment Share on other sites More sharing options...
Folox Posted April 17, 2021 Share Posted April 17, 2021 Have be struggling with the same problem right now. Maybe my solution works for you as well: For me, the problem lays in setting the stroke different then "Align stroke to center" before applying "Expand stroke". Just switching it back and resizing the shapes to match the targeted stroke solved this issue. Quote Link to comment Share on other sites More sharing options...
Julien CASSAN Posted December 8, 2021 Share Posted December 8, 2021 I have the same issue. Does someone found the setup for SVGO which correct the SVG ? I have tried several (select and deselect options) without finding a working setup. 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.