feMorphology en SVG: añade un contorno sin trazados nuevos

Para añadir un contorno a toda la silueta de un SVG multicolor, dilata su SourceAlpha, elimina el alfa original de ese resultado mayor, colorea el anillo restante y combina encima el gráfico original. El filtro cambia el aspecto renderizado mientras los datos originales de trazados permanecen intactos.

Utiliza operator="erode" cuando quieras una silueta alfa más pequeña. Ninguna operación crea un trazado de desplazamiento editable. Los huecos, los espacios estrechos y las esquinas pronunciadas necesitan una comprobación visual porque la morfología utiliza una vecindad rectangular en lugar de un desplazamiento circular de trazo.

Empieza por la silueta, no por los canales de color

La especificación Filter Effects del W3C define la dilatación como el máximo por componente dentro de una vecindad rectangular y la erosión como el mínimo. Con SourceAlpha, la entrada es el canal alfa del gráfico. Eso permite obtener una silueta sin expandir por separado los canales de color verde azulado y coral.

Este ejemplo aplica el filtro a todo el gráfico de dos trazados. Su hueco cuadrado transparente forma parte de la silueta alfa. El detalle coral ya está dentro de un área verde azulada opaca, así que no crea un límite exterior separado.

Creamos el SVG a mano y abrimos cinco variantes independientes en un navegador. Cada archivo conserva las mismas dos definiciones originales de trazados. La comparación siguiente muestra el renderizado real de esos archivos, sin gráficos vectorizados ni vistas previas de efectos generadas.

Con radio 10, el contorno crece fuera de la silueta visible y hacia el hueco. Con 22, el dorado rellena la abertura cuadrada de este ejemplo. La versión 18 4 crece más horizontalmente que verticalmente. La erosión reduce el área exterior opaca y amplía la abertura transparente; también cambia la punta inferior.

Estas observaciones corresponden a este gráfico y estos ajustes. No son una regla general de radio seguro para otros logotipos o iconos.

Construye el anillo alfa exterior

Guarda este ejemplo completo como outline.svg y ábrelo en un navegador. Es el SVG exacto de radio 10 utilizado en la captura:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

El filtro tiene cuatro pasos:

1. feMorphology dilata SourceAlpha en grown.
2. feComposite conserva grown fuera del alfa original y produce ring.
3. feFlood aporta un color dorado; otra composición restringe ese color al anillo.
4. feMerge coloca el SourceGraphic original encima del anillo de color.

El orden de entradas importa en la resta. La sección de composición de la especificación asigna in como fuente e in2 como destino. Aquí in="grown", in2="SourceAlpha" y operator="out" eliminan el área opaca original del alfa expandido. Invertir esas entradas no produce este anillo exterior.

La palabra fuera significa fuera de la región alfa opaca, incluido el espacio dentro de un hueco transparente. Si un contorno debe evitar las aberturas interiores, este filtro no proporciona esa distinción automáticamente. Necesitas una silueta independiente u otra construcción que defina el exterior previsto.

Los colores de origen siguen visibles porque combinamos al final el SourceGraphic sin modificar. Esto es distinto de un trazo ordinario de trazado. Para trazos centrados, recortados al interior o enmascarados al exterior, consulta la alineación de trazos SVG; el orden de pintado explica el caso más sencillo de capas de trazo y relleno.

Erosiona el alfa y conserva los colores que sobrevivan

Sustituye el filtro de contorno por esta definición y cambia el use final a filter="url(#erode)":

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Esta composición conserva el gráfico original solo donde permanece el alfa erosionado. No vuelve a combinar encima todo el original, porque ocultaría el adelgazamiento previsto. En este ejemplo el área exterior verde azulada se vuelve menor, mientras que la región coral se conserva en su interior.

Especifica explícitamente el operador en los ejemplos de trabajo. La referencia de operator distingue erode y dilate en feMorphology de in y out en feComposite. El mismo nombre de atributo realiza funciones distintas en ambos elementos. El operador predeterminado de morfología es erode, así que omitirlo es una forma fácil de obtener el efecto contrario a la dilatación prevista.

Distingue las unidades del radio de la región del filtro

La referencia de radius acepta uno o dos números. Uno se aplica a ambos ejes; con dos, el primero es el radio x y el segundo el radio y. Para los dos estados adicionales de contorno, cambia solo radius="10" por radius="22" o radius="18 4" en el ejemplo completo.

