Highlighted

"clipping path lost on roundtrip to tiny" in SVG exports

Explorer ,
Jun 23, 2020

Copy link to clipboard

Copied

I am experiencing issues with a long shadow blend I have a clipping path on. After exporting to SVG through the export panel, the SVG upon opening in Illustrator, has the message "clipping path lost on roundtrip to tiny" whereupon the clipping paths for the long shadow blends are cut off. I am not finding any solutions. Would appreciate any suggestions on the setings which are currently set to:
Styling: Internal CSS
Font: SVG
Images: Preserve

Object IDs: Layer Names

Decimal: 2

Minify and Responsive boxes are checked. 
The Illustrator files are being copied directly from Adobe Illustrators as .ai files and placed into Adobe XD. They place fine but when exporting through Zeplin, again the SVGs which look correct in Zeplin, have correct thumbnails in the SVG export at the root level, but upon opening are filled in with all shading lost. 
I am working in CC with all apps updated, on an iMac, High Sierra, 10.13.3, 3.4 GHz, Intel Core i7. 
Sincerely appreciate any suggestions! Thanks!

TOPICS
Bug, Import and export

Views

371

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

"clipping path lost on roundtrip to tiny" in SVG exports

Explorer ,
Jun 23, 2020

Copy link to clipboard

Copied

I am experiencing issues with a long shadow blend I have a clipping path on. After exporting to SVG through the export panel, the SVG upon opening in Illustrator, has the message "clipping path lost on roundtrip to tiny" whereupon the clipping paths for the long shadow blends are cut off. I am not finding any solutions. Would appreciate any suggestions on the setings which are currently set to:
Styling: Internal CSS
Font: SVG
Images: Preserve

Object IDs: Layer Names

Decimal: 2

Minify and Responsive boxes are checked. 
The Illustrator files are being copied directly from Adobe Illustrators as .ai files and placed into Adobe XD. They place fine but when exporting through Zeplin, again the SVGs which look correct in Zeplin, have correct thumbnails in the SVG export at the root level, but upon opening are filled in with all shading lost. 
I am working in CC with all apps updated, on an iMac, High Sierra, 10.13.3, 3.4 GHz, Intel Core i7. 
Sincerely appreciate any suggestions! Thanks!

TOPICS
Bug, Import and export

Views

372

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 23, 2020 1
Adobe Community Professional ,
Jun 24, 2020

Copy link to clipboard

Copied

You created a blend with some hundred steps and exported that to SVG?

The file gets very complex then with an obscene amount of paths, which might just be too much for the SVG.

 

On top of that: SVG is a delivery file format. It should never be your working file format. As long as you're still working on a file, save as AI. Only then you save a native file and all your objects are still editable. e.g. the blend.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Explorer ,
Jun 24, 2020

Copy link to clipboard

Copied

Monika,

Thanks for your response. I created a blend to match some of the vector assets we're using from Adobe Stock.  
I'm sorry if I was not clear. The native file is definitely a ".ai" file that I'm exporting the components from using Illustrator's export window. I tested this earlier in development to ensure the blends would export directly from Illustrator as SVGs and didn't have a problem. But they were not inside of a clipping path which is a "cog" shape. 

Those assets I've been using have been very problematic in XD and Zeplin, largely due to blends and meshes. Are you saying that anything from Adobe Stock that uses blends with "some hundred steps" should not be exported as an SVG due to complexities? That would mean any of those Adobe Stock assets aren't compatible in XD to Zelpin. I'm super confused by this. 

I'm in touch with Zeplin team to see if they can help. Any other suggestions to solve the SVG export issue are much appreciated.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Adobe Community Professional ,
Jun 24, 2020

Copy link to clipboard

Copied

Meshes will be converted to pixels anyway when exporting an SVG. SVG doesn't support them. Blends will be expanded to hundreds of paths (whatever number of steps you set up). For using them in apps or on the web that will be counterproductive anyway.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Explorer ,
Jun 24, 2020

Copy link to clipboard

Copied

Thanks Monica, for the fast response.

So the long shadow effects that I've done tutorials on with Dansky and others to create these effects in Illustrator are NOT compatible in XD and on the web due to the complexities of the blend layers?

 

Can you confirm?

 

If this is correct, it means that a sizable portion of Adobe Stock images I've been downloading and placing into my XD document are not capatible with the web. How is Adobe addressing this?

My only alternative this far into the web design is to create a hand-drawn shadow with simple gradient. Not as nice and much more time-intensive for the 40 icons to develop, but at least I'll know the limitations of building shadows in Adobe Illustrator to Adobe XD for Web. 

 

I'll ask Zeplin if they have other users experiencing this issue. Long shadows using blends are everywhere so I can't be the only one. 

Appreciate your help with this. It's a blocker for me in moving onto my next ticket.

Many thanks,

Melanie

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Explorer ,
Jun 24, 2020

Copy link to clipboard

Copied

Monica,

I found another user experiencing similar issues and Adobe support led me to this page which answers one of my questions. 
https://community.adobe.com/t5/adobe-xd/import-amp-export-adobe-xd-doesn-t-parse-svg-path-correctly/...

Adobe XD does not support Blends. 

My 2nd question is does Illustrator support SVG exports from native .ai files for blends? 

If not, then the Dansky tutorials and Adobe Stock images I'm using are not compatible with XD. Correct? 

