SVG clipPath ou mask: bordas duras ou suaves

Use um <clipPath> SVG quando quiser que uma imagem termine em um contorno definido. Use uma <mask> SVG quando a imagem deva desaparecer gradualmente por transparência parcial. Uma máscara também pode fazer um corte rígido, mas um traçado de recorte expressa a intenção mais simples de uma borda geométrica dura. A especificação CSS Masking define esses recursos como operações separadas de visibilidade.

A escolha importa quando uma imagem em formato de logo vai para outro editor. Ambos os métodos controlam o que você vê; nenhum transforma os pixels ocultos em geometria excluída nem converte a imagem em traçados vetoriais. Este guia usa uma cena raster original e um contorno, mudando apenas a regra de visibilidade. Você pode aplicar o mesmo teste à sua arte antes de exportar.

Escolha pela borda necessária

A borda visível de um recorte ainda pode ter antisserrilhamento normal de renderização. O que ela não expressa é uma faixa deliberada de visibilidade parcial a partir de um gradiente de tons de cinza ou opacidade dentro da forma recortada. O tutorial de recorte e máscaras do MDN mostra essa distinção com pequenos exemplos SVG.

Compare uma imagem com três regras de visibilidade

Para este teste, desenhei uma pequena paisagem, rasterizei-a em um PNG de 400 × 240 e coloquei os mesmos pixels sob o mesmo contorno semelhante a uma folha em todos os painéis. O painel esquerdo recorta por esse contorno. O central usa uma máscara de luminância de branco a preto; o direito usa uma máscara alfa de opaco a transparente. Os dois gradientes foram escolhidos para criar a mesma transição da esquerda para a direita. Cada resultado aparece sobre fundos claros e escuros, facilitando avaliar a borda que desaparece.

As duas colunas de máscaras parecem semelhantes aqui por um motivo: o gradiente de luminância de branco a preto e o gradiente de opacidade branca codificam valores comparáveis de máscara. Não são entradas intercambiáveis. Preto opaco oculta na máscara de luminância, mas permanece visível na máscara alfa. No modo alfa, a opacidade do pixel determina o resultado; sua cor preta ou branca, não. A definição de processamento de máscaras de CSS Masking especifica os dois cálculos.

Construa o recorte e a máscara a partir de um contorno

Salve o seguinte como clip-or-mask.svg, coloque seu próprio photo.png ao lado dele e sirva os dois arquivos da mesma pasta por HTTP. As duas imagens usam um sistema de coordenadas de 400 × 240. Diferem apenas em clip-path versus mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Os IDs de referência devem ser únicos dentro do SVG. O recorte e a máscara usam userSpaceOnUse para que as coordenadas do motivo se alinhem com a área local de 400 × 240 de cada imagem. A referência de <clipPath> do MDN descreve o recorte como restrição de pintura sem mudar a geometria inerente do alvo. A referência de <mask> do MDN separa maskUnits, que posiciona a região da máscara, de maskContentUnits, que posiciona sua arte.

Para experimentar luminância, duplique a máscara com outro ID, defina mask-type="luminance" e mude as paradas do gradiente para branco opaco no início e preto opaco no final. Mantenha a referência mask sincronizada com esse novo ID. Por padrão, uma <mask> SVG usa luminância; este exemplo nomeia o modo para que uma edição futura não mude silenciosamente o significado do preto. Veja a referência de mask-type do MDN.

Confira o resultado antes de exportar

1. Renderize o SVG sobre um fundo claro e um escuro. Uma transição que parece invisível no branco pode ser evidente no escuro.
2. Confirme que a imagem e o motivo usam as mesmas coordenadas. Se você redimensionar apenas a imagem, o contorno pode deixar de se alinhar. Para recortes reutilizáveis em alvos de tamanhos diferentes, o guia de unidades clipPath explica as opções de coordenadas.
3. Se uma borda suave terminar abruptamente, inspecione x, y, width e height da máscara, além do gradiente. A região da máscara pode cortar arte fora de seus limites; ampliar apenas o gradiente não corrige uma região estreita. O MDN lista os padrões da região da máscara, mas limites explícitos são mais fáceis de revisar em uma entrega.
4. Reabra o SVG salvo no aplicativo que o usará. Uma renderização correta no navegador não estabelece que outro importador mantenha o recorte, a máscara, a imagem vinculada ou a editabilidade necessária.
5. Inspecione a estrutura do arquivo. Se ainda contém <image>, ainda contém pixels raster, embora o contorno de recorte seja vetorial. A verificação de raster incorporado mostra como identificar essa distinção.

A imagem deste exemplo permanece PNG. Recortes e máscaras não a vetorizam. Se sua tarefa exigir geometria real de corte ou uma abertura transparente permanente, crie os traçados correspondentes no editor e inspecione a exportação. O guia de solução de aberturas preenchidas ajuda a distinguir uma abertura real de uma área branca que só parece vazia sobre uma área de desenho branca.

Onde o PerfectVector se encaixa

Se o contorno necessário existe apenas em um logo PNG ou JPG, o fluxo de imagem para vetor do PerfectVector pode fornecer um candidato SVG editável. Inspecione seu traçado externo, pequenos espaços e formas indesejadas de fundo antes de copiar um contorno para um <clipPath> ou <mask>. Você ainda escolhe o método de visibilidade e constrói o efeito em um editor SVG. Mantenha um original vetorial limpo existente quando disponível.

Você não precisa vetorizar uma fotografia apenas para colocá-la atrás de uma máscara. Deixe os pixels fotográficos como imagem quando preservar seus detalhes importar. Para um ícone de uma cor controlado por CSS, em vez de uma imagem dentro de SVG, o guia de máscaras CSS com SVG aborda esse fluxo separado.

Perguntas frequentes

Um clipPath SVG pode criar uma transição gradual? Não. Um traçado de recorte define quais partes do alvo ficam visíveis, além do antisserrilhamento comum em seu limite. Use uma máscara com valores intermediários de opacidade ou luminância para uma transição deliberada.

Preto oculta uma imagem em toda máscara SVG? Não. Preto opaco oculta na máscara de luminância, mas revela na máscara alfa porque o pixel ainda é opaco. Arte totalmente transparente oculta em ambos os modos.

Recortar ou mascarar transforma um PNG em arte vetorial? Não. Ambos mudam a visibilidade durante a renderização. Um SVG ainda pode conter uma <image> raster e precisar de vetorização por traçado ou edição de traçados separada para uma entrega apenas vetorial.

Fontes

1. W3C — CSS Masking Module Level 1 — Definições de recorte, mascaramento e valores de máscara alfa versus luminância.
2. MDN — Recorte e máscaras — Exemplos de recortes rígidos e máscaras suaves.
3. MDN — <clipPath> — Comportamento do recorte, escolha de coordenadas e geometria subjacente inalterada.
4. MDN — <mask> — Região da máscara, sistema de coordenadas do conteúdo e comportamento de referência.
5. MDN — mask-type — Interpretação alfa e de luminância da arte de máscara SVG.

Se um logo raster precisa primeiro de contornos editáveis, crie um candidato SVG com o PerfectVector, inspecione o traçado recuperado, aplique um recorte ou máscara e reabra o arquivo exportado no destino.