Detección de bordes SVG: vista previa con feConvolveMatrix

La detección de bordes con feConvolveMatrix de SVG cambia los píxeles renderizados alrededor de los límites de color. Puede producir una vista previa de bordes a partir de un PNG dentro de un SVG, pero no crea contornos de trazado editables. Mantén clara esa diferencia cuando la siguiente tarea sea editar un logotipo, preparar arte lineal o crear diseños web.

Una primera prueba útil es una imagen pequeña en escala de grises con una forma conocida. Aplica un núcleo simétrico de bordes, conserva su alfa y compárala con el origen sin cambios. Después inspecciona los elementos SVG. Un límite que parece más nítido no demuestra que la imagen se haya convertido en geometría vectorial.

Empieza con una vista previa de bordes controlada

La referencia de feConvolveMatrix describe la convolución como un cálculo que incluye un píxel de entrada y sus vecinos. Este núcleo de 3 × 3 resta los ocho vecinos de ocho veces el centro:

-1 -1 -1
-1  8 -1
-1 -1 -1

Sus coeficientes suman cero. En un área uniforme, la respuesta es cero; en un cambio de brillo, puede ser positiva o negativa. Con bias="0", los resultados negativos se recortan al límite inferior de color. Por tanto, la vista previa no muestra por igual ambos lados de todos los límites.

El ejemplo usa divisor="1" explícito. La referencia de divisor documenta la normalización por ese valor y el valor predeterminado de 1 para un núcleo de suma cero. También establece color-interpolation-filters="sRGB" para que el ejemplo use valores de canal sRGB en lugar del procesamiento linearRGB predeterminado de la primitiva.

Guarda este archivo completo y autónomo como edge-preview.svg y ábrelo en un navegador. Su PNG incrustado es un rombo original de 48 × 48 en escala de grises sobre papel blanco opaco. El centro es blanco, no transparente.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

La definición del filtro solo surte efecto porque la imagen la referencia con filter="url(#effect)". La referencia de filtros SVG explica que la definición en sí no se dibuja. La región explícita cubre este origen de 48 × 48; otros diseños necesitan su propia comprobación de región.

Qué cambió en la prueba del navegador

Inspeccionamos seis muestras originales en Chrome a 48 y 192 píxeles CSS. Cinco archivos contienen una imagen PNG incrustada y ningún trazado. El sexto es una versión vectorial dibujada a mano de forma independiente. Es un control geométrico, no el resultado de aplicar el filtro ni de calcar el PNG.

Las muestras RGBA procedían de una lectura de Canvas de 48 × 48 de cada SVG renderizado. Las muestras mostradas se revisaron por separado en ambos tamaños. Son observaciones para este origen y navegador, no una garantía de compatibilidad ni de legibilidad. Ampliar la vista previa basada en ráster no recuperó un contorno más limpio.

Respuesta de píxeles y geometría editable

Recupera un resultado que desaparece sin borrar el papel

El valor predeterminado de preserveAlpha es false. Con ese ajuste, el núcleo también procesa el alfa. Nuestra entrada opaca tiene alfa 1 en todas partes, por lo que el núcleo de bordes de suma cero cancela su alfa uniforme junto con el color uniforme. El resultado desapareció en el archivo de prueba inspeccionado.

Establecer preserveAlpha="true" conserva el alfa de origen mientras procesa el color. La referencia de preserveAlpha documenta esa diferencia. En esta prueba restaura una vista previa de bordes opaca. También mantiene opacos el papel y el centro blanco, aunque su color filtrado se vuelva negro. Conservar el alfa no elimina un fondo ni encuentra huecos en un logotipo.

Si la vista previa es mayormente negra, compara primero un área uniforme conocida con un límite conocido. El negro puede ser una respuesta cero válida. Para inspeccionar cambios de brillo con signo alrededor de un tono medio, prueba bias="0.5"; la referencia de bias explica el desplazamiento añadido después de la división. Eso cambia el rango de visualización, no la geometría del SVG.

Revisa los bordes exteriores por separado del diseño

Mantén edgeMode="duplicate" para la comparación inicial. Extiende los valores de los píxeles del borde cuando las muestras vecinas quedan fuera de la entrada. none usa muestras RGBA de valor cero; wrap toma muestras del borde opuesto. Son reglas distintas en la referencia de edgeMode.

En nuestra tarjeta blanca opaca, cambiar solo duplicate por none produjo un marco brillante en el exterior de la tarjeta. Ese límite pertenece al rectángulo de la imagen, no al rombo. Compara el archivo sin filtro antes de tratar un marco como un contorno del diseño.

La especificación Filter Effects define el punto de referencia del núcleo y el comportamiento del muestreo. Aquí targetX="1" y targetY="1" centran el núcleo de 3 × 3. Esta plantilla no establece kernelUnitLength. No supongas que una muestra vecina siempre abarca una unidad de usuario SVG en todos los tamaños de visualización; inspecciona el renderizado que vas a entregar.

Usa el enfoque como control, no para recuperar desenfoque

Para conservar el diseño relleno mientras resaltas cambios locales, sustituye únicamente kernelMatrix por:

0 -1  0
-1 5 -1
0 -1  0

La suma es 1. Un valor de canal uniforme c devuelve 5c - 4c = c con divisor 1 y bias 0. En nuestro archivo de prueba, la muestra gris sólida se mantuvo en 64, mientras que los píxeles del límite cambiaron. Conserva preserveAlpha="true" y edgeMode="duplicate" para esta comparación.

El enfoque puede resaltar ruido y halos junto con los límites útiles. No recupera los detalles de origen perdidos antes de que la imagen llegara al filtro. Si una vista previa ampliada se ve mal, vuelve a la imagen original en lugar de tratar un núcleo más fuerte como sustituto de la resolución de origen.

Inspecciona el archivo antes de llamarlo calco vectorial

La plantilla publicada contiene un <image> cuyo href empieza por data:image/png. La referencia del elemento image describe los recursos ráster y SVG que puede mostrar este elemento. Aquí el tipo de medio identifica el ráster incrustado; el filtro de bordes deja ese elemento en su lugar.

Como comparación, el maestro creado de forma independiente usa este trazado compuesto sobre un rectángulo blanco:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

Esas coordenadas se escribieron por separado. No se recuperaron de la imagen filtrada, y el dibujo en píxeles y el control geométrico no tienen por qué coincidir en todas las muestras del límite. La guía de inspección de ráster incrustado explica cómo revisar un SVG mixto sin depender solo del zoom.

Para diseños web, conserva el maestro SVG sin filtro y usa una copia de visualización filtrada cuando el efecto beneficie al diseño. Para trazados de edición o producción, inspecciona los contornos de origen reales y la abertura interior. La guía de arte lineal a SVG cubre esa tarea geométrica.

PerfectVector encaja cuando tu diseño inicial es un PNG o JPG plano y necesitas formas de origen editables. Convierte la imagen original a SVG, inspecciona el contorno y la abertura interior, y conserva el resultado limpio como maestro. Una vista previa de bordes correcta no sustituye esa comprobación. La guía de vectorización explica la diferencia entre reconstruir trazados y aplicar un efecto de imagen.

Preguntas frecuentes

¿La detección de bordes SVG con feConvolveMatrix crea trazados vectoriales? No. Calcula un efecto sobre los píxeles renderizados. El PNG incrustado en este ejemplo sigue siendo un elemento de imagen; los contornos editables requieren geometría dibujada o calcada por separado.

¿Por qué mi filtro de bordes hace desaparecer el diseño? Revisa preserveAlpha. Su valor predeterminado false también filtra el alfa. En este archivo de prueba opaco, el núcleo de suma cero hizo transparente el resultado inspeccionado. Conservar el alfa restauró una vista previa opaca.

¿preserveAlpha elimina el fondo blanco? No. Conserva el alfa de origen. Un fondo blanco opaco sigue siendo opaco aunque su color filtrado se vuelva negro. Eliminar el fondo y reconstruir trazados son tareas separadas.

¿Por qué un filtro de bordes dibuja un marco alrededor de la imagen? Revisa edgeMode y el rectángulo de entrada. Usar muestras de valor cero fuera de nuestra tarjeta blanca opaca creó un borde exterior brillante. El tratamiento duplicate de los bordes evitó ese marco en este archivo de prueba.

Fuentes

1. MDN: feConvolveMatrix — Convolución con píxeles vecinos y procesamiento de color predeterminado.
2. MDN: divisor — Normalización y valor predeterminado para suma cero.
3. MDN: filter — Definición y aplicación de un efecto de filtro.
4. MDN: preserveAlpha — Procesamiento solo del color o que incluye alfa.
5. MDN: bias — Desplazamiento de la respuesta tras la división.
6. MDN: edgeMode — Tratamientos de borde por duplicación, repetición y valor cero.
7. W3C: Filter Effects, feConvolveMatrix — Reglas de punto de referencia y muestreo.
8. MDN: image — Contenido de imagen ráster y SVG referenciado.