Textura de grano SVG: mantén el ruido dentro del diseño

Para añadir grano a una ilustración SVG, genera ruido con feTurbulence, conviértelo en una superposición monocroma tenue y compón esa superposición dentro de SourceAlpha. Fusiónala sobre SourceGraphic para que el relleno original siga visible. Esto añade una textura renderizada y mantiene intacta la geometría de los trazados del diseño.

Una primitiva de ruido por sí sola da un resultado diferente: llena la subregión de la primitiva del filtro en lugar de seguir el contorno de la forma. Por eso una hoja puede convertirse en una mancha rectangular de ruido. La referencia de feTurbulence de MDN documenta ese comportamiento.

Para una ilustración web, los entregables útiles son una versión de visualización con textura y un maestro limpio. El grano producido por este filtro no es una colección de puntos editables ni de contornos de corte.

Separa la forma del tratamiento de superficie

Empieza con un trazado sencillo con relleno que ya se vea bien sin grano. Corrige su contorno, sus huecos y su color antes de añadir el efecto. Un filtro no reparará esa geometría.

Los tres estados siguientes explican el problema del límite:

El límite importa

SourceGraphic proporciona el elemento al que se aplica el filtro. SourceAlpha proporciona su canal alfa. El filtro actúa sobre una imagen del diseño; no reescribe los comandos del trazado. Estas entradas y el grafo del filtro están definidos en la especificación Filter Effects del W3C.

Si tu diseño inicial ya tiene áreas transparentes, esas áreas también afectan a la contención. SourceAlpha sigue la opacidad real renderizada, no un cuadro delimitador exterior estimado.

Copia un ejemplo completo de grano SVG

Guarda esto como archivo .svg y ábrelo en un navegador. Contiene un trazado de hoja original, una semilla de ruido determinista, una superposición oscura y el paso explícito de contención. La abertura diagonal forma parte del trazado, así que sigue siendo transparente en la versión con textura.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

El filtro realiza cuatro tareas:

1. feTurbulence crea el ruido y lo nombra noise.
2. La matriz fija rojo, verde y azul en cero. Su última fila multiplica el alfa del ruido por 0.28, creando una superposición negra tenue llamada ink.
3. feComposite con operator="in" conserva esa superposición donde existe SourceAlpha.
4. feMerge dibuja primero el diseño original y después la superposición contenida por encima.

La referencia de feColorMatrix de MDN explica cómo la matriz de cinco columnas transforma el color y el alfa. Aquí cambia la imagen de ruido, no el relleno de la hoja. La referencia de feComposite de MDN explica la operación in utilizada para limitar la superposición a la segunda entrada.

El valor 0.28 es un punto de partida para esta hoja coral, no un ajuste universal de grano. Redúcelo si la textura apaga el diseño; auméntalo si el grano desaparece al tamaño de visualización previsto. El grano de superposición negra oscurece el relleno. No crea motas claras visibles sobre un motivo negro.

Para las operaciones de color y alfa usadas para recolorear un diseño existente, consulta la guía de feColorMatrix. Para endurecer un borde transparente existente, consulta los umbrales alfa SVG. Ninguna de esas operaciones proporciona la fuente de ruido generado que se usa aquí.

Revisa el resultado al tamaño que verá la gente

Creamos tres versiones de este trazado original: sin filtro, con un filtro que solo contiene la primitiva de ruido y con el grafo completo de grano contenido de arriba. Inspeccionamos las versiones renderizadas en Chrome a 120 × 120 y 360 × 360 píxeles CSS, con el mismo viewBox 0 0 200 200.

El DOM del navegador contenía un trazado en cada muestra. Los seis atributos d eran idénticos. Eso establece el límite de este ejemplo: cambió la superficie renderizada y no se añadieron trazados de motas. Es un archivo de prueba creado para el navegador, no un resultado de PerfectVector ni de un editor vectorial nativo.

Una vista previa más grande ayuda a inspeccionar el efecto, pero la versión pequeña determina si el diseño sigue siendo legible. Incluye ambos tamaños en tu revisión. Aumentar el tamaño de visualización con el mismo viewBox también cambia la escala aparente de la textura; no supongas que una vista previa representa todos los usos.

Ajusta el grano con un control a la vez

Para una ilustración pequeña en una tarjeta web, empieza con los valores del ejemplo. Después cambia un parámetro, compara los mismos dos tamaños y guarda una copia de la versión que prefieras.

baseFrequency acepta un valor para ambos ejes o dos valores para las frecuencias horizontal y vertical. La referencia de baseFrequency de MDN documenta esa diferencia. Empieza con un solo valor para esta hoja; usar valores distintos es una decisión deliberada para crear una textura direccional.

numOctaves controla el número de octavas del ruido, como describe la referencia de numOctaves de MDN. Más octavas no significan más trazados vectoriales. Úsalas solo si mejoran la superficie visible al tamaño que necesitas.

El ejemplo establece explícitamente color-interpolation-filters="sRGB". Conserva ese ajuste al comparar tus opciones para que un cambio en el procesamiento del color no confunda la comparación del grano.

