Gradient problems when going from .ai to .svg with the new Illustrator 28.4.1 before it was fine

[Jorge28769887sk3f]

I make graphics in Illustrator and export them to .svg in order to make them work in a specific game engine, since the new update 28.4.1 all the radial gradient won't keep their center an won't render like it should when get exported to svg, I've never have problems before for years until this update (image attached), any clues on why this is happening?
P.D. Please don't coment that svg is not the best format for gradients, we all know that 😉

[Monika Gause]

That gradient looks like you are using a blend mode in addition to the gradient. Can you please be specific as to how that artwork has been built? SVG does not support all those blend modes and transparency stuff that Illustrator has.

[Jorge28769887sk3f]

No blend modes Monica just:
- One round shape in the background with a radial gradient of 2 colours one colour opacity 100% the other 0%
-On top of that a shape of "rays" with a radial gradient of 2 colours one colour opacity 100% the other 0%
- On top of that flat colours circles with different opacities 

I was used to export designs like these before this update with no problem

[Monika Gause]

---

@Jorge28769887sk3f  schrieb:

No blend modes Monica just:
- One round shape in the background with a radial gradient of 2 colours one colour opacity 100% the other 0%
-On top of that a shape of "rays" with a radial gradient of 2 colours one colour opacity 100% the other 0%
- On top of that flat colours circles with different opacities 

I was used to export designs like these before this update with no problem

---

I just set up a file that contained a radial gradient with transparency and a linear gradient with transparency and didn't have any issues exporting both Using Illustrator 28.4.1 on MacOS

[Jorge28769887sk3f]

And also once I open the svg back in illustrator my gradient has been modified adding many in between steps (image attached) it didn't have before, as the images attached in the thread the gradient is just one yellowish colour with 2 different opacities

[Monika Gause]

---

@Jorge28769887sk3f  schrieb:

And also once I open the svg back in illustrator my gradient has been modified adding many in between steps (image attached) it didn't have before, as the images attached in the thread the gradient is just one yellowish colour with 2 different opacities

---

Don't ever get yourself into a situation where you have to open your SVG again in Illustrator. Your workfile should always be an AI file. SVG is a one way street. Export it and be done with it.

[Jorge28769887sk3f]

I open thousends of svg's back in illustrator is part of my workflow never had a problem, I'm sorry but I don't agree with that, it should be something you should be able to do, We use this software and there is different ways to do it and it should be supported IMO 🙂

[Monika Gause]

---

@Jorge28769887sk3f  schrieb:

I open thousends of svg's back in illustrator is part of my workflow never had a problem, I'm sorry but I don't agree with that, it should be something you should be able to do, We use this software and there is different ways to do it and it should be supported IMO 🙂

---

SVG is not a native file format for Illustrator. So when you export an SVG you will already lose things (brushes, certain effects). When opening back, you will risk errors happening. Illustrator is famous for not being able to properly read its own SVGs.

I mean you can do as you please, but then you will just risk your work.

[Andy Swift]

This may not be your issue, but Illustrator 28.4 completely changed the format of SVG files exported throught scripting. I am submitting a bug report separately because it has completely broken my workflow.

The previous format looked like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
	.st0{clip-path:url(#SVGID_00000050657835777145769900000007173324349283303303_);}
	.st1{fill:#FF000D;}
	.st2{fill:#CA00D5;}
	.st3{fill:#2AEC00;}
	.st4{fill:#F0AB00;}
</style>
<g id="layer_2__x2F__extra_content">
	<g>
		<defs>
			<rect id="SVGID_1_" x="207.75" y="328.25" width="128" height="128"/>
		</defs>
		<clipPath id="SVGID_00000120556236775382720460000010520103355737100182_">
			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
		</clipPath>
		<g id="clipped_group" style="clip-path:url(#SVGID_00000120556236775382720460000010520103355737100182_);">
			<rect id="Rectangle_x5F_smaller" x="150" y="270.5" class="st1" width="128" height="128"/>
			<rect id="Rectangle_x5F_Grandé" x="193.5" y="367" class="st2" width="40" height="40"/>
		</g>
	</g>
</g>
<g id="layer_1_200_x25_">
	<g id="group_1__x3E__group_2">
		<rect x="37.5" y="33.5" class="st3" width="116.5" height="116.5"/>
		<rect x="106.25" y="102.25" class="st4" width="116.5" height="116.5"/>
	</g>
</g>
</svg>

And the new format looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 500 500">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clippath);
      }

      .cls-2 {
        fill: none;
      }

      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
        stroke-width: 0px;
      }

      .cls-3 {
        fill: #f0ab00;
      }

      .cls-4 {
        fill: #ff000d;
      }

      .cls-5 {
        fill: #2aec00;
      }

      .cls-6 {
        fill: #ca00d5;
      }
    </style>
    <clipPath id="clippath">
      <rect class="cls-2" x="207.75" y="328.25" width="128" height="128"/>
    </clipPath>
  </defs>
  <g id="layer_2_extra_content" data-name="layer 2 / extra content">
    <g class="cls-1">
      <g id="clipped_group" data-name="clipped group">
        <rect id="Rectangle_smaller" class="cls-4" x="150" y="270.5" width="128" height="128"/>
        <rect id="Rectangle_grandé" class="cls-6" x="193.5" y="367" width="40" height="40"/>
      </g>
    </g>
  </g>
  <g id="layer_1_200_" data-name="layer 1 200%">
    <g id="group_1_group_2" data-name="group 1 &amp;gt; group 2">
      <rect class="cls-5" x="37.5" y="33.5" width="116.5" height="116.5"/>
      <rect class="cls-3" x="106.25" y="102.25" width="116.5" height="116.5"/>
    </g>
  </g>
</svg>

You can immediately tell the difference because the previous style definitions began with "st" and the new style definitions begin with "cls-".

[Jorge28769887sk3f]

I believe this might have something to do also @Andy Swift 

[Andy Swift]

Can you post the first few lines of an older SVG and a new one? You can use the </> button in the text field to post code samples.

[Jorge28769887sk3f]

@Monika Gause any info about what @Andy Swift posted, The engine we're using process the svg to get certain visual output and any kind of change in the code I believe can affect that visual input.

[HaveMack]

I'm having the same issue with very simple radial gradients. I've tried rolling back to a few different 2023 versions and it's still causing the problem, so there's something bigger happening because I was able to export gradients fine last year. Seems the latest updates across the board for Creative Cloud have introduced only problems; there are issues with Photoshop and XD also (the latter is on maintenance mode so who knows if Adobe will ever fix XD.)

[Jorge28769887sk3f]

Yeah, something clearly has changed, but not clear answer from Adobe

[Doug A Roberts]

Can you share the SVG along with your export settings? I see a difference between 27.9 and 28.4.1, but nothing's off centre.

There seems to be an issue where transparency is defined twice, i.e.:

<stop offset=".638" stop-color="rgba(255, 0, 0, .351)" stop-opacity=".351"/>

First in the Alpha channel, then the opacity. This means transparent gradient stops in 28.4.1 will be more transparent than they should be. This doesn't occur in 27.9.

[Alex Gee aka Ras]

Hi, everyone!
I just found this topic. Had the same issue. I don't know how to fix it in code
BUT
I fixed it in figma, just copied?pasted in from Illustrator to Figma and fix all broken gradients manually.
Sorry if this isn't actual already and it's defenitely not the pro way I guess... but worked for me just perfect...
Best regards to all