Sombra SVG cortada? Confira o filtro e a área visível

Uma sombra SVG cortada pode atingir dois limites diferentes. A região do filtro limita onde o efeito é calculado; a área de visualização do SVG ou um contêiner pai pode então recortar o resultado renderizado. Aumente primeiro a região do filtro. Se a sombra ainda termina na borda da imagem, inspecione a área de visualização e suas regras de recorte.

Você não precisa vetorizar novamente um SVG cujos traçados já estão intactos. Este guia altera a área de trabalho do efeito e a tela visível, preservando a mesma silhueta original.

Dois limites, um traçado inalterado

Fizemos uma pequena silhueta à mão e abrimos três versões em um navegador. Cada uma usa o mesmo traçado e as mesmas configurações de feDropShadow: dx="22", dy="18" e stdDeviation="12". A captura abaixo mostra a renderização real do navegador, não uma conversão do PerfectVector.

Na primeira versão, a região do filtro vai de (50, 50) a (210, 180). Isso deixa um corte abrupto nas bordas direita e inferior da sombra. Na segunda, a região cresce para cobrir de (-20, -20) até (300, 280), mas o SVG ainda mostra somente 0 0 240 220. A borda direita da sombra agora alcança a moldura da área de visualização e é cortada ali.

A terceira versão mantém a região maior do filtro e altera o viewBox para -20 -20 320 300. Seus width e height também passam a 320 e 300, de modo que as três demonstrações mantêm uma unidade SVG por pixel CSS. O espaço extra contém a sombra visível sem redimensionar o traçado.

Amplie a região do filtro no sistema de coordenadas correto

Os atributos x, y, width e height de <filter> definem sua região. Seus padrões são -10%, -10%, 120% e 120%: já existe alguma margem, mas ela pode ser insuficiente para um deslocamento e desfoque específicos. A MDN documenta esses padrões.

Confira filterUnits antes de alterar os números:

• objectBoundingBox, o padrão, interpreta a região em relação à caixa delimitadora do elemento filtrado. Uma margem em porcentagem depende das dimensões da forma.
• userSpaceOnUse permite definir a região no sistema atual de coordenadas do usuário do elemento que referencia o filtro. Ele é útil quando você conhece as coordenadas da arte.

Essas regras se aplicam à região, conforme descrito na referência de filterUnits. Elas não alteram automaticamente as unidades de deslocamento ou desfoque da sombra.

primitiveUnits controla os valores de comprimento dentro das primitivas do filtro. Seu padrão é userSpaceOnUse; nós o definimos explicitamente no exemplo para que 22, 18 e 12 mantenham esse significado. Mudá-lo para objectBoundingBox alteraria a interpretação desses valores. A MDN separa as unidades das primitivas das unidades da região do filtro.

No seu arquivo, inspecione os limites do objeto ou grupo filtrado e adicione espaço suficiente nas direções em que a sombra se estende. Os números abaixo atendem a esta demonstração. Eles não são uma margem universal para sombras. Se você aumentar o desfoque, mover a sombra ou transformar o grupo filtrado, confira o resultado novamente.

Dê espaço também à área de visualização SVG

Salve este exemplo completo como shadow.svg e abra-o em um navegador. Este é o SVG exato usado no terceiro estado, também conferido como arquivo independente:

<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>

O viewBox tem quatro valores: x mínimo, y mínimo, largura e altura. Ele mapeia esse retângulo de coordenadas do usuário para a área de visualização SVG. Aumentar suas dimensões mantendo a mesma largura e altura exibidas faz a arte parecer menor; isso não acrescenta espaço de layout fora do elemento. A MDN explica o mapeamento de viewBox.

Para reproduzir as duas falhas, altere somente estes valores em uma cópia do exemplo:

1. Para o estado do meio, mantenha o filtro igual, mas defina na raiz width="240", height="220" e viewBox="0 0 240 220".
2. Para o primeiro estado, mantenha essa área de visualização menor e também defina no filtro x="50", y="50", width="160" e height="130".
3. Restaure o exemplo completo e compare as bordas direita e inferior. Os dados do traçado nunca mudam.

Se todo o desenho está fora da tela, siga as verificações mais amplas de SVG em branco. Se o desenho é visível, mas suas dimensões mudam durante a importação, inspecione a relação entre unidades SVG e tamanho antes de ajustar a geometria.

Por que overflow pode ajudar no SVG inline sem resolver o problema do arquivo

