Iluminación SVG: sombrea un emblema sin tapar su abertura

Para dar a un logotipo SVG apariencia de relieve, suaviza SourceAlpha, usa ese alfa como entrada de feDiffuseLighting o feSpecularLighting, combina la luz con el color de origen y termina con una composición in contra el SourceAlpha original. Ese último paso mantiene el tratamiento dentro del emblema y conserva su abertura. Guarda una copia del trazado sin filtro como maestro plano.

El efecto cambia la apariencia renderizada. No crea un sólido en relieve, un contorno nuevo ni un archivo de fabricación. Este tutorial usa un emblema original de anillo romboidal, creado directamente como SVG, para comparar las etapas de iluminación y su alfa.

Usa el alfa como superficie de iluminación

feDiffuseLighting usa el alfa de entrada como mapa de relieve y produce un mapa de luz opaco. Su apariencia depende de la luz y de la superficie de entrada. La referencia de iluminación difusa de MDN explica ese comportamiento. En este ejemplo, las partes opacas del anillo aportan la zona alta y su abertura, la zona baja.

Desenfocamos solo SourceAlpha, dejando disponible el trazado de color original como SourceGraphic. El alfa suavizado proporciona a la iluminación una transición gradual en los bordes interior y exterior. feGaussianBlur controla ese suavizado mediante stdDeviation; la plantilla usa 2.5 en un filtro con espacio de usuario explícito.

El mapa difuso sin combinar pinta toda su región de filtro, incluidos los lugares donde el trazado original era transparente. Eso sirve para inspeccionar el cálculo de luz, pero no es la silueta final correcta para nuestro emblema hueco. Mantén disponible el alfa original para el paso final de contención.

Copia la plantilla completa del emblema sombreado

Guarda esto como emblem-lighting.svg y ábrelo en un navegador. Tiene un trazado compuesto y ninguna dependencia de imágenes externas.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

El filtro da un nombre a cada resultado intermedio para que puedas revisar su función:

La multiplicación aritmética usa k1="1" con los demás coeficientes a cero. La suma usa k2="1" k3="1" con los demás a cero. feComposite define estas operaciones de píxeles y el operador in. Mantén la segunda entrada de la composición final como SourceAlpha, no el bump desenfocado, si quieres el límite original.

El filtro usa explícitamente color-interpolation-filters="linearRGB", que es el valor predeterminado de las operaciones de filtro SVG. Es algo distinto de la interpolación de pintura normal. La referencia de color-interpolation-filters de MDN documenta la diferencia. Todas las variantes de iluminación medidas aquí usan el mismo ajuste.

Compara el sombreado difuso con el brillo especular

La iluminación difusa oscurece y aclara el color original según el mapa de luz. La etapa especular añade un componente de reflexión. feSpecularLighting documenta su salida dependiente de la luz y sus parámetros. La plantilla usa una constante moderada de .7 y un exponente de 18; ajústalos después de conseguir un tratamiento difuso útil.

Para inspeccionar solo la iluminación difusa, conserva las etapas de desenfoque, difusa y multiplicación; después cambia la primera entrada de la composición final de paint a lit. Elimina las etapas especular y de suma.

Para inspeccionar solo la especular sobre el color plano, conserva las etapas de desenfoque y especular. Cambia la primera entrada de la suma de lit a SourceGraphic, elimina las etapas difusa y de multiplicación y conserva la composición final paint in SourceAlpha. Ambas comparaciones mantienen el mismo trazado original y la misma dirección de luz.

Nuestra luz distante usa azimuth="225" elevation="45". feDistantLight es un elemento de fuente de luz para cualquiera de las dos primitivas de iluminación. Esos ángulos son grados, no posiciones en píxeles. Cambia la dirección en ambas etapas a la vez cuando compares un tratamiento combinado.

Qué mostraron los controles originales en el navegador

Abrimos seis muestras SVG creadas por nosotros en Chrome a 80 × 80 y 160 × 160 píxeles CSS. El maestro plano y los tratamientos difuso, especular y combinado siguieron siendo visualmente distintos. Un surfaceScale difuso mayor produjo más contraste de borde en este archivo de prueba. El control difuso sin combinar mostró un rectángulo gris con la abertura rellena en lugar de una silueta transparente.

Las lecturas de píxeles separadas usaron el tamaño de Canvas de origen de 200 × 200. La muestra de la banda estaba en (100, 38), la del borde en (101, 22), la de la abertura en (100, 100) y la exterior en (10, 10).

Todos los archivos conservaron el mismo valor d, un trazado y cero elementos de imagen. El efecto en pantalla no produjo geometría de origen adicional. Son observaciones de este navegador y origen, no garantías sobre otro renderizador ni sobre el comportamiento de importación de un editor.

Iluminación y maestro plano

