Skip to main content
J
JDECook
Participant
July 28, 2020
Answered

Issues with gradients going from .AI to .SVG

  • July 28, 2020
  • 3 replies
  • 17986 views

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

 

Correct answer marliton

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

3 replies

robertw73832157
robertw73832157
Participant
September 21, 2020

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

    marliton
    Community Expert
    marlitonCommunity ExpertCorrect answer
    Community Expert
    July 28, 2020

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

    Marlon Ceballos
      M
      Mega5FBF
      Participant
      February 17, 2021

      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.

      Monika Gause
      Community Expert
      Monika GauseCommunity Expert
      Community Expert
      July 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?

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices