Alinhamento de contorno SVG: por dentro ou por fora

Um contorno SVG é centralizado em seu traçado. Para fazer um contorno de 12 unidades ficar inteiramente dentro de uma forma fechada, desenhe um contorno de 24 unidades e recorte-o pela própria forma. Para colocar a mesma largura visível fora, desenhe o contorno de 24 unidades através de uma máscara que oculte o interior da forma. Guarde uma cópia do traçado original: o recorte e a máscara mudam o que é visível, não a geometria subjacente.

A propriedade proposta stroke-alignment aparece em um rascunho editorial de SVG Strokes, mas esse rascunho informa que a definição de contorno do SVG 2 permanece normativa. Para um arquivo que deve funcionar em vários navegadores e editores, construa e teste o resultado visível em vez de depender da propriedade proposta.

Veja onde o contorno pintado fica

Este emblema fechado original usa um traçado nos três painéis. Seu preenchimento verde-petróleo, contorno visível nominal de 12 unidades e espaço de documento ao redor permanecem iguais. A linha tracejada coral é o traçado central. No painel do meio, ela coincide com a borda externa da faixa azul; à direita, coincide com a borda interna.

O painel central mantém o limite externo pintado do emblema em seu traçado original. O painel externo amplia a área pintada em 12 unidades ao redor do traçado. Se o emblema quase tocar a borda do viewBox, essa pintura adicional poderá ser cortada. O guia de preenchimentos e contornos do MDN descreve contornos comuns como centralizados no traçado; a comparação acima renderiza as três construções em um tamanho.

Crie um contorno interno com recorte

Coloque o traçado fechado em <defs>. Reutilize-o uma vez como preenchimento e uma vez como recorte. Pinte uma segunda cópia com o dobro da largura de contorno desejada e restrinja esse contorno ao interior do traçado. Um recorte torna invisível tudo fora de sua forma; ele não exclui a metade oculta do contorno. Veja a referência de clipPath do MDN e nosso guia de coordenadas clipPath se um recorte importado se deslocar para longe da arte.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Aqui, o contorno de 24 unidades normalmente alcança 12 unidades de cada lado do traçado. O recorte remove sua metade externa, deixando uma faixa visível de 12 unidades por dentro. Coloque o preenchimento abaixo do contorno recortado, como no exemplo, se quiser que toda a faixa interna permaneça visível. Para traçados compostos com aberturas, inspecione as regras de preenchimento e recorte antes de presumir qual lado é o interior.

Crie um contorno externo com máscara

Uma faixa externa precisa da região de visibilidade inversa. A máscara abaixo é branca sobre a área do documento e preta dentro do emblema. Ela se aplica apenas à cópia do contorno, enquanto uma cópia sem máscara fornece o preenchimento. A região explícita da máscara deixa espaço para o contorno além da forma original.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Novamente, apenas metade do contorno centralizado de 24 unidades permanece, portanto a faixa externa visível tem 12 unidades de largura. Defina a região da máscara deliberadamente: o MDN documenta como maskUnits, maskContentUnits e as dimensões da região afetam uma máscara. O retângulo branco deve cobrir todo o contorno externo. Uma máscara pequena demais pode aparar justamente a borda que você queria preservar.

Existe um truque visual mais curto para um preenchimento opaco: pinte um contorno de largura dupla e depois pinte o preenchimento por cima com paint-order="stroke fill". Isso oculta a metade interna sob o preenchimento, mas o contorno ainda existe ali e pode reaparecer se o preenchimento ficar translúcido ou for removido. O MDN explica a ordem de pintura. Use a máscara explícita quando a faixa externa precisar permanecer uma construção visível distinta. Para um contorno derivado de toda uma silhueta alfa multicolorida, veja contornos morfológicos SVG; esse filtro muda a aparência preservando os traçados de origem.

Confira o SVG após a importação

Recortes e máscaras afetam a renderização, enquanto um aplicativo posterior pode exigir contornos preenchidos. Guarde um original editável e teste uma cópia de entrega no destino real:

1. Abra o SVG sozinho e depois insira-o no editor ou aplicativo de produção pretendido. Compare as bordas internas e externas no mesmo zoom.
2. Confira o viewBox ou a prancheta ao redor da versão externa. Deixe espaço para sua faixa de 12 unidades para fora e para junções em cantos agudos.
3. Inspecione a lista de objetos. Os exemplos contêm traçados reutilizáveis, um recorte ou máscara e um contorno ativo. Eles não criam um único contorno sólido.
4. Se o destinatário precisar de geometria preenchida, converta o contorno selecionado em uma cópia de entrega e inspecione as formas resultantes. Guarde a origem com contorno ativo para mudanças futuras de largura.

Se a linha desaparecer durante a exportação, use a lista de verificação de visibilidade de contornos para separar pintura ausente, recorte e suporte à importação. Se um contorno cobrir inesperadamente um preenchimento, nossa explicação de paint-order SVG mostra qual camada está sendo desenhada por último.

Onde o PerfectVector se encaixa

Estas etapas começam com um traçado SVG editável. Se o logo existe apenas como PNG ou JPG, o fluxo de vetorização de logos do PerfectVector pode criar um candidato SVG antes de você adicionar recorte ou máscara. Compare sua silhueta, seus cantos e suas aberturas com o original no tamanho pretendido de entrega. A vetorização recupera geometria candidata; não atribui alinhamento interno ou externo de contorno por você.

Se o traçado SVG original estiver disponível, edite-o diretamente. Traçar sua captura de tela acrescentaria uma etapa desnecessária de reconstrução e poderia mudar o limite que você tenta alinhar. Nosso guia de vetorização de logos ajuda a escolher entre traçar, redesenhar e preservar um original vetorial existente.

Perguntas frequentes

SVG suporta alinhamento interno ou externo de contorno? Um rascunho editorial de SVG Strokes descreve esses valores, mas informa que SVG 2 permanece como definição normativa de contorno. Para uma entrega portátil, use um recorte ou máscara testado em vez de depender da propriedade do rascunho.

Por que dobro a largura do contorno? Um contorno comum fica metade de cada lado do traçado. Um recorte ou máscara descarta uma metade. Um contorno de 24 unidades, portanto, deixa uma faixa interna ou externa visível de 12 unidades nestes exemplos.

Um recorte interno ou uma máscara externa cria contornos prontos para corte? Não. Eles mudam a aparência renderizada, enquanto o traçado e o contorno subjacentes permanecem. Se uma máquina de corte ou fornecedor precisar de contornos preenchidos, faça uma cópia separada de entrega, converta o contorno em traçados em um editor adequado e inspecione a geometria após importar.

Fontes

1. MDN — Preenchimentos e contornos — Define renderização de contornos centralizados e o comportamento de paint-order discutido aqui.
2. Grupo de Trabalho SVG do W3C — Rascunho editorial SVG Strokes — Estabelece os valores propostos de alinhamento e o status do rascunho em relação ao SVG 2.
3. MDN — Elemento clipPath — Define como a construção interna restringe a visibilidade.
4. MDN — Elemento mask — Define região de máscara e atributos de coordenadas usados na construção externa.
5. Alex Chan — Desenho de contornos internos e externos em SVG — Demonstra a abordagem de largura dupla com recorte e máscara usada como ponto de partida para nosso emblema original de teste.

Se seu logo ainda é uma imagem raster, crie um candidato SVG com o PerfectVector, inspecione seu limite de traçado, experimente a construção interna ou externa no editor e verifique o arquivo entregue no destino.