1

I have this image, which I'm exporting as SVG with the intention of animating it:

Typical Moet Drinker

In the version I'm exporting as SVG there's no background colour, that's just there so you can see it on this post. The SVG is entirely made of strokes in Illustrator, so I expected the SVG to be exported as strokes. Instead it's being exported as paths with fills.

At first I thought this might be because the strokes are variable widths, it was drawn with a pressure sensitive stylus. However, when I exported a simple circle shape with a uniform width stroke as SVG, this also came out as a path with a fill. Paths with fills can't be animated on the web.

Any ideas on how I can export this image with SVG strokes? I'm willing to export with another program if possible. Unfortunately After Effects can't handle this many shapes using the graphics card I have, or I would export with Lottie.

Improve this question
3
  • 2
    Not sure why everything you make exports as fills... But I'm fairly sure svg doesn't support variable width stroke. Never looked into it, but I'd be very surprised if it did.
    – Joonas
    Commented Oct 11, 2018 at 14:05
  • 2
    Variable width is an Adobe Illustrator feature, not an SVG. Then when you export it your variable stroke will be flattened as fills.
    – LeoNas
    Commented Oct 11, 2018 at 18:29
  • This is very late, but there is a solution to this that I found when facing a similar problem. The trick is to define a very large stroke width and force it to be entirely contained in the original shape using a clip-path. This allows you to simulate variable stroke-width insofar as web animations go.
    – Robin Aldabanx
    Commented May 7 at 21:28

2 Answers 2

Reset to default
1

If you're having major issues getting your stroke weights to export correctly - test solving the issue by expanding all your strokes so the strokes are now fills... should solve your issue.

I have just tested from both Illustrator and Affinity Designer - both export weight varied strokes without issue - so I am afraid I cannot confirm your issue; in both cases I used plain vanilla default SVG export options.

I think in order to help, we'll need more details.

enter image description here

Improve this answer
1
  • But I want my strokes to be strokes. Am I missing something?
    – Wilf
    Commented Oct 11, 2018 at 18:15
1

If you have a variable width stroke then any exporter has only 2 options:

  1. Expand the stroke to preserve the appearance, since SVG does not support variable width strokes. (it has been proposed but does not exist in any implementation know of)

  2. Don't care about how it looks, and ditch the variable width.

So you have those options. And nearly everybody wants option 1. Unless a option to preserve the strokes as changing. But since ot can not you have to contend to either 1 or 2. No you can not do this.

Improve this answer

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.