¿Sombra SVG recortada? Comprueba el filtro y la ventana

Una sombra SVG recortada puede encontrarse con dos límites diferentes. La región del filtro limita dónde se calcula el efecto; después, la ventana SVG o un contenedor padre pueden recortar el resultado renderizado. Amplía primero la región del filtro. Si la sombra sigue terminando en el borde de la imagen, inspecciona la ventana y sus reglas de recorte.

No necesitas volver a trazar un SVG cuyos trazados ya estén intactos. Esta guía modifica el área de trabajo del efecto y el lienzo visible conservando la misma silueta original.

Dos límites, un trazado sin cambios

Creamos a mano una pequeña silueta y abrimos tres versiones en un navegador. Cada una utiliza el mismo trazado y los mismos ajustes de feDropShadow: dx="22", dy="18" y stdDeviation="12". La siguiente captura muestra un renderizado real del navegador, no una conversión de PerfectVector.

En la primera versión, la región del filtro va de (50, 50) a (210, 180). Eso deja un corte brusco en los bordes derecho e inferior de la sombra. En la segunda, la región crece para cubrir desde (-20, -20) hasta (300, 280), pero el SVG sigue mostrando solo 0 0 240 220. El borde derecho de la sombra alcanza ahora el marco de la ventana y se recorta allí.

La tercera versión mantiene la región del filtro más grande y cambia el viewBox a -20 -20 320 300. Sus width y height también pasan a 320 y 300, de modo que las tres demostraciones mantienen una unidad SVG por píxel CSS. El espacio adicional contiene la sombra visible sin redimensionar el trazado.

Amplía la región del filtro en el sistema de coordenadas correcto

Los atributos x, y, width y height de <filter> definen su región. Sus valores predeterminados son -10%, -10%, 120% y 120%: ya hay cierto margen, pero puede ser insuficiente para un desplazamiento y desenfoque concretos. MDN documenta estos valores predeterminados.

Comprueba filterUnits antes de cambiar los números:

• objectBoundingBox, el valor predeterminado, interpreta la región respecto al cuadro delimitador del elemento filtrado. Un margen porcentual depende de las dimensiones de la forma.
• userSpaceOnUse permite definir la región en el sistema de coordenadas de usuario actual del elemento que referencia el filtro. Es útil cuando conoces las coordenadas del diseño.

Esas reglas se aplican a la región, como describe la referencia de filterUnits. No cambian automáticamente las unidades del desplazamiento o del desenfoque de la sombra.

primitiveUnits controla los valores de longitud dentro de las primitivas del filtro. Su valor predeterminado es userSpaceOnUse; lo establecemos expresamente en el ejemplo para que 22, 18 y 12 conserven ese significado. Cambiarlo a objectBoundingBox modificaría cómo se interpretan esos valores. MDN distingue las unidades primitivas de las unidades de la región del filtro.

Para tu propio archivo, inspecciona los límites del objeto o grupo filtrado y después añade espacio suficiente en las direcciones en que se extienda la sombra. Los números siguientes encajan con esta demostración. No son un margen universal para sombras. Si aumentas el desenfoque, mueves la sombra o transformas el grupo filtrado, vuelve a comprobar el resultado.

Da espacio también a la ventana SVG

Guarda este ejemplo completo como shadow.svg y ábrelo en un navegador. Es el SVG exacto utilizado para el tercer estado, también comprobado como archivo independiente:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

El viewBox tiene cuatro valores: x mínima, y mínima, ancho y alto. Mapea ese rectángulo de coordenadas de usuario a la ventana SVG. Aumentar sus dimensiones manteniendo el mismo ancho y alto mostrados hace que el diseño parezca más pequeño; no añade espacio de composición fuera del elemento. MDN explica el mapeo de viewBox.

Para reproducir los dos fallos, cambia solo estos valores en una copia del ejemplo:

1. Para el estado intermedio, conserva el filtro sin cambios, pero establece en la raíz width="240", height="220" y viewBox="0 0 240 220".
2. Para el primer estado, conserva esa ventana más pequeña y establece también el filtro en x="50", y="50", width="160" y height="130".
3. Recupera el ejemplo completo y compara los bordes derecho e inferior. Los datos del trazado nunca cambian.

Si todo el dibujo está fuera del lienzo, sigue las comprobaciones más amplias de SVG en blanco. Si el dibujo es visible, pero sus dimensiones cambian al importar, inspecciona la relación entre unidades SVG y tamaño antes de ajustar la geometría.

Por qué overflow puede ayudar al SVG en línea sin resolver el problema del archivo