O exemplo define overflow="hidden" explicitamente para tornar reproduzível o limite da área de visualização. Para um SVG inline, overflow="visible" pode remover esse recorte. Ele não consegue recuperar pixels já descartados na região do filtro, e um ancestral com seu próprio recorte ainda pode ocultar o resultado. O CSS também pode substituir o atributo de apresentação SVG. A referência de overflow em SVG descreve essas regras de recorte.

Inspecione a forma real de incorporação. Um SVG inline em uma página espaçosa, um SVG independente e um SVG carregado por um elemento de imagem HTML não oferecem o mesmo layout ao redor. Nossa captura de três estados usa elementos de imagem e dá ao arquivo corrigido espaço interno suficiente na tela. Use essa abordagem quando o SVG precisar circular como uma imagem autossuficiente: inclua o efeito dentro dos limites pretendidos e reabra esse arquivo exato no destino.

Se ele parece correto sozinho, mas é cortado dentro de um cartão, confira o overflow, o recorte e a máscara do cartão. Se falha apenas em um editor ou exportador específico, compare uma cópia simplificada e consulte o suporte desse aplicativo a filtros. O guia de mudanças de aparência em SVG aborda esse problema separado do importador.

Preserve a geometria e reconstrua o efeito separadamente

Uma sombra renderizada acrescenta uma aparência ao traçado; ela não transforma o desfoque em outro contorno editável. Mantenha um mestre SVG com a geometria original. Para um fluxo de corte, inspecione os contornos dos traçados separadamente: a sombra visível não é uma linha de corte extra.

Se sua imagem original existe apenas como PNG ou JPG, o PerfectVector pode ajudar a recuperar a geometria SVG antes de você adicionar o efeito. Converta a arte sem sombra para vetor e inspecione o contorno, os espaços e as formas de fundo indesejadas em um editor. Adicione a sombra ali e teste seus limites com as verificações acima.

Use uma imagem original sem o desfoque incorporado quando houver uma disponível. Vetorizar uma imagem achatada não consegue restaurar as configurações originais do filtro nem comprovar onde o designer pretendia que a silhueta limpa terminasse. Para uma marca simples sem uma imagem original limpa, redesenhar manualmente pode ser a escolha com mais controle. A visão geral de vetorização de imagens explica o que a vetorização reconstrói.

Confira o arquivo entregue

Abra o próprio SVG exportado, não apenas a tela do editor. Confirme que a sombra pretendida cabe no tamanho final de exibição e que a saída ainda contém os traçados de que você precisa. Confira também a página real ou o aplicativo de destino, pois um recorte ao redor ou um filtro incompatível pode reintroduzir o sintoma.

Evite deixar uma região de filtro enorme como correção padrão. Uma região muito além das necessidades do efeito torna o arquivo mais difícil de entender; ela também não consegue corrigir um limite externo de recorte. Use uma margem deliberada, mantenha a arte original sem filtro e confira novamente após alterar o desfoque ou o deslocamento.

Perguntas frequentes

Por que a sombra ainda é cortada depois que aumento a largura do filtro? A área de visualização SVG, um contêiner pai, um traçado de recorte ou uma máscara pode impor outro limite. Confira x e y do filtro, além de sua largura e altura, e inspecione com o que o corte restante se alinha.

filterUnits muda o raio do desfoque? filterUnits controla o sistema de coordenadas da região do filtro. primitiveUnits controla os valores de comprimento dentro das primitivas do filtro, incluindo as configurações de deslocamento e desfoque da sombra. Mantenha-os separados ao diagnosticar o arquivo.

Posso corrigir o corte vetorizando o SVG novamente? Se o SVG já tem traçados utilizáveis, repare a região do filtro ou a área de visualização. A vetorização pertence a uma etapa anterior quando a imagem original é uma arte raster; ela não recupera os parâmetros originais da sombra.

Fontes

1. MDN: elemento filter — Define o elemento de filtro e a margem padrão de sua região.
2. MDN: filterUnits — Explica as coordenadas da caixa delimitadora e do espaço do usuário para a região do filtro.
3. MDN: primitiveUnits — Distingue os comprimentos das primitivas da região externa do filtro.
4. MDN: viewBox — Descreve como as coordenadas do usuário são mapeadas para a área de visualização visível do SVG.
5. MDN: overflow — Documenta o recorte pela área de visualização, os padrões do SVG inline e a precedência do CSS.

Você está começando com uma silhueta disponível somente em raster? Prepare traçados SVG com o PerfectVector, inspecione primeiro o contorno recuperado, adicione sua sombra e reabra o SVG final para conferir os dois limites.