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

SVG gradients & patterns not imported


Nailunia

Recommended Posts

Hello,

As a dataviz designer I often create the base of my works with SVGs on the web, so I can program the visual elements to be based on the data, then to import them into a vector tool for other adjustments. I've noticed that Affinity Designer doesn't import any SVG linearGradient / radialGradient nor patterns, which I do often use, so for now I can't rely solely on Affinity Designer sadly enough. (I copy the SVG element from the "Elements" section from the devTools in Chrome)

I've attached a document that shows the import of the link below. All the inner curves that have a gradient in the online version are invisible (have no fill) in the import: https://bl.ocks.org/nbremer/raw/4de6f0a9d9d06373fc639e32e9c346cc/ 

For a radial gradient, you can try this: https://bl.ocks.org/nbremer/raw/e944485869ac8fd57413a158e9d8aae0/ which results in a no-fill circle being placed in Affinity Designer

For pattern examples, you can try the following links that all are imported seemingly remaining invisible: 
https://bl.ocks.org/veltman/raw/57fbb830ba7e62caa46a82891168bc29/
https://bl.ocks.org/1wheel/raw/a8f39c8a96b71735488bf280d34bd765/
https://bl.ocks.org/veltman/raw/50a350e86de82278ffb2df248499d3e2/

I'm using Affinity Designer 1.7.1 on macOS

Thank you!

SVG_import_No_gradients.afdesign

Link to comment
Share on other sites

  • Staff

Hi Nailunia,

Welcome to the Affinity Forums!

Would you be able to attach some actual SVG files of the offending documents please, the code Chrome is showing me is not a standard SVG. I do know that there is an issue already with development that SVG Patterns are being ignored on import however.

Link to comment
Share on other sites

Sure! I've attached the SVG that I get from copying the SVG from Chrome into a text editor (of the first example). The only thing I did was to replace all the " by ' but other vector tools were able to read the SVG just fine even with the "'s in them.

Is this want you meant? (Otherwise I'm not sure what isn't standard SVG that Chrome is showing you?)

chord_diagram.svg

Link to comment
Share on other sites

  • Staff
5 minutes ago, Nailunia said:

Sure! I've attached the SVG that I get from copying the SVG from Chrome into a text editor (of the first example). The only thing I did was to replace all the " by ' but other vector tools were able to read the SVG just fine even with the "'s in them.

Is this want you meant? (Otherwise I'm not sure what isn't standard SVG that Chrome is showing you?)

chord_diagram.svg

Thank you very much, when I inspected the object I was just seeing the JavaScript I completely missed the SVG tag that was hiding away! 

Looking at the SVGs it isn't specifically the gradients that are causing the problem, it is that we're not reading the 'style:fill: url' elements correctly. This is also a known issue with development, so I'll get it bumped with them!

SVG Chrome.jpg

Link to comment
Share on other sites

Haha, I see. Yeah with those simple examples from bl.ocks.org people just usually inline everything in the HTML ;)

And thank you! Hopefully it won't be too intense of a fix to correctly parse the "fill: url()" *fingers crossed* In that sense, I import gradients about 10 times more often than patterns, so if gradients are working that's already a big plus!

Link to comment
Share on other sites

This is what I get if I simply extract the SVG code from the first link and open it in AD... all looks good to me.

Marvel Characters.afdesign

Affinity Designer 2.4.1.2344 | Affinity Photo 2.4.1.2344 | Affinity Publisher 2.4.1.2344
Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.6.8, Magic Mouse

Link to comment
Share on other sites

That's odd! Apart from the opacities of the inner curves not coming across, the gradients look fine. I did the right-mouse-click -> copy -> copy element -> CMD+V in AD and I get no gradients (see image)

How did you extract it?

copy_SVG_from_Chrome.thumb.png.e331dde80bfa0558ad2073500e4160f1.png

Edited by Nailunia
Asked the same question twice
Link to comment
Share on other sites

I just printed the files to a pdf and opened them in AD so maybe I'm bypassing the objective?  Obviously once edited in AD they can be re-exported as svg files.

Marvel Characters.afdesign

Marvel Characters.svg

Radial.afdesign

Radial.svg

 

Affinity Designer 2.4.1.2344 | Affinity Photo 2.4.1.2344 | Affinity Publisher 2.4.1.2344
Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.6.8, Magic Mouse

Link to comment
Share on other sites

Hi Nailunia,

4 hours ago, Nailunia said:

That's odd! Apart from the opacities of the inner curves not coming across, the gradients look fine.

 

If you print the file to a pdf from Chrome then the transparency is included, so maybe a workaround until the svg bug is fixed in AD?

Marvel Characters Chrome.pdf

Marvel Characters Chrome.afdesign

Affinity Designer 2.4.1.2344 | Affinity Photo 2.4.1.2344 | Affinity Publisher 2.4.1.2344
Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.6.8, Magic Mouse

Link to comment
Share on other sites

Ah, the PDF route! Yeah, that actually brings other issues, such as the original SVG groupings having completely disappeared, which is quite important for me to have, since I usually have hundreds of SVG elements, all carefully placed in specific groups to then manipulate later on. And I believe that was also something with text, but I can't quite remember it. I've been using the SVG copy solely for a while now.

Thanks for testing! (and odd, that the PDF does have the opacity, but when loaded into AD it's not there)

Link to comment
Share on other sites

1 minute ago, Nailunia said:

Thanks for testing! (and odd, that the PDF does have the opacity, but when loaded into AD it's not there) 

 

When the pdf is generated from the Chrome browser the opacity IS there when the file is opened in AD, that's the odd thing. Do the same from Firefox for example and the opacity isn't maintained. See the two files in my previous post.

When you say SVG groupings are you referring to how you've grouped specific elements when creating the original file or something else?

Affinity Designer 2.4.1.2344 | Affinity Photo 2.4.1.2344 | Affinity Publisher 2.4.1.2344
Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.6.8, Magic Mouse

Link to comment
Share on other sites

 

5 minutes ago, Hangman said:

When the pdf is generated from the Chrome browser the opacity IS there when the file is opened in AD, that's the odd thing. Do the same from Firefox for example and the opacity isn't maintained. See the two files in my previous post.

Ah, apologies, I misunderstood that!

5 minutes ago, Hangman said:

When you say SVG groupings are you referring to how you've grouped specific elements when creating the original file or something else?

Yes indeed, when I programmatically create "g" groups within the SVG (I create them with JavaScript + D3.js), to hold things such as the outer arcs with text together (my true examples are much bigger and more complex than the examples I shared. Right now I'm working with an SVG that has >6000 elements, so the careful grouping is what is keeping me sane while adding the final touches in the vector program)

Link to comment
Share on other sites

I see your problem now...

Out of interest are the "g" groups maintained when exporting back to SVG after having made any adjustments in AD, assuming that's what you are effectively doing?

Affinity Designer 2.4.1.2344 | Affinity Photo 2.4.1.2344 | Affinity Publisher 2.4.1.2344
Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.6.8, Magic Mouse

Link to comment
Share on other sites

  • 11 months later...
  • Staff

We have made fixes/improvements to this area (Some SVG files do not open correctly) of the program in the latest release.

The fixes and how to update are described in these forum posts.

We would appreciate you checking that this issue has now been resolved for you.

Patrick Connor
Serif Europe Ltd

"There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self."  W. L. Sheldon

 

Link to comment
Share on other sites

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.