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, 2018 at 16:23

1 Answer 1


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 and acknowledge you have read our privacy policy.

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