El ejemplo establece expresamente overflow="hidden" para que el límite de su ventana sea reproducible. Para un SVG en línea, overflow="visible" puede eliminar ese recorte de la ventana. No puede recuperar píxeles ya descartados en la región del filtro, y un ancestro con su propio recorte puede seguir ocultando el resultado. CSS también puede sustituir el atributo de presentación SVG. La referencia de overflow de SVG describe estas reglas de recorte.

Inspecciona la forma real de insertar el SVG. Un SVG en línea en una página espaciosa, un SVG independiente y uno cargado mediante un elemento de imagen HTML no ofrecen la misma composición alrededor. Nuestra captura de tres estados utiliza elementos de imagen y da al archivo fijo espacio interno suficiente de lienzo. Utiliza ese método cuando el SVG deba distribuirse como imagen autónoma: incluye el efecto dentro de sus límites previstos y después vuelve a abrir ese archivo exacto en su destino.

Si se ve correcto solo, pero se recorta dentro de una tarjeta, comprueba el desbordamiento, el recorte y las máscaras de la tarjeta. Si falla solo en un editor o exportador concreto, compara una copia simplificada y consulta la compatibilidad con filtros de esa aplicación. La guía de cambios de apariencia de SVG aborda ese problema independiente del importador.

Conserva la geometría y reconstruye el efecto por separado

Una sombra renderizada añade apariencia al trazado; no convierte el desenfoque en otro contorno editable. Conserva un original SVG con la geometría inicial. Para un proceso de corte, inspecciona los contornos de los trazados por separado: la sombra visible no es una línea de corte adicional.

Si tu original solo existe como PNG o JPG, PerfectVector puede ayudar a recuperar geometría SVG antes de añadir el efecto. Convierte en vector el diseño sin sombra y después inspecciona el contorno, los huecos y las formas de fondo indeseadas en un editor. Añade allí la sombra y prueba sus límites con las comprobaciones anteriores.

Utiliza un original sin desenfoque incorporado cuando esté disponible. Trazar una imagen aplanada no puede recuperar los ajustes originales del filtro ni demostrar dónde pretendía el diseñador que terminara la silueta limpia. Para una marca sencilla sin original limpio, redibujar manualmente puede ofrecer más control. La introducción a la vectorización de imágenes explica qué reconstruye el calco.

Comprueba el archivo entregado

Abre el propio SVG exportado, no solo el lienzo del editor. Confirma que la sombra prevista cabe al tamaño final de visualización y que el resultado sigue conteniendo los trazados necesarios. Comprueba también la página web o aplicación real de destino, porque un recorte alrededor o un filtro no compatible pueden reintroducir el síntoma.

Evita dejar una región de filtro enorme como reparación predeterminada. Una región mucho mayor de lo necesario para el efecto dificulta comprender el archivo; tampoco puede corregir un límite de recorte exterior. Utiliza un margen deliberado, conserva el original sin filtro y vuelve a comprobar tras cambiar el desenfoque o el desplazamiento.

Preguntas frecuentes

¿Por qué sigue recortada la sombra después de aumentar el ancho del filtro? La ventana SVG, un contenedor padre, un trazado de recorte o una máscara pueden imponer otro límite. Comprueba x e y del filtro además de su ancho y alto y después inspecciona con qué se alinea el recorte restante.

¿Cambia filterUnits el radio de desenfoque? filterUnits controla el sistema de coordenadas de la región del filtro. primitiveUnits controla los valores de longitud dentro de las primitivas del filtro, incluidos los ajustes de desplazamiento y desenfoque de la sombra. Distingue ambos al diagnosticar el archivo.

¿Puedo arreglar el recorte vectorizando de nuevo el SVG? Si el SVG ya tiene trazados utilizables, repara la región del filtro o la ventana. La vectorización corresponde a un paso anterior cuando el original es rasterizado; no recupera los parámetros originales de sombra.

Fuentes

1. MDN: elemento filter — define el elemento de filtro y su margen predeterminado de región.
2. MDN: filterUnits — explica las coordenadas de cuadro delimitador y espacio de usuario para la región del filtro.
3. MDN: primitiveUnits — distingue las longitudes primitivas de la región exterior del filtro.
4. MDN: viewBox — describe cómo se mapean las coordenadas de usuario a la ventana SVG visible.
5. MDN: overflow — documenta el recorte de la ventana, los valores predeterminados de SVG en línea y la prioridad de CSS.

¿Empiezas con una silueta que solo existe rasterizada? Prepara trazados SVG con PerfectVector, inspecciona primero el contorno recuperado y después añade la sombra y vuelve a abrir el SVG final para comprobar ambos límites.