Looking for a definitive answer so I can go left or right with troubleshooting: 
- keep attempting to work with existing design)
- build a single gradient "long shadow" without the blends).

Thanks!
Melanie
https://community.adobe.com/t5/adobe-xd/import-amp-export-adobe-xd-doesn-t-parse-svg-path-correctly/...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Adobe Community Professional ,
Jun 24, 2020

Copy link to clipboard

Copied

There are other solutions for creating long shadows:

such as the plugin opo or the plugin Stylism. Both work like a charm.

I have a native Illutrator technique outlined here: https://www.vektorgarten.de/long-shadows-with-illustrator.html

 

The trouble is not the blend as such. As mentioned, it gets expanded to single paths anyway. The problem is the sheer number of objects that bloat your file and make things unnecessary complex. Other possiblity would be to convert the blend to pixels (or the complete illustration, button or symbol or whatever it is). Then you would have a raster image embedded into your SVG.

 

There might be additional issues with SVG import routines, which might need to be addressed, but they are independent from the problem with blends.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 2
Explorer ,
Jun 24, 2020

Copy link to clipboard

Copied

Monika,

 

Thanks for the tip. I had already determined that the number of layers was the issue and bloating the file. The lead developer agreed.

 

So I rebuilt the long shadows with 3 different gradient layers to "matche" the blend results as best I could. It's pretty close except that the cog clipping path was adding complexity. My exports to SVG from within Illustrator were not reading. So I hand drew the clip portion of each of the 3 shadows and then tried exporting again. It works except the multiply filter doesn't match the results overlaying the gradient. I think that's a part of the problem too. I have (1) underlying color gradient of the cog; (2) overlay of larger shadow with lighter gradient/multiply/10%; (3) overlay of a smaller higher gradient shadow overlaying the larger one and the cog gradient; (4) overlay of a 3rd lower smaller gradient overlaying the larger one (not near the 3 layer). The results are OK. But when I import this into XD and then download the SVG from Zeplin, the white highlight layer is filled in with black. Are stacked gradients too complex for SVG export? 

 

This is a similar problem I was having with an XD built "soft UI" effect using a technique by Dansky. Zeplin figured out that workaround but now it's back wtih the above mentioned cog layers. Is this too detailed? I've spent at least 8 hrs troubleshooting and in trouble with the deadline now! sigh... 

 

My next step is to remove the layers and have only one simple gradient long shadow but it's a compromise since it's missing the nice depth that the original blended shadows had.

 

Adobe stock might consider distinguishing SVG compatible artwork from their standard vectors. Will look around to see if stock houses are doing this elsewhere. I need more usable vectors to download so I'm not starting from scratch with every icon illustration. I imagine I'm not alone with this issue?

 

In communication with Zeplin since I currently can't provide the assets to the dev teamp through the app due to these vector problems with Adobe Illustrator svg. Having to resort to Dropbox links via Zepling/Slack. 

 

Thanks for your help and patience with my lengthy corresondence! I'll let you know if I solve this... 

Melanie

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Adobe Community Professional ,
Jun 24, 2020

Copy link to clipboard

Copied

SVG can do a lot of stuff and browsers also support this. You can build pretty complex stuff with it, just take a look of some of the SVG effects experiments that Sara Soueidan is doing. She also has a lot of teaching and written articles online for free. You can spend weeks learning about SVG just watching her stuff.

 

But of course when you load this into apps then their SVG import filters do not always (or maybe even rarely match what browsers can do. Also I wouldn't be sure if Illustrator can export stuff in a manner that is ideal. BTW: do you export for screen or Save as? Export for screen produces the most modern code.

 

When there is trouble with Illustrator's SVG (either export or import), please use http://illustrator.uservoice.com to get in contact with the developers. They are working on SVG.

 

And it helps to check your files in Inkscape. SVG is its native file format, so it can work with it best. Also check your files in the validator to make sure it's correct.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 1
Explorer ,
Jun 25, 2020

Copy link to clipboard

Copied

Monica,
I'm watching the tutorials (2 so far). So far most of what I've seen addresses SVG at the code level. I don't code since my background is in print and illustration. Not my skill set. But I did try a few things that didn't work. 🙂 Sara is very energetic and full of knowledge. Really good speaker. 

 

I've rebuilt the files removing the blends, abandoning having multiple layers of black gradient overlays for the shadow effect, and not just using a simple black-white gradient with a multiply filter at 15% over the underlying color gradient to simplify the file. 
I'm exporting from Illustrator, which I use the export panel to do (not save-as), and the images looks good when I open the .ai exported SVG from Illustrator. (There are additional layers at the top level inside the SVG file.)

When I import the SVG into XD and export to Zeplin, it looks good there too in the app preview. However, when I download the SVG from Zeplin, the SVG has a black fill in area. Nothing I've tried works.
The dev team is going to look at the code tonight. I'll continue to research. Open to ideas on the black fill area that may not be "parsing correctly" according to one site I read up on. 

Thank you again, for the great suggestions. I shared with the dev team and am sure this will help us all as we build the site out. 
Melanie

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2020 0
Adobe Community Professional ,
Jun 25, 2020

Copy link to clipboard

Copied

You're welcome!

Would be interested in any feedback you can share about the Zeplin export (once they figured it out). Thanks a lot.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2020 0
Explorer ,
Jul 17, 2020

Copy link to clipboard

Copied

Will do. I have some feed back from them this week and will share over the weekend.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 17, 2020 1