Son radios en el sistema de coordenadas seleccionado por primitiveUnits, no una promesa de borde fijo en píxeles CSS a cualquier tamaño. Utilizamos explícitamente primitiveUnits="userSpaceOnUse" con un viewBox 0 0 300 220. Cambiar el tamaño visible del SVG escala el aspecto junto con el gráfico.

Dos atributos de nombres similares controlan cosas distintas:

La referencia de primitiveUnits de MDN documenta el sistema de coordenadas de las primitivas. Su referencia de filterUnits documenta por separado la región exterior. filterUnits tiene como valor predeterminado objectBoundingBox; primitiveUnits, userSpaceOnUse. Definir ambos explícitamente facilita revisar la muestra.

La fuente ocupa de x=50 a 250 y de y=60 a 195. El mayor radio de ejes iguales probado es 22, y la región de filtro y área de visualización de 300 por 220 dejan espacio para ese resultado. Vuelve a comprobar ambos límites al cambiar el gráfico o el radio. La especificación describe la región de filtro como un recorte estricto: un radio mayor no puede pintar más allá de esa región. La guía de recorte de filtros y área de visualización SVG demuestra esos dos límites independientes.

Si el filtro parece inactivo, revisa también radius. Su valor predeterminado es 0 y la referencia indica que un valor negativo o cero desactiva el efecto de la primitiva. Los ejemplos anteriores utilizan valores positivos explícitos en ambos ejes.

Revisa huecos y esquinas antes de entregar

La vecindad rectangular de la morfología hace que su aspecto sea distinto de un contorno redondeado convencional. Radios x e y iguales no convierten esa vecindad en un círculo. La punta inferior escalonada de la comparación es un lugar útil para revisar la diferencia.

Comprobamos que los cinco archivos siguen conteniendo dos trazados de origen con atributos d idénticos. Sus definiciones de filtro difieren; su geometría de origen no. Revisa los objetos SVG reales cuando el destino necesite trazados que puedas editar, desplazar o enviar a producción. Utiliza una operación geométrica del editor para ese requisito y revisa después los contornos resultantes. Cambiar o eliminar únicamente este filtro no los proporciona.

Conserva un maestro sin filtro y una copia de entrega independiente. Abre el archivo entregado en su destino real y compara esquinas, aberturas interiores, colores y límites. Este ejemplo de navegador no demuestra compatibilidad en una aplicación de diseño, exportador o cortadora concretos.

Prepara la fuente antes de añadir el efecto

PerfectVector puede ayudar cuando el gráfico inicial solo existe como PNG o JPG. Prepara un SVG candidato y después revisa la silueta de origen recuperada, los huecos pequeños y los límites de color antes de aplicar el filtro. Un contorno de morfología amplificará los problemas de esa silueta en lugar de reparar por ti la geometría prevista.

Utiliza directamente un maestro vectorial disponible. Para un símbolo sencillo, un redibujado manual puede ser más fácil de controlar. Vectorizar una imagen aplanada con un contorno incorporado no recupera los ajustes originales del filtro ni determina qué parte era la forma sin filtro. La descripción general de vectorización de imágenes explica ese límite de reconstrucción.

Preguntas frecuentes

¿Crea feMorphology un trazado de contorno editable? No. Cambia el resultado renderizado del filtro. Este ejemplo conserva los mismos dos trazados de origen, así que un destino que necesite un contorno independiente requiere una operación geométrica y una comprobación de importación.

¿Por qué el contorno dorado rellena el hueco de mi SVG? El anillo crece fuera del alfa opaco, incluidas las aberturas transparentes. En este ejemplo, el radio 22 rellena el hueco cuadrado. Otros gráficos necesitan su propia comprobación de huecos y radio.

¿Por qué utilizar SourceAlpha en lugar de SourceGraphic? SourceAlpha permite que el filtro opere sobre la silueta sin dilatar cada canal original de color. El ejemplo colorea ese anillo alfa por separado y combina SourceGraphic al final para mostrar los colores originales.

Fuentes

1. W3C — Filter Effects de nivel 1 — Define la vecindad rectangular de la morfología, las entradas de composición y el recorte de la región de filtro.
2. MDN — radius — Define la sintaxis de radio de uno y dos valores, las unidades y los valores que desactivan el efecto.
3. MDN — operator — Distingue las operaciones de morfología de las de composición.
4. MDN — primitiveUnits — Establece el sistema de coordenadas del radio de morfología.
5. MDN — filterUnits — Establece el sistema de coordenadas de la región exterior de filtro.

Si tu original solo existe como imagen ráster, prepara gráficos vectoriales con PerfectVector, verifica la silueta y las aberturas sin filtro, añade después el contorno y compara el archivo final en su visor receptor.