Iluminação SVG: sombreie um emblema e preserve o furo

Para um logotipo SVG com aparência de relevo, suavize SourceAlpha, passe esse alfa para feDiffuseLighting ou feSpecularLighting, combine a luz com a cor de origem e termine com uma composição in contra o SourceAlpha original. Essa última etapa mantém o tratamento dentro do emblema e preserva sua abertura. Salve uma cópia do caminho sem filtro como original plano.

O efeito muda a aparência renderizada. Não cria um sólido elevado, um novo contorno ou um arquivo de fabricação. Este passo a passo usa um emblema original de anel losangular, criado diretamente como SVG, para comparar as etapas de iluminação e seu alfa.

Use alfa como superfície de iluminação

feDiffuseLighting usa o alfa de entrada como mapa de relevo e produz um mapa de luz opaco. Sua aparência depende da luz e da superfície de entrada. A referência de iluminação difusa da MDN explica esse comportamento. Neste exemplo, as partes opacas do anel fornecem a área alta, e sua abertura fornece a área baixa.

Desfocamos apenas SourceAlpha, deixando o caminho colorido original disponível como SourceGraphic. O alfa suavizado dá ao cálculo de iluminação uma transição gradual nas bordas interna e externa. feGaussianBlur controla essa suavização por stdDeviation; o exemplo usa 2.5 em um filtro explícito no espaço de usuário.

O mapa difuso bruto pinta toda a região do filtro, incluindo lugares onde o caminho original era transparente. Isso é útil para examinar o cálculo de luz, mas é a silhueta final errada para nosso emblema vazado. Mantenha o alfa original disponível para a etapa final de contenção.

Copie o exemplo completo de emblema sombreado

Salve como emblem-lighting.svg e abra em um navegador. Ele tem um caminho composto e nenhuma dependência de imagem externa.

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

O filtro nomeia cada resultado intermediário para que você possa examinar seu papel:

A multiplicação aritmética usa k1="1" com os demais coeficientes em zero. A adição usa k2="1" k3="1" com os demais em zero. feComposite define essas operações de pixels e o operador in. Mantenha a segunda entrada da composição final como SourceAlpha, não o bump desfocado, quando quiser o limite original.

O filtro usa explicitamente color-interpolation-filters="linearRGB", padrão para operações de filtro SVG. Isso é separado da interpolação comum de pintura. A referência de color-interpolation-filters da MDN documenta a distinção. Todas as variantes de iluminação medidas aqui usam a mesma configuração.

Compare sombra difusa com brilho especular

A iluminação difusa escurece e clareia a cor original conforme o mapa de luz. A etapa especular adiciona um componente de reflexão. feSpecularLighting documenta sua saída dependente da luz e seus parâmetros. O exemplo usa uma constante moderada de .7 e expoente 18; ajuste-os depois de estabelecer um tratamento difuso útil.

Para examinar só a difusa, mantenha as etapas de desfoque, difusa e multiplicação e mude a primeira entrada da composição final de paint para lit. Remova as etapas especular e de adição.

Para examinar só a especular sobre a cor plana, mantenha as etapas de desfoque e especular. Mude a primeira entrada da adição de lit para SourceGraphic, remova as etapas difusa e de multiplicação e mantenha a composição final paint in SourceAlpha. As duas comparações preservam o mesmo caminho original e direção da luz.

Nossa luz distante usa azimuth="225" elevation="45". feDistantLight é um elemento de fonte de luz para qualquer uma das primitivas de iluminação. Esses ângulos são graus, não posições em pixels. Mude a direção nas duas etapas de iluminação juntas ao comparar um tratamento combinado.

O que os controles originais no navegador mostraram

Abrimos seis exemplos SVG criados no Chrome a 80 × 80 e 160 × 160 pixels CSS. O original plano e os tratamentos difuso, especular e combinado continuaram visualmente distintos. O surfaceScale difuso maior intensificou o contraste da borda neste arquivo de teste. O controle difuso bruto mostrou um retângulo cinza com a abertura preenchida, em vez de uma silhueta transparente.

Leituras separadas de pixels usaram o tamanho de Canvas de origem 200 × 200. A amostra da faixa ficou em (100, 38), a de borda em (101, 22), a de abertura em (100, 100) e a externa em (10, 10).

Cada arquivo manteve o mesmo valor d, um caminho e zero elementos de imagem. O efeito na tela não produziu geometria de origem adicional. São observações deste navegador e desta origem, não garantias sobre outro renderizador ou comportamento de importação de um editor.

Iluminação e original plano

Ajuste o campo de altura antes de mudar o contorno

