Dilate and erode SVG shapes using Javascript

Question

EDIT:

I finally found a way to erode and dilate polygons (offsetting) so that new geometry is created using Clipper library: https://sourceforge.net/projects/jsclipp

Answer 1

You can sort of get what you seem to be after by stroking with different stroke-widths in combination with clip-path or mask. Here's an example, some explanations of how it's constructed see here and here (arrow up or down to see some other slides on that example).

It doesn't give you new geometry though, just something that might look like new geometry.

Answer 2

Have you actually tested SVG's native filters? This looks close enough:

<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <filter id="erode">
      <feMorphology operator="erode" in="SourceGraphic" radius="12" />
    </filter>
    <filter id="dilate">
      <feMorphology operator="dilate" in="SourceGraphic" radius="8" />
    </filter>
      <path id="original_path" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
    c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
    c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
    c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
    c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
    c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"/>
  </defs>
  <use xlink:href="#original_path" fill="#f00" filter="url(#dilate)"></use>    
  <use xlink:href="#original_path" fill="blue"></use>
  <use xlink:href="#original_path" fill="#1CFF00" filter="url(#erode)"></use>    
</svg>

There is some clipping going on the dilate filter that can't seem to be resolved by increasing the filter region, but other than that it's pretty close to your illustrator rendering. Sure beats rendering server-side.

http://jsfiddle.net/5Qv5v/