• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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 😉

TOPICS
Bug , Draw and design , Import and export , Performance

Views

390

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
community guidelines
Adobe
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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




Votes

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
community guidelines
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied


@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

Votes

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
community guidelines
Community Beginner ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied


@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.

 

Votes

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
community guidelines
Community Beginner ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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 🙂

Votes

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
community guidelines
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied


@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.

Votes

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
community guidelines
Participant ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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-".

Votes

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
community guidelines
Community Beginner ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Participant ,
Apr 05, 2024 Apr 05, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Apr 05, 2024 Apr 05, 2024

Copy link to clipboard

Copied

@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.

Votes

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
community guidelines
Community Beginner ,
May 07, 2024 May 07, 2024

Copy link to clipboard

Copied

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.)

Votes

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
community guidelines
Community Beginner ,
May 08, 2024 May 08, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
May 08, 2024 May 08, 2024

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines