Jump to content
Nailunia

SVG gradients & patterns not imported

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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 Photo 1.7.0, Affinity Designer 1.7.0, Affinity Publisher 1.7.0.384 Beta

MacBook Pro 16GB, macOS Mojave 10.14.5

Share this post


Link to post
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 Photo 1.7.0, Affinity Designer 1.7.0, Affinity Publisher 1.7.0.384 Beta

MacBook Pro 16GB, macOS Mojave 10.14.5

Share this post


Link to post
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)

Share this post


Link to post
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 Photo 1.7.0, Affinity Designer 1.7.0, Affinity Publisher 1.7.0.384 Beta

MacBook Pro 16GB, macOS Mojave 10.14.5

Share this post


Link to post
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)

Share this post


Link to post
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 Photo 1.7.0, Affinity Designer 1.7.0, Affinity Publisher 1.7.0.384 Beta

MacBook Pro 16GB, macOS Mojave 10.14.5

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×