SVG gradients & patterns not imported

[Nailunia]

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

[Sean P]

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.

[Nailunia]

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

[Sean P]

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!

[Nailunia]

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!

[Hangman]

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

[Nailunia]

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?

Edited August 13, 2019 by Nailunia
Asked the same question twice

[Hangman]

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

 

[Hangman]

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

[Nailunia]

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)

[Hangman]

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?

[Nailunia]

 

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)

[Hangman]

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?

[Nailunia]

Yes, thankfully they are  Although in 19 out of 20 usually don't need to export back to SVG, just high quality images, or share the .afdesign file itself.

[Patrick Connor]

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.

• Affinity Designer 1.8.4 for Windows            ( Microsoft Store and Affinity Store )
• Affinity Designer 1.8.4 for macOS               ( Mac App Store and Affinity Store )
• Affinity Designer 1.8.4 for iOS                      ( Apple iPad Store )
   
• Affinity Photo 1.8.4 for Windows                ( Microsoft Store and Affinity Store )
• Affinity Photo 1.8.4 for macOS                   ( Mac App Store and Affinity Store )
• Affinity Photo 1.8.4 for iOS                          ( Apple iPad Store )
    
• Affinity Publisher 1.8.4 for Windows         ( Microsoft Store and Affinity Store )
• Affinity Publisher 1.8.4 for macOS            ( Mac App Store and Affinity Store )

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