3

I have an SVG with a filter tag that several elements are using. How do I get Sketch to recognize it?

This is a simpler SVG, but it conveys my point:

<svg width="230" height="120">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>

(example comes from MDN article on <filter>)

When viewed in a browser, this looks like this:

correct

But what Sketch gives me is this:

sketch-app

How do I get Sketch to include the filter? Or if it's impossible, is there a workaround where I can apply the filter?

Improve this question
6
  • My filter was basically adding a shadow, so the workaround I used was to manually add a shadow to each element in Sketch. I'm hoping there's a better answer.
    – Nathan Hinchey
    Commented Oct 17, 2017 at 19:57
  • I don't think Sketch understands SVG filters. Adobe Illustrator should be able to do this.
    – AAGD
    Commented Oct 18, 2017 at 8:24
  • Have you tried using Inkscape(dot)org? It's free, and Open Source, and it displays that filter properly.
    – Billy Kerr
    Commented Oct 18, 2017 at 13:14
  • 1
    @AAGD The ridiculous this is that Sketch generates SVG filters, but doesn't understand them when they're imported.
    – Nathan Hinchey
    Commented Oct 20, 2017 at 15:32
  • @BillyKerr I like Inkscape (although it seems to misbehave on my Mac), but my boss is using Sketch, soooooooo ¯\_(ツ)_/¯
    – Nathan Hinchey
    Commented Oct 20, 2017 at 15:36

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.