0

How to export svg from illustrator so that no extra gradient stops added,except added by me.

I am trying to export svg from illustrator, it adds extra gradient stops in exported svg. Say I have a square filled with radial gradient with 3 stops(including start and end). In exported svg it has 12 stops in the same radial gradient. What settings should I apply in illustrator, so that exported(saved) svg has optimal gradient information , and avoid illustrator adding extra stops?

0

There's a mistake in your gradient or in the way you export the svg. I reproduced in Illustrator exactly what you describe, a square with a radial gradient and three stops, and this is the result:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800">
<defs>
<style>.cls-1{fill:url(#radial-gradient);}</style>
<radialGradient id="radial-gradient" cx="147.5" cy="147.5" r="147.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fcee21"/>
<stop offset="0.5" stop-color="#f0f"/>
<stop offset="1" stop-color="#f15a24"/>
</radialGradient></defs>
<title>Asset 3</title>
<g id="Layer_1" data-name="Layer 1">
<rect class="cls-1" width="295" height="295"/></g></g></svg>

Codepen

In your other question you say you are working with an image downloaded from the internet. If you continue with the same image and don't know how it's done, I recommend you make a test with a vector made from scratch in a new file.

Edit after the comment

The reason why there are many stops is because the right part of the gradient has the gradient slider in a different position than the default one: 50%. This causes the svg to restructure the entire gradient:

enter image description here

Modifying the gradient to get a similar result without touching the gradient sliders gives a result with as many stops as colors the gradient has:

enter image description here

  • Hi, here is the file i am working with.Sample file . Also i tried 'select all' → 'copy everything' and paste in new document. It did not worked. Settings I used for save as svg settings – LaraFlow Oct 27 '19 at 7:00
  • Answer updated with more info – user120647 Oct 27 '19 at 9:31
  • There is something more, as I commented when I copy everything and paste it to new file, the outer black stop in the new file creates white shadow instead black. What may be the reason for this? – LaraFlow Oct 27 '19 at 9:52
  • You are pasting in a new CMYK document when it must be RGB. – user120647 Oct 27 '19 at 10:04
  • The whole problem was that, i could not figure out. Thanks. – LaraFlow Oct 27 '19 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.