When exporting to svg from Illustrator, the code generates a "linear-gradient-" or "radial-gradient-" plus number. This seems to work until I export multiple files with different gradients. No matter how I name them in the Graphic Styles, Illustrator exports them and names the gradients chronological, restarting for each file. This means that when used on a website the gradients completely mess up because multiple are called the same e.g. "linear-gradient-2". Is there a way to export the svg's so that this naming convention isn't used? or do I have to fix the code manually?


<linearGradient id="linear-gradient-2" x1="662.49" y1="137.19" x2="796.91" y2="271.61" gradientTransform="matrix(1, 0, 0, -1, 0, 578)" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#ff7900"/>
  <stop offset="1" stop-color="#ffa300"/>
  <stop offset="1" stop-color="#f59c00"/>
  <stop offset="1" stop-color="#ce8201"/>
  <stop offset="1" stop-color="#b67102"/>
  <stop offset="1" stop-color="#ad6b02"/>


<linearGradient id="linear-gradient-2" x1="234.52" y1="892.3" x2="234.52" y2="1254" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#2d4847"/>
  <stop offset="1" stop-color="#294c4c"/>
  <stop offset="1" stop-color="#1c595b"/>
  <stop offset="1" stop-color="#066f73"/>
  <stop offset="1" stop-color="#00757a"/>
  • You could edit the XML of the exported svgs to give each gradient a unique ID.
    – Scott
    Oct 23 '18 at 16:23

No solution for the gradients, even making them on the same file and different artboard.

But following this answer:

adobe forum

Instead of making a gradient, try with blending, here is a Codepen sample.

enter image description here

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.