filtros - Filtro SVG dilatar/erosionar frente a la ruta de desplazamiento de Illustrator
descargar filtros svg para illustrator (3)
A continuación se muestra una captura de pantalla de la imagen SVG que se representa en Chrome 22.0.1229.79 Mac. El svg original está en jsfiddle: http://jsfiddle.net/LGBk5/
La imagen de la izquierda se crea con los filtros SVG: s Dilate y Erode. El correcto se hace usando el efecto de ruta de desplazamiento de Illustrator.
El izquierdo tiene problemas: el borde en la parte inferior está distorsionado y las curvas no son tan suaves. Mientras tanto, el borde negro grueso es el mismo en ambos.
¿Alguno de los parámetros de mi SVG es incorrecto o los filtros de dilatación y erosión parecen tan defectuosos?
EDITAR: El propósito es hacer las rutas más delgadas o más gruesas en SVG, pero de acuerdo con este ejemplo, la erosión / dilatación no es lo suficientemente estable como para confiar.
Los efectos de filtro se realizan en datos de píxeles (la ruta rasterizada), mientras que la operación de desplazamiento de ruta en Illustrator (similar en Inkscape) se realiza utilizando los datos de ruta originales (o datos vectoriales si lo desea).
El primero es como usar filtros de Photoshop, este último está creando nuevas rutas usando la ruta existente. Ambos son estables, pero no son la misma operación.
El desplazamiento de ruta de Illustrator y los filtros SVG erode / dilate son operaciones diferentes.
Este filtro de erosión está funcionando como se diseñó, no hay errores aquí. Para cada píxel en la imagen de entrada, el filtro observa los valores RGBA máximos en un rectángulo a su alrededor (el radio). En una imagen normal, esto tiende a generar "reflejos rectangulares" por falta de un término mejor. Y resulta en artefactos extraños cuando se aplica a trazados de dibujo curvos. De la especificación:
El núcleo de dilatación (o erosión) es un rectángulo con un ancho de 2 * x-radius y una altura de 2 * y-radius. En la dilatación, el píxel de salida es el máximo individual de componentes de los valores R, G, B, A correspondientes en el rectángulo del núcleo de la imagen de entrada. En la erosión, el píxel de salida es el mínimo individual por componentes de los valores R, G, B, A correspondientes en el rectángulo del núcleo de la imagen de entrada.
Por lo tanto, imagine que ese único píxel en el extremo puntiagudo de su forma. Con un "radio" de 10 píxeles en su filtro (¡y recuerde que el radio es un término increíblemente engañoso porque está usando un rectángulo, no un círculo!). Digamos que está en 100.100, por razones de argumentos. Cuando el filtro procesa valores para píxeles en el rango 90,110 a 110,110, su radio de dilatación detectará ese píxel a 100,100 y pinta todos los píxeles en ese rango en negro. Y así, tu bonito extremo puntiagudo se ha dilatado en una línea recta.
Tenga en cuenta que puede lograr la mayoría de los efectos de ruta de desplazamiento utilizando trazos anidados (algunos de los cuales tienen máscaras para recortar el interior o el exterior de la ruta.
Por ejemplo, aquí está la ruta de OP reinsertado de esta manera:
<!-- Left drawing is made using erode and dilate -->
<!-- Right one is made by Illustrator''s Offset Path -->
<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="curve" d="M21.552,74.438c2.531-28.879,73.668-52.734,102.629-53.971
c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.236-59.594-109.5-29.5c-23.367,27.833,55.4,142.969,55.4,142.969
S18.109,113.708,21.552,74.438z"/>
<mask id="inner">
<use xlink:href="#curve" fill="white"/>
</mask>
</defs>
<!-- this black outermost line -->
<use x="10" y="10" xlink:href="#curve" style="stroke:black;stroke-width:26;stroke-linejoin:miter;stroke-miterlimit:10"></use>
<!-- thick red outer line -->
<use x="10" y="10" xlink:href="#curve" style="stroke:#f00;stroke-width:24;stroke-linejoin:miter;stroke-miterlimit:10"></use>
<!-- innermost black thin line, with green fill -->
<use x="10" y="10" xlink:href="#curve" style="fill:#1CFF00;stroke:black;stroke-width:32;stroke-linejoin:miter;stroke-miterlimit:10" mask="url(#inner)"></use>
<!-- blue inner stroke -->
<use x="10" y="10" xlink:href="#curve" style="fill:none;stroke:#5555FF;stroke-width:30;stroke-linejoin:miter;stroke-miterlimit:10" mask="url(#inner)"></use>
<!-- lastly, the black line -->
<use x="10" y="10" xlink:href="#curve" style="fill:none;stroke:black;stroke-width:10;stroke-linejoin:miter;stroke-miterlimit:10"></use>
<g transform="translate(210,10)">
<path fill="#FF0000" stroke="#231F20" d="M126.273,201.917c-1.188-0.766-29.407-19.044-57.679-42.532c-41.739-34.676-60.31-60.754-58.441-82.068
c1.575-17.974,18.042-34.105,48.943-47.945c21.673-9.707,48.782-16.997,65.925-17.729c1.023-0.043,2.057-0.065,3.096-0.065
c26.722,0,55.103,13.789,67.484,32.787c7.866,12.07,9.101,25.736,3.476,38.482c-8.697,19.704-20.608,29.697-35.403,29.702
c-0.002,0-0.007,0-0.01,0C144.382,112.551,127.62,95,111.407,78.028c-7.054-7.385-18.575-19.446-23.912-21.338
c-1.086,2.002-6.186,15.821,20.666,67.477c16.226,31.214,35.475,59.438,35.668,59.72l35.977,52.589L126.273,201.917z"/>
<path fill="#5555FF" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" d="M22.939,78.438
c2.531-28.879,73.668-52.734,102.629-53.971c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.237-59.594-109.5-29.5
c-23.366,27.833,55.401,142.969,55.401,142.969S19.497,117.709,22.939,78.438z"/>
<path fill="#00FF00" stroke="#231F20" d="M79.986,131.678C38.498,95.796,38.41,81.397,38.549,79.807c0.289-3.29,5.843-10.151,19.371-17.933
C57.676,78.899,64.972,101.816,79.986,131.678L79.986,131.678z M163.665,84.044c-7.09,0-22.461-16.091-31.646-25.706
c-5.867-6.143-11.433-11.969-16.966-16.846c4.324-0.776,8.128-1.238,11.184-1.368c0.621-0.027,1.249-0.04,1.88-0.04
c16.911,0,36.471,8.903,43.603,19.846c3.317,5.089,2.508,8.623,1.278,11.408C168.884,80.659,165.163,84.043,163.665,84.044
L163.665,84.044z"/>
</g>
</svg>