Ajusta el campo de alturas antes de cambiar el contorno

surfaceScale establece la escala de altura de superficie utilizada en el cálculo de iluminación. No expande el trazado. Nuestros controles difusos 4 y 12 solo cambiaron este valor: la muestra de la banda plana conservó el mismo color, mientras que la muestra del borde se oscureció con 12.

Sigue una secuencia controlada:

1. Establece la silueta y la abertura transparentes originales sin filtro.
2. Elige el suavizado del alfa y la dirección de la luz.
3. Compara un surfaceScale pequeño y otro mayor manteniendo todo lo demás fijo.
4. Añade brillo especular y limita después la pintura con el alfa original como última operación.
5. Revisa el diseño entregado a su tamaño real de visualización y sobre un fondo contrastante.

La especificación actual de Filter Effects define el alfa de salida difusa como uno en todas partes y el alfa de salida especular a partir de sus componentes de color. No debes suponer que ninguna de las dos salidas conserve la abertura original. También define el cálculo de la normal a partir de muestras alfa vecinas. Esta plantilla deja kernelUnitLength sin establecer; nuestra inspección en dos tamaños no demuestra un muestreo de iluminación independiente del tamaño.

Si el búfer intermedio de una etapa de iluminación aparece como resultado final, revisa las entradas con nombre y la última primitiva. En este anillo, devolver directamente el mapa de luz difusa fue la forma de reproducir el rectángulo gris opaco. El paso final in SourceAlpha es deliberado, incluso si una multiplicación anterior ya parece conservar la transparencia.

Si un desenfoque o efecto se corta en un rectángulo inesperado, revisa la región del filtro con la guía de recorte SVG. Trata esa región por separado de la contención final con el alfa de origen: una limita el área de trabajo del efecto y la otra restaura la silueta prevista.

Entrega el tratamiento de pantalla con un maestro plano

Elimina el atributo de filtro del trazado para inspeccionar el maestro plano. Conserva el mismo contorno exterior, abertura interior y relleno coral sólido. Guarda esa copia junto a la versión web sombreada para poder partir de la geometría original en futuras ediciones.

Para un acabado físico, usa un flujo de preparación separado como el de diseños vectoriales para relieve. Un ajuste preestablecido de iluminación de pantalla proporciona apariencia, no geometría de troquel ni una profundidad de relieve medida. La guía de contornos con morfología SVG explica otro tratamiento de límites basado en filtros sin tratarlo como trazados reconstruidos.

Si tu logotipo solo existe como PNG o JPG, vectoriza el logotipo con PerfectVector, inspecciona el contorno exterior y la abertura recuperados, y conserva un maestro plano limpio antes de añadir iluminación en tu flujo SVG. El servicio recupera geometría vectorial; este proceso difuso/especular es un tratamiento de visualización creado por separado. Si ya tienes el maestro vectorial, aplica y revisa el filtro directamente.

Preguntas frecuentes

¿Pueden los filtros de iluminación SVG dar aspecto de relieve a un logotipo? Pueden simular sombras y brillos a partir de un campo de alturas basado en alfa. El tratamiento renderizado no crea relieve físico, contornos de trazado adicionales ni un archivo de troquel para producción.

¿Por qué mi efecto de iluminación SVG rellena la abertura transparente? Un mapa de luz difusa sin combinar es opaco en toda su región de filtro. Combina la luz con el color de origen y termina con una composición in contra el SourceAlpha original para limitar el tratamiento a la silueta original.

¿Cuál es la diferencia entre iluminación difusa y especular en SVG? La iluminación difusa aporta iluminación amplia para sombrear el color original. La especular aporta un componente de reflexión que se añade como brillo. Ambas usan el alfa de entrada como mapa de relieve y dependen de la luz y los ajustes de superficie seleccionados.

¿surfaceScale cambia el trazado de mi logotipo? No. Cambia la escala de altura usada en el cálculo de iluminación. En nuestros dos controles difusos, los datos del trazado siguieron idénticos mientras cambiaba el contraste del borde renderizado.

Fuentes

1. MDN feDiffuseLighting — Entrada alfa como mapa de relieve y salida de luz difusa opaca.
2. MDN feGaussianBlur — Entrada suavizada y consideraciones sobre la región del filtro.
3. MDN feComposite — Multiplicación y suma aritméticas, y contención con alfa de origen.
4. MDN color-interpolation-filters — linearRGB como valor predeterminado de las operaciones de filtro.
5. MDN feSpecularLighting — Componente de reflexión y sus controles.
6. MDN feDistantLight — Fuente de luz para ambas primitivas de iluminación.
7. MDN surfaceScale — Escala de altura de superficie para el cálculo.
8. Especificación de iluminación de Filter Effects — Alfa de iluminación, unidades angulares y cálculos con muestras vecinas.