Saving SVGs with clip paths adds extra groups

[David24526970hc9e]

When an AI file containing a shape (test.ai) with an image fill is exported as SVG (test.svg), a SVG group is created containing the shape's path with clipped sub-groups, defined using <defs>, containing the image. All well and good, apart from the fact that the shape's path is duplicated -- once in a <defs> element for clipping, once as the actual <path> -- and I suspect there's scope for optimisation.

If the saved SVG (test.svg) is resaved (as test1.svg) the groups above are wrapped in extraneous <g> elements -- one before each nested <defs> element, resulting in three additional nested groups. If test1.svg is saved again (as test2.svg) another three group elements are added.

Ongoing saving and opening a SVG eventually results in AI warning "There are too many nested groups than allowed in Illustrator. The file may not open correctly." and the shape's image fill is lost.

[Anshul_Saini]

Hi @David24526970hc9e,

We are sorry for the trouble. This was a known issue that came with Ai 26.2.1 while exporting SVG containing images. But I am glad to inform you that we have tried to address the issue in v26.3.1, released recently. Let us know if that works. 

Regards,

Anshul Saini

[David24526970hc9e]

Hi Anshul,

Thanks for responding. Unfortunately the issue exists with AI 26.3.1,
this being the version I used in my testing. In fact I suspect the issue
predates AI 26.2.1 as we noticed image fills sometimes disappearing from
SVGs late last year -- this has now become more problematic for us,
hence my investigation as to why.


Best regards,
Dave

[Anshul_Saini]

Thanks for sharing the details. You are correct. This issue started happening after v26.1 was released. The current workaround is to downgrade the app to v26.0.3 or older. We are targeting a July release to fix the issue, but it is possible to get delayed.

I hope this info helps!

Regards,

Anshul Saini

[David24526970hc9e]

Hi Anshul,

I'm not sure how much testing you are doing, but v26.0.3 also has this bug. Hopefully it will be fixed in your July release; meanwhile we now have a Python script that removes the extraneous groups.

Regards,

Dave

[Anshul_Saini]

Hi @David24526970hc9e,

Glad to hear that you figured out a workaround. Would you mind confirming when this issue started happening and in which version of Illustrator? Also, did you try resetting preferences after downgrading to v26.0.3?

Also, this issue may be different from the one team is currently working on. There are multiple SVG bug fixes on which the team is working on currently. Would it be possible for you to share a screen recording demonstrating the issue, and I will share it with the engineering directly.

I will be looking forward to your response.

Thanks & Regards,

Anshul Saini

[David24526970hc9e]

Hi Anshul,

I don't know when this started happening, nor what version of AI. We noticed image fills were disappearing last year; I investigated why AI was reporting "too many nested groups" just this May and then alerted yourselves as to the reason; following your suggestion to use v26.0.3, I tested that version and found it also contained the bug.

To replicate the issue:

1. Open test.ai and save it as SVG, calling it `test.svg`.
2. Close the SVG.
3. Reopen the saved SVG.
4. Use "File/Save As" to save it again, calling it `test1.svg`.
5. Open both `test.svg` and `test1.svg` in a text editor and compare them.
   
   Best regards,

Dave

[Anshul_Saini]

Thanks, David, for sharing the reproducible steps. I see you are using the "save as" route to output the SVG file. Just want you to check one last thing.
Try the following methods to output the SVG files and share your observation with us:

1. File > Export As > With & Without Artboard
2. Assets Export > Select Artwork > Add by pressing + icon in Asset Export panel or drag it there > Export to SVG.
3. Export for screen > Artboards >  Export Artbaord

Looking forward to your response.

Regards,

Anshul Saini

[defaulttz5ld9symjzi]

Sorry Anshul, I have reported a bug in AI and clearly documented how to reproduce it. It is not up to me to investigate if the issue also occurs under different scenarios. This is a role for Adobe.

Thanks and regards,

Dave

[Anshul_Saini]

I understand that, @David24526970hc9e. I have already reported this to the concerned product team member. The steps I suggested above for you to check were more like other options to export SVG. I know you have created a python script that helps you remove the unwanted groups. But that's an additional step. However, if you try another export option from within Illustrator and it gives you the desired output, the extra steps will not be needed. It was not my intention for you to do the investigation on our behalf; I just wanted you to get better options and get your work done without doing any extra steps until this issue gets addressed.