surfaceScale define a escala de altura da superfície usada pelo cálculo de iluminação. Não expande o caminho. Nossos controles difusos 4 e 12 mudaram só esse valor: a faixa plana amostrada ficou da mesma cor, enquanto a amostra de borda escureceu em 12.

Use uma sequência controlada:

1. Estabeleça a silhueta e a abertura transparentes originais sem filtro.
2. Escolha a suavização alfa e a direção da luz.
3. Compare um surfaceScale pequeno e um maior com todo o resto fixo.
4. Adicione brilho especular e contenha a pintura com o alfa original como operação final.
5. Confira a arte entregue no tamanho real de exibição e sobre um fundo contrastante.

A especificação atual de Filter Effects define o alfa da saída difusa como um em toda parte e o alfa da saída especular a partir de seus componentes de cor. Não se deve supor que qualquer saída mantenha a abertura original. Ela também define o cálculo da normal a partir de amostras alfa vizinhas. Este exemplo não define kernelUnitLength; nossa inspeção em dois tamanhos não estabelece amostras de iluminação independentes de tamanho.

Se um buffer intermediário de uma etapa de iluminação aparecer como resultado final, confira as entradas nomeadas e a última primitiva. Neste anel, retornar diretamente o mapa de luz difusa foi como reproduzimos o retângulo cinza opaco. A etapa final in SourceAlpha é deliberada, mesmo quando uma multiplicação anterior já parece preservar a transparência.

Se um desfoque ou efeito for cortado em um retângulo inesperado, examine a região do filtro com o guia de recorte SVG. Mantenha essa região separada da contenção final pelo alfa da origem: uma limita a área de trabalho do efeito e a outra restaura a silhueta pretendida.

Entregue o tratamento de tela com um original plano

Remova o atributo de filtro do caminho para examinar o original plano. Ele mantém o mesmo contorno externo, abertura interna e preenchimento coral sólido. Guarde essa cópia junto da versão web sombreada para que edições futuras possam partir da geometria original.

Para um acabamento físico, use um fluxo separado de preparação, como arte vetorial para relevo. Uma predefinição de iluminação de tela fornece aparência, não geometria de matriz ou profundidade medida de relevo. O guia de contorno com morfologia SVG explica outro tratamento de limites baseado em filtro sem tratá-lo como caminhos reconstruídos.

Se seu logotipo existe só como PNG ou JPG, vetorize-o com o PerfectVector, examine o contorno externo e a abertura recuperados e mantenha um original plano limpo antes de adicionar iluminação no seu fluxo SVG. O serviço recupera geometria vetorial; esse processo difuso/especular é um tratamento de exibição separado e criado à parte. Se você já tem o original vetorial, aplique e revise o filtro diretamente.

Perguntas frequentes

Filtros de iluminação SVG podem dar aparência de relevo a um logo? Podem simular sombra e destaques a partir de um campo de altura baseado em alfa. O tratamento renderizado não cria relevo físico, contornos adicionais de caminho ou arquivo de matriz de produção.

Por que meu efeito de iluminação SVG preenche a abertura transparente? Um mapa de luz difusa bruto é opaco em toda a região do filtro. Combine a luz com a cor de origem e termine com uma composição in contra o SourceAlpha original para conter o tratamento na silhueta original.

Qual é a diferença entre iluminação SVG difusa e especular? A difusa fornece iluminação ampla para sombrear a cor original. A especular fornece um componente de reflexão para adicionar como brilho. Ambas usam o alfa de entrada como mapa de relevo e dependem da luz e das configurações de superfície escolhidas.

surfaceScale muda o caminho do meu logotipo? Não. Ele muda a escala de altura usada no cálculo de iluminação. Nos nossos dois controles difusos, os dados de caminho continuaram idênticos enquanto o contraste renderizado da borda mudou.

Fontes

1. MDN feDiffuseLighting — Entrada de mapa de relevo alfa e saída opaca de luz difusa.
2. MDN feGaussianBlur — Entrada suavizada e considerações sobre a região do filtro.
3. MDN feComposite — Multiplicação/adição aritmética e contenção pelo alfa da origem.
4. MDN color-interpolation-filters — O padrão linearRGB das operações de filtro.
5. MDN feSpecularLighting — O componente de reflexão e seus controles.
6. MDN feDistantLight — Uma fonte de luz para as duas primitivas de iluminação.
7. MDN surfaceScale — Escala de altura de superfície para o cálculo.
8. Especificação de iluminação Filter Effects — Alfa de iluminação, unidades angulares e cálculos de amostras vizinhas.