Corrige un rectángulo, un relleno ausente o un borde sucio

La textura forma una mancha rectangular. Revisa la salida final del filtro. Si termina con feTurbulence, está devolviendo la imagen de ruido. Restaura la matriz, la composición con SourceAlpha y la fusión. Ampliar el rectángulo del filtro solo dará más espacio al ruido sin contener.

El color de la hoja desaparece. Comprueba que el primer nodo de fusión use SourceGraphic. Un resultado final inside por sí solo contiene la superposición oscura, no el relleno coral original. Revisa también la escritura y las mayúsculas de cada result con nombre y cada referencia in.

Queda ruido en una abertura transparente. Confirma que la segunda entrada de composición sea SourceAlpha, no el ruido rectangular ni un fondo opaco. Aplica el filtro al diseño al que quieres dar textura. Incluir un fondo opaco en el grupo filtrado cambia la entrada alfa.

Parte de la salida se recorta. Revisa x, y, width y height del filtro. Definen la región disponible para el filtro, como describe la referencia de filter de MDN. El ejemplo deja algo de espacio extra. Una región más amplia no puede reparar un paso de contención ausente ni corrige el recorte impuesto por un contenedor separado.

El diseño pequeño se ve sucio. Reduce primero el alfa de la superposición y después compara la frecuencia y el número de octavas. Si la textura sigue perjudicando la silueta, entrega la versión limpia a ese tamaño.

Conserva un maestro limpio para la entrega

Para el maestro sin filtro, elimina filter="url(#grain)" del trazado y la definición del filtro que ya no se usa. Conserva el d del trazado, su relleno y el viewBox. Abre ese archivo por separado y confirma que la hoja y la abertura coincidan con la versión limpia original.

Para una aplicación web, revisa la versión con textura en los navegadores y con el método exacto de inserción que publicarás. Si repites este SVG inline en una página, asigna a cada filtro un ID único y actualiza su referencia url(#...). El ejemplo independiente usa un ID porque contiene una instancia.

Para un destino que necesite una apariencia ráster exacta, exporta una vista previa ráster al tamaño requerido y revísala allí. Para un flujo que necesite geometría editable o apta para corte, entrega los trazados limpios y aclara que el grano es un efecto de visualización. No describas el ruido del filtro como motas vectoriales ni prometas que un editor, un exportador PDF o una cortadora posteriores lo reproducirán. Prueba el destino real.

Si necesitas deliberadamente motas editables de forma individual, esa es una tarea geométrica separada. También exige decidir cómo limpiarlas; consulta por qué un SVG tiene demasiados nodos antes de calcar una textura y convertirla en una masa de contornos diminutos. Conservar el grano de una pintura ráster es otro problema de origen, tratado en acuarela a vector.

Cuándo ayuda la vectorización

Si el motivo limpio solo se conserva como PNG o JPG, convierte ese origen en un diseño SVG editable antes de añadir un filtro de navegador. Revisa primero la silueta y la abertura recuperadas en la versión limpia. PerfectVector proporciona el paso de ráster a vector; el grafo de grano procedimental de esta guía es un tratamiento SVG separado que añades después.

¿Ya tienes el maestro basado en trazados? Úsalo directamente. No hace falta una segunda conversión para aplicar el filtro. La guía de vectorización de imágenes explica ese paso de recuperación del origen si lo necesitas.

Preguntas frecuentes

¿Por qué feTurbulence crea un rectángulo en lugar de seguir mi forma? El ruido llena la subregión de su primitiva de filtro. Compónlo dentro de SourceAlpha y fusiónalo sobre SourceGraphic para limitar la superposición al diseño mientras conservas su relleno.

¿El grano SVG añade nodos a mi trazado? Este filtro no añade trazados de motas. En el archivo de prueba original del navegador, las seis muestras conservaron un trazado con datos d idénticos; el filtro cambió la superficie renderizada.

¿Con qué ajustes de grano debería empezar? Para el ejemplo original de la hoja, empieza con fractalNoise, baseFrequency 0.65, dos octavas, semilla 8 y un multiplicador alfa de superposición negra de 0.28. Compara al tamaño real de visualización y ajusta un parámetro a la vez.

¿Puedo usar el efecto de grano como archivo de corte? La textura generada no es geometría de corte editable. Conserva un maestro de trazados sin filtro por separado y revisa la geometría en el flujo de corte real.

Fuentes

1. MDN: feTurbulence — Generación de ruido y subregión de la primitiva.
2. W3C: Árbol de primitivas de filtro — SourceGraphic, SourceAlpha y procesamiento de imágenes del filtro.
3. MDN: feColorMatrix — Operaciones matriciales de color y alfa.
4. MDN: feComposite — Contención mediante el operador in.
5. MDN: baseFrequency — Valores de frecuencia para uno y dos ejes.
6. MDN: numOctaves — Capas de detalle del ruido.
7. MDN: filter — Atributos de la región del filtro.

Si tu ilustración web necesita un maestro limpio recuperado de un ráster, empieza por la conversión de imagen a vector, revisa los trazados y añade grano a una copia de visualización separada.