Umbral alfa en SVG: convierte la transparencia en un corte abrupto

Para un umbral alfa de 0.5, usa feComponentTransfer con <feFuncA type="discrete" tableValues="0 1"/>. Los valores alfa de entrada inferiores a 0.5 se vuelven transparentes; los valores iguales o superiores se vuelven opacos. Omite las funciones RGB si quieres que sus correspondencias de transferencia sigan siendo la identidad.

Ese filtro cambia el alfa renderizado, no la estructura subyacente de la ilustración. No puede eliminar un fondo blanco opaco, porque los píxeles blancos con alfa 1 superan el mismo umbral que los píxeles de color opacos. Un PNG incrustado en el SVG también sigue siendo una imagen rasterizada.

Compara píxeles de origen conocidos antes de elegir un umbral

Creamos un pequeño PNG RGBA de 8 bits con un cambio gradual de alfa, un hueco cuadrado transparente, una zona blanca opaca y seis muestras controladas. Cada SVG de esta prueba incrusta los mismos bytes PNG en un único elemento de imagen. Las variantes sin filtro, discrete y table interpolada solo difieren en la configuración de sus filtros.

El patrón de tablero que aparece debajo pertenece a la página circundante, fuera del SVG. Permite ver la transparencia, en lugar de simular que forma parte del canal alfa de la imagen.

Nuestra página cargó las variantes SVG reales, las dibujó en un lienzo del navegador y tomó muestras del interior de las seis muestras de color. Los bytes alfa de salida fueron:

Los valores alfa normalizados son estos bytes divididos por 255. Así, 127/255 está ligeramente por debajo de 0.5, mientras que 128/255 está ligeramente por encima. Estas muestras quedan a ambos lados del umbral matemático; un byte PNG de 8 bits no representa exactamente 0.5.

El hueco del original dio un alfa de 0 en todas las versiones. La zona blanca dio 255 en todas las versiones. Son observaciones de este archivo de prueba controlado, no una afirmación de que cualquier ilustración vaya a conservar todos los detalles deseados después de aplicar el umbral.

Aplica la transferencia al alfa

El filtro esencial es breve:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Aplícalo a la imagen con filter="url(#alpha)". La región del filtro de este ejemplo cubre todo su original y su ventana gráfica de 320 por 240. Usa límites adecuados para tu propia ilustración en lugar de copiar esas dimensiones en un archivo que no tenga relación.

La referencia de feFuncA de MDN lo identifica como la función de transferencia alfa dentro de feComponentTransfer. La referencia de transferencia de componentes describe la reasignación por canal y los cálculos sobre valores de color no premultiplicados.

La especificación actual de Filter Effects asigna una correspondencia de identidad a las funciones de canal no especificadas. Nuestro código omite feFuncR, feFuncG y feFuncB; solo cambia la función de transferencia alfa. Eso no significa que los colores visibles sobre un fondo se vean idénticos: cambiar el alfa cambia su apariencia al componerse.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

El ejemplo completo conserva los bytes PNG. El filtro no cambia los colores del archivo de origen almacenado ni lo sustituye por trazados. El diagnóstico de imágenes rasterizadas incrustadas explica por qué la extensión externa .svg no demuestra que exista geometría vectorial.

Distingue un escalón de una tabla interpolada

Ambos tipos de transferencia usan tableValues, pero interpretan sus entradas de forma distinta. La referencia de type enumera las funciones de transferencia disponibles; la referencia de tableValues describe la lista de consulta.

En discrete, cada entrada ocupa un intervalo de entrada del mismo tamaño. Con las dos entradas 0 1, el primer intervalo es 0 ≤ A < 0.5 y el segundo es 0.5 ≤ A ≤ 1. La salida salta entre los dos valores.

En table, las entradas son los extremos de regiones de interpolación lineal. Con 0 1, la interpolación devuelve cada alfa de entrada a sí mismo. Es una transferencia de identidad, por eso nuestra columna table muestreada coincide con la columna sin filtro.

Las fórmulas de intervalos de la especificación también explican estas alternativas documentadas:

Nuestra captura prueba los casos discrete y table de dos entradas. Las filas de cuatro entradas describen las correspondencias de la especificación; no son variantes adicionales de la ilustración que hayamos medido. Elige type deliberadamente en lugar de suponer que una lista con solo ceros y unos tiene que producir un umbral binario.

Distingue el alfa de entrada de la opacidad posterior

Proporciona al filtro el alfa real del original. En nuestro ejemplo, ese alfa está almacenado en los píxeles PNG. Para una prueba vectorial, usa el alfa de un relleno o fill-opacity antes de aplicar el filtro.

El modelo de composición de Filter Effects aplica los filtros antes de la opacidad. Por tanto, una opacidad general en el elemento o en un grupo circundante puede reducir el resultado renderizado después del filtro. Si aplicas un umbral al original y después compones el resultado con una opacidad menor, puede volver a verse translúcido. Excluye esa opacidad posterior de una prueba controlada del umbral.

Un umbral abrupto también descarta la transición semitransparente del original. Los píxeles tenues desaparecen y los píxeles translúcidos conservados se vuelven completamente opacos. Esto puede eliminar un brillo suave o un borde fino que querías conservar. Inspecciona el resultado al tamaño de destino y sobre más de un fondo. Un alfa de salida binario no garantiza que el borde finalmente mostrado esté libre de efectos de muestreo o composición.

Si la translucidez forma parte del diseño, consérvala o usa una transferencia gradual en lugar de forzar un umbral. Para una máscara de visibilidad deliberadamente monocroma, la guía de máscaras CSS con SVG explica otro flujo de presentación.

El blanco opaco necesita otro diagnóstico

La zona blanca permanece porque su alfa es completamente opaco. Esta operación selecciona por alfa, no por si un píxel parece blanco. Los píxeles de fondo completamente opacos no se vuelven transparentes con esta correspondencia discrete 0 1.

Si el archivo contiene un fondo blanco no deseado, determina primero si es una forma SVG independiente o parte de una imagen rasterizada. Elimina o edita directamente una forma vectorial de fondo no deseada. Para un PNG con blanco incorporado en sus píxeles, limpia el original rasterizado antes de reconstruirlo o usa un flujo adecuado de eliminación del fondo. La guía de SVG con fondo transparente explica esos casos.

Ten en cuenta las partes realmente blancas del sujeto antes de eliminar un fondo por color. Este filtro alfa no puede deducir qué región blanca es fondo y cuál pertenece a la ilustración, ni restaurar la información de color perdida al aplanar el original.

Prepara una imagen rasterizada transparente antes de reconstruir el vector

PerfectVector puede ayudar cuando el diseño terminado solo existe como imagen rasterizada y necesitas geometría SVG. Prepara primero un PNG con transparencia real y después convierte el PNG en SVG. Compara la vista previa sobre un fondo contrastante, inspecciona la silueta y los huecos, y comprueba si el archivo descargado contiene geometría de fondo no deseada.

Nuestro ejemplo de filtro es un experimento de visualización. No envía un SVG filtrado para vectorizarlo ni demuestra un nuevo resultado de trazado. Si necesitas conservar una apariencia rasterizada con el umbral aplicado, prepara y verifica una copia rasterizada real para entregar en tu editor antes de considerar la reconstrucción vectorial. Inspecciona el alfa de esa copia en lugar de confiar en la vista previa del navegador.

Usa directamente un original vectorial disponible. Conserva la semitransparencia cuando aporte información útil al diseño y redibuja un símbolo sencillo cuando sea más fácil de mantener. La introducción a la vectorización de imágenes distingue la reconstrucción de una imagen rasterizada de los cambios de presentación de un SVG existente.

Preguntas frecuentes

¿Qué umbral alfa usa discrete con tableValues 0 1? El alfa de entrada inferior a 0.5 se convierte en 0; el alfa igual o superior a 0.5 se convierte en 1. En las muestras PNG de 8 bits probadas, el byte 127 se vuelve transparente y el byte 128 se vuelve opaco.

¿Por qué tableValues 0 1 deja mi transparencia igual? Con el tipo table, esas entradas definen una interpolación lineal de 0 a 1, que es la identidad. Usa el tipo discrete para la correspondencia de dos escalones que se muestra aquí.

¿Esto eliminará el blanco o convertirá un PNG en trazados vectoriales? No. El blanco completamente opaco supera este umbral alfa. Nuestras variantes SVG siguen conteniendo el mismo PNG en un único elemento de imagen y cero trazados; limpiar el fondo y reconstruir el vector son tareas independientes.

Fuentes

1. W3C — Filter Effects Level 1 — Define los valores de identidad predeterminados, la transferencia de canales no premultiplicados y las fórmulas de intervalos de table/discrete.
2. MDN — feComponentTransfer — Explica la reasignación de canales que realiza la primitiva de filtro.
3. MDN — feFuncA — Identifica la función de transferencia del canal alfa.
4. MDN — type — Enumera los tipos de funciones de transferencia de componentes y el contexto de sus atributos.
5. MDN — tableValues — Describe las entradas de consulta que usan las transferencias table y discrete.

¿Necesitas geometría vectorial a partir de un diseño rasterizado? Prepara y convierte un PNG transparente, inspecciona la silueta y los huecos de la vista previa y verifica el SVG descargado sobre un fondo de color.