Thanks & Regards,

Anshul Saini

[defaulttz5ld9symjzi]

Hi Anshul,

This issue is not to do with exporting illustrations as SVG. It is to do with opening SVG files for editing and then saving them.

Our workflow is to initially create an illustration in native AI format and, when it is subsequently complete, save it as SVG for use in downstream processing. Subsequent revisions are made (using Adobe Illustrator) to the SVG and saved using File/Save -- the original native AI document is discarded. Shapes with image fills have extraneous groups added each time the SVG is saved.

Regards,

Dave

[Anshul_Saini]

Thanks for sharing your workflow, @David24526970hc9e. I tested your workflow again, and the SVGs were similar when opened in notepad. Here is the Ai file, and please find attached the SVGs files below.

Were you getting the following error while opening SVGs with an image fill?

If yes, please reset the Illustrator preferences and see if you see any difference.

Also, I am unable to access your test file to check and verify it at my end. Please reshare the file with public access.

Looking forward to your response.

Regards,

Anshul Saini

[defaulttz5ld9symjzi]

Hi Anshul,

1. I also get "Clipping will be lost on roundtrip to Tiny". It is a known issue with AI opening SVGs containing clip paths (search your support forum for details!).
2. Your test SVGs do not contain clipped image fills, hence do not get additional SVG groups added when saved.
3. The issue is about saving SVGs containing clip paths. You should be able to verify it by opening my `test.svg` (from above), saving it as an SVG under a different name, and then visually comparing the text of the two SVG files.
4. My test file now has public access. This file is used to create the initial SVG but otherwise is not related to the issue.

Best regards, Dave.

[Anshul_Saini]

Thanks for clarifying, @defaulttz5ld9symjzi. I have all the required information and was able to replicate the issue with your SVG file. I saved it using "Save As," and the groups in the layer panel increased. I checked this issue is replicable in all the versions of Illustrator CC.

However, in Illustrator v20, released in 2016, SVG format was added in "export as," which addressed many issues that "Save As" had.

I know your workflow doesn't include "export as," but I would suggest you try that. I used "export as" on your "Test.SVG," and instead of adding extra groups, it deleted the 3 groups from it.

I couldn't test your original Test.Ai as "Allow Save to Creative Cloud" is disabled for this file.

I assume this file has only one group and if I save it using "export as," I will not get extra groups. But I understand "export as" might not be an option for you. So, I will be logging a bug with the Product team.

Thanks for your cooperation & time and for answering all my queries to understand the issue. I really appreciate it.

Regards,

Anshul Saini

[defaulttz5ld9symjzi]

Thank you Anshul for looking into this. Using "export as" is not an option for us, as my testing finds that amongst other things, "id" attributes are rewritten from those assigned in AI, and we use "id" for path annotatation. A quick search finds this issue, which indicates that this is a known issue.

Best regards,

Dave

[Anshul_Saini]

Thanks for your testing and details info @defaulttz5ld9symjzi. For the other issue, it is a known Mar '22 bug that will be targeted for a fix in next month's release, and the current workaround for this specific issue is rolling back to v26.0.3, as mentioned & confirmed by other users as well on UserVoice, community, and Adobe chat support.

Regards,

Anshul Saini

[David24526970hc9e]

Hi Anshul,

I've just retested with AI 26.5 and see that the problem (with extra SVG groups being added) still exists. When might we see a resolution of the issue?

Regards,

Dave

[Anshul_Saini]

Hi @David24526970hc9e,

Thanks for reaching out again. I checked the bug, and this issue has been addressed in v26.4.1

These similar UserVoices were under the fixed bug:
https://illustrator.uservoice.com/forums/601447-illustrator-desktop-bugs/suggestions/44937286-svg-ex...
https://illustrator.uservoice.com/forums/601447-illustrator-desktop-bugs/suggestions/44963893-svg-co...
https://illustrator.uservoice.com/forums/601447-illustrator-desktop-bugs/suggestions/44912200-error-...
 

Please confirm if this is happening in a new AI file or not (don't check using an older file). If it is happening in a new file, please share the file & reproducible steps on the UserVoice and let me know. I will forward it to the product team.

Regards,

Anshul Saini