SVG feMorphology: contorno sem novos traçados

Para contornar toda a silhueta de um SVG multicolorido, dilate seu SourceAlpha, remova o alfa original desse resultado maior, pinte o anel restante e mescle a arte original por cima. O filtro muda a aparência renderizada, enquanto os dados originais dos traçados permanecem intactos.

Use operator="erode" quando quiser uma silhueta alfa menor. Nenhuma das operações cria um traçado de deslocamento editável. Aberturas, espaços estreitos e cantos agudos precisam de uma verificação visual, pois a morfologia usa uma vizinhança retangular em vez de um deslocamento circular de traço.

Comece pela silhueta, não pelos canais de cor

A especificação Filter Effects do W3C define dilatação como o máximo por componente em uma vizinhança retangular, e erosão como o mínimo. Com SourceAlpha, a entrada é o canal alfa da arte. Isso permite obter uma silhueta sem expandir separadamente os canais de cor verde-petróleo e coral.

Este exemplo aplica o filtro à arte completa de dois traçados. Sua abertura quadrada transparente faz parte da silhueta alfa. O detalhe coral já está dentro de uma área verde-petróleo opaca, portanto não cria um limite externo separado.

Criamos o SVG manualmente e abrimos cinco variantes independentes em um navegador. Todos os arquivos mantêm as mesmas duas definições originais de traçados. A comparação abaixo é a renderização real desses arquivos, sem arte vetorizada por traçado nem prévia de efeito gerada.

Com raio 10, o contorno cresce para fora da silhueta visível e para dentro da abertura. Com 22, o dourado preenche a abertura quadrada deste exemplo. A versão 18 4 cresce mais na horizontal do que na vertical. A erosão reduz a área externa opaca e aumenta a abertura transparente; a ponta inferior também muda.

Essas observações se aplicam a esta arte e a estas configurações. Não são uma regra geral de raio seguro para outros logos ou ícones.

Construa o anel alfa externo

Salve este exemplo completo como outline.svg e abra-o em um navegador. Ele é exatamente o SVG de raio 10 usado na captura:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

O filtro tem quatro etapas:

1. feMorphology dilata SourceAlpha em grown.
2. feComposite mantém grown fora do alfa original, produzindo ring.
3. feFlood fornece uma cor dourada; outra composição restringe essa cor ao anel.
4. feMerge coloca o SourceGraphic original acima do anel colorido.

A ordem das entradas importa na subtração. A seção de composição da especificação atribui a in a origem e a in2 o destino. Aqui, in="grown", in2="SourceAlpha" e operator="out" removem a área opaca original do alfa expandido. Inverter essas entradas não produz este anel externo.

A palavra fora significa fora da região alfa opaca, incluindo o espaço dentro de uma abertura transparente. Se um contorno precisar evitar aberturas internas, este filtro não oferece essa distinção automaticamente. Você precisa de uma silhueta separada ou de outra construção que defina o exterior pretendido.

As cores de origem permanecem visíveis porque mesclamos o SourceGraphic sem alterações por último. Isso é diferente de um traço comum de path. Para traços centralizados, recortados por dentro ou mascarados por fora, veja alinhamento de traços SVG; a ordem de pintura explica o caso mais simples de sobreposição de traço e preenchimento.

Eroda o alfa e mantenha as cores que restarem

Substitua o filtro de contorno pela definição a seguir e altere o use final para filter="url(#erode)":

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Essa composição mantém a arte original apenas onde o alfa erodido permanece. Ela não mescla o original completo novamente por cima, pois isso esconderia o afinamento pretendido. Neste exemplo, a área externa verde-petróleo fica menor, enquanto a região coral permanece dentro dela.

Especifique o operador explicitamente nos exemplos de uso. A referência de operator distingue erode e dilate em feMorphology de in e out em feComposite. O mesmo nome de atributo realiza tarefas diferentes nos dois elementos. O operador padrão da morfologia é erode, portanto omiti-lo é uma forma fácil de obter o efeito oposto a uma dilatação pretendida.

Separe as unidades do raio da região do filtro

A referência de radius aceita um ou dois números. Um se aplica aos dois eixos; com dois, o primeiro é o raio x e o segundo é o raio y. Para os dois estados adicionais de contorno, altere apenas radius="10" para radius="22" ou radius="18 4" no exemplo completo.

