Jump to content
You must now use your email address to sign in [click for more info] ×

[Designer] SVG Export for Xcode


Recommended Posts

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.

Link to comment
Share on other sites

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?

☛ 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

<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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 in action ...

bild1.jpg.4036ba3c09489674e1e680e252fc106d.jpg

bild2.jpg.e27bc6a3c741bb62511e9d4f45c5b1ef.jpg

☛ 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

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! 😉

 

☛ 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

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?

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

  • 7 months later...

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.