Issues with gradients going from .AI to .SVG

New Here ,
Jul 28, 2020 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

TOPICS
Import and export

Views

1.0K

Likes

translate

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

correct answers 2 Correct Answers

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

Translate
Adobe Community Professional , Jul 28, 2020 Jul 28, 2020
Hi. SVG is not the best format for export images with gradients. I suggest you use another format like jpg or png.

Likes

translate

Translate

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

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

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
New Here ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

Hola, tengo un problema al copiar un trazo de un archivo ai. a otro, no hice ninguna modificación y hasta el día anterior funcionaba con normalidad, por alguna razón me aparece este código:

<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="193.7px" height="193.7px" viewBox="0 0 193.7 193.7" style="enable-background:new 0 0 193.7 193.7;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#3FA9F5;}
.st1{fill:#061C4C;}
</style>
<defs>
</defs>
<path id="XMLID_18_" class="st0" d="M193.7,193.7v-15.6c0,0-18.4-22.9-58,1.1"/>
<path id="XMLID_17_" class="st1" d="M0,127.9c0,0,8.4,31.9,52.8,65.8H0V127.9z"/>
<path id="XMLID_16_" class="st0" d="M193.1,32.2c0,0-9.1-5.5-29.5-6.8L123.8,0.1l69.3,0L193.1,32.2z"/>
<path id="XMLID_15_" class="st1" d="M0,37.1c0,0,20.9,11.7,56.8-8.1c0,0,50.7-35.3,106.1-3.7l0.7,0c0,0-17.1-16.9-37.7-25.4L0,0
V37.1z"/>
</svg>

 

Porfavor espero que puedan ayudarme.

Likes

translate

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

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