Esses raios estão no sistema de coordenadas selecionado por primitiveUnits; não prometem uma borda de tamanho fixo em pixels CSS em qualquer tamanho de exibição. Usamos explicitamente primitiveUnits="userSpaceOnUse" com um viewBox 0 0 300 220. Redimensionar o SVG exibido escala a aparência junto com a arte.

Dois atributos com nomes parecidos controlam coisas diferentes:

A referência de primitiveUnits no MDN documenta o sistema de coordenadas da primitiva. A referência de filterUnits documenta separadamente a região externa. O padrão de filterUnits é objectBoundingBox; o de primitiveUnits é userSpaceOnUse. Definir ambos explicitamente torna o exemplo mais fácil de inspecionar.

A origem ocupa x=50 a 250 e y=60 a 195. O maior raio igual nos dois eixos testado é 22, e a região de filtro e a viewport de 300 por 220 deixam espaço para esse resultado. Verifique novamente ambos os limites ao mudar a arte ou o raio. A especificação descreve a região do filtro como um recorte rígido: um raio maior não pode pintar além dessa região. O guia de recorte de filtros SVG e viewport demonstra esses dois limites separados.

Se o filtro parecer inativo, inspecione também radius. Seu padrão é 0, e a referência informa que um valor negativo ou zero desativa o efeito da primitiva. Os exemplos acima usam valores positivos explícitos nos dois eixos.

Inspecione aberturas e cantos antes da entrega

A vizinhança retangular da morfologia faz sua aparência ser diferente de um contorno arredondado convencional. Raios x e y iguais não transformam essa vizinhança em um círculo. A ponta inferior em degraus na comparação é um bom lugar para inspecionar a diferença.

Verificamos que os cinco arquivos ainda contêm dois traçados de origem com atributos d idênticos. Suas definições de filtro diferem; sua geometria de origem, não. Inspecione os objetos SVG reais quando o destino exigir traçados que você possa editar, deslocar ou enviar para produção. Use uma operação de geometria do editor para essa necessidade e inspecione os contornos resultantes. Apenas mudar ou remover este filtro não os fornece.

Mantenha um original sem filtro e uma cópia separada para entrega. Abra o arquivo entregue no destino real e compare os cantos, as aberturas internas, as cores e os limites. Este exemplo no navegador não estabelece compatibilidade com um aplicativo de design, exportador ou máquina de corte específico.

Prepare a origem antes de adicionar o efeito

O PerfectVector pode ajudar quando a arte inicial existe apenas como PNG ou JPG. Prepare um SVG candidato e inspecione a silhueta de origem recuperada, as pequenas aberturas e os limites de cor antes de aplicar o filtro. Um contorno morfológico amplificará os problemas dessa silhueta em vez de corrigir a geometria pretendida para você.

Use diretamente um original vetorial disponível. Para um símbolo simples, redesenhar manualmente pode ser mais fácil de controlar. Vetorizar uma imagem achatada com um contorno já incorporado não recupera as configurações originais do filtro nem estabelece qual parte era a forma sem filtro. A visão geral da vetorização de imagens explica esse limite da reconstrução.

Perguntas frequentes

feMorphology cria um traçado de contorno editável? Não. Ele muda o resultado renderizado do filtro. Este exemplo mantém os mesmos dois traçados de origem, portanto um destino que precise de um contorno separado exige uma operação de geometria e uma verificação de importação.

Por que o contorno dourado preenche a abertura do meu SVG? O anel cresce para fora do alfa opaco, inclusive para dentro de aberturas transparentes. Neste exemplo, o raio 22 preenche a abertura quadrada. Outras artes exigem sua própria verificação de espaço e raio.

Por que usar SourceAlpha em vez de SourceGraphic? SourceAlpha permite que o filtro opere na silhueta sem dilatar cada canal de cor original. O exemplo pinta esse anel alfa separadamente e mescla SourceGraphic por último para mostrar as cores originais.

Fontes

1. W3C — Filter Effects Level 1 — Define a vizinhança retangular da morfologia, as entradas de composição e o recorte da região do filtro.
2. MDN — radius — Define a sintaxe de raio com um e dois valores, as unidades e os valores que desativam o efeito.
3. MDN — operator — Distingue operações de morfologia de operações de composição.
4. MDN — primitiveUnits — Estabelece o sistema de coordenadas para o raio da morfologia.
5. MDN — filterUnits — Estabelece o sistema de coordenadas para a região externa do filtro.

Se sua origem existe apenas em raster, prepare arte vetorial com o PerfectVector, verifique a silhueta e as aberturas sem filtro, adicione o contorno e compare o arquivo final no visualizador de destino.