Problem with SVG of logo design featuring gradient along stroke

Forum|Forum|10 months ago
May 26, 2025
3 replies
418 views

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.

D

DanGouldAuthor

Participant

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.

Monika Gause

Community Expert

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.

Monika Gause

Community Expert

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.

B

Bobby Henderson

Community Expert

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded