Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Problem with SVG of logo design featuring gradient along stroke

New Here ,
May 26, 2025 May 26, 2025

So I've created a logo for a client, and part of it needs to have a colour gradient along a curved stroke. When finalising the design, I've outlined the stroke as you should, but my problem is Illustrator creates a gradient mesh of the outined stroke with the colour gradient, and when this is exported as (i.e.) an SVG, it looks awful/pixellates as apparently Illustrator can't create vectors of gradient meshes, and instead embeds an image of it? Is there a workaround?
I suppose I could outline the stroke, and then turn it into a clipping mask the a gradient shape behind it, but it won't be exactly right as the gradient really needs to follow the path of the stroke which goes around a circle and along a straight line. 

TOPICS
Draw and design , How-to
244
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
May 26, 2025 May 26, 2025

Are you using a freeform gradient fill? The SVG format will support some basic gradient fills. I don't think it will support more advanced fills, such as freeform gradients or gradients on line strokes. The SVG format may also have limitations with gradients that are non-symmetrical, skewed, etc.

 

If the gradient fill is a standard type of gradient then the best approach would be to expand the line stroke into a regular closed loop path. I'm not sure if it's necessary to clip the gradient fill inside the path. It may be enough to simply apply the gradient fill to the expanded stroke shape.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 27, 2025 May 27, 2025

SVG does not support gradient meshes. 

 

In Inkscape you can do it, because Inkscape uses its own version of the SVG standard for its native files.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 28, 2025 May 28, 2025

Thanks for the help! In the end I almost recreated it just adding a gradient to the shape - not quite exacty the same but not far off. Seems strange they have a feature that means your shape can no longer be a vector when outlined, but i guess there's a reason it's not possible. Thanks again.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 28, 2025 May 28, 2025
LATEST

SVG is a standardized file format that doesn't belong to Adobe and is not a native file format of Illustrator. So it has to be expected that it doesn't support all or even any of Illustrator's object types.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines