Search code examples
svgadobe-illustratorsvg-filters

SVG dilate/erode filter vs. Illustrator Offset Path

Below is a screen capture of SVG image which is rendered on Chrome 22.0.1229.79 Mac. The original svg is on jsfiddle: http://jsfiddle.net/LGBk5/

The left image is made using SVG:s dilate and erode filters. The right one is made using Illustrator's Offset Path effect.

The left one has problems: the border at the bottom is distorted and curves are not as smooth. Meanwhile the thick black border is the same in both.

Has my SVG some parameter wrong or are the dilate and erode filters so seemingly buggy?

EDIT: The purpose is to make paths thinner or thicker in SVG, but according to this example, the erode/dilate is not stable enough to rely.

Illustrator Offset Path vs. SVG erode and dilate filters

Solution

  • Filter effects are done on pixel data (the rasterized path), while the path offset operation in Illustrator (similar in Inkscape) is done using the original path data (or vector data if you wish).

    The former is like using photoshop filters, the latter is creating new paths by using the existing path. They're both stable, but they're not the same operation.