1

When using an feDisplacementMap svg filter, my smooth svg lines are getting all jagged. I could probably render it large and then shrink it down, but isn't SVG supposed to be able to anti-alias?

2 Answers 2

1

Okay, so I figured out the answer to my own question: the filterRes attribute: http://www.w3.org/TR/SVG/filters.html#FilterElementFilterResAttribute

In my testing, on Chrome, increasing the filterRes slows things down pretty dramatically.

0
1

SVG filters process inputs at the pixel level, not the vector level. As far as an SVG filter is concerned, it's been handed a big rectangle of RGBA pixels to work with. Results from a displacement map can look pixelated because a filter has no idea where the edges that have been displaced are - it's all just pixels as far as it is concerned. (The old semi-transparent pixels that used to be the anti-aliasing have been displaced as well.) However, sometimes you can add another filter or two to solve any problem that this creates. Creative ways to solve this problem:

  1. Take the post-displacement graphic, blur it with a radius of a few pixels then blend the blur back into the original graphic.

  2. Take the post-displacement graphic, do a luminance to alpha conversion, then use that alpha map with a diffuse lighting effect to add a fake anti-alias lighting effect.

  3. Use a convolvematrix with edge detection values to extract edges from the graphic, blur that result and blend it back into the source graphic.

Depending on your graphic, you might be able to use an erode or dilate filter, but that tends to produce boxy highlights and might not work. And of course, you can always tweak your input in SVG (using stroke effects) to "pre-antialias" your source graphic so the result doesn't look so odd.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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