Issues with gradients going from .AI to .SVG

[JDECook]

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

[Monika Gause · Accepted solution]

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?

[marliton · Accepted solution]

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

[Mega5FBF]

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.

[emolen]

Boooooo, we want to code with it in the browser, booooo, adobe boooo. 

[Monika Gause]

---

@emolen  schrieb:

Boooooo, we want to code with it in the browser, booooo, adobe boooo. 

---

And what's your problem?

WHat kind of gradient is it?

The SVG file format does not support all the gradient types you can create in Illustrator

[robertw73832157]

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