Highlighted

Issues with gradients going from .AI to .SVG

New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

Hi there

 

I am just delving into how to work between .AI and saving/exporting to SVG

 

I have run into a strange issue, though. Everything looks great in my .AI file. But then I save as an SVG and all my gradients stop blending correctly.  See images for before and after. (the after is how the file looks if I open the SVG back up in Illustrator, Preview the file, or if I place the graphic into an InDesign document... actually looks even worse placed in InDesign but I won't hurt your eyes).

 

Additional context: I licensed a stock image and modified it. So I do wonder if it's 

 

What am I missing? Anyone run into a similar issue? 

 

Cheers Jennifer

 

Screen Shot 2020-07-28 at 9.18.21 AM.pngScreen Shot 2020-07-28 at 9.45.19 AM.png

Adobe Community Professional
Correct answer by marliton | Adobe Community Professional

Hi. SVG is not the best format for export images with gradients. I suggest you use another format like jpg or png.

Topics

Import and export

Views

32

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

Issues with gradients going from .AI to .SVG

New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

Hi there

 

I am just delving into how to work between .AI and saving/exporting to SVG

 

I have run into a strange issue, though. Everything looks great in my .AI file. But then I save as an SVG and all my gradients stop blending correctly.  See images for before and after. (the after is how the file looks if I open the SVG back up in Illustrator, Preview the file, or if I place the graphic into an InDesign document... actually looks even worse placed in InDesign but I won't hurt your eyes).

 

Additional context: I licensed a stock image and modified it. So I do wonder if it's 

 

What am I missing? Anyone run into a similar issue? 

 

Cheers Jennifer

 

Screen Shot 2020-07-28 at 9.18.21 AM.pngScreen Shot 2020-07-28 at 9.45.19 AM.png

Adobe Community Professional
Correct answer by marliton | Adobe Community Professional

Hi. SVG is not the best format for export images with gradients. I suggest you use another format like jpg or png.

Topics

Import and export

Views

33

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
Adobe Community Professional ,
Jul 28, 2020

Copy link to clipboard

Copied

Don't import an SVG back in Illustrator unless you absolutely don't have any other possiblity.

SVG is not a work file format. It's meant for presentation.

Does it work in the browser?

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...
Adobe Community Professional ,
Jul 28, 2020

Copy link to clipboard

Copied

Hi. SVG is not the best format for export images with gradients. I suggest you use another format like jpg or png.

Marlon Ceballos.

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...
New Here ,
Sep 21, 2020

Copy link to clipboard

Copied

If you want perfection export the gradient objects as solids and then use css within the svg to create the gradient. It can be a long process but the results are worth it

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