Contornos pontilhados em SVG: espaçamento e pontas redondas

Para criar um contorno pontilhado em SVG, aplique um contorno à forma, defina stroke-linecap="round" e use um traço de comprimento zero seguido de um intervalo positivo, como stroke-dasharray="0 20". A largura do contorno controla o diâmetro dos pontos. O segundo número da lista controla a distância ao longo do traçado entre os centros dos pontos; ele não representa o espaço vazio entre suas bordas visíveis.

Essa diferença importa quando uma borda parece apertada depois que você arredonda suas pontas. Um emblema fechado acrescenta outro problema: a repetição pode chegar ao ponto inicial com um intervalo restante mais curto. Os exemplos abaixo separam o formato das pontas, o espaçamento visível e a emenda de fechamento para que você ajuste o valor certo.

Essas são configurações decorativas de contorno. Elas não criam um novo contorno deslocado nem transformam cada ponto pintado em um traçado de corte separado.

Compare pontas retas, pontas redondas e pontos

stroke-dasharray alterna comprimentos de traços pintados e intervalos sem pintura. Uma lista de dois números facilita a inspeção dessa repetição. A referência de dash-array da MDN também explica como uma lista com quantidade ímpar de valores se repete para formar uma sequência de comprimento par.

Copie este SVG independente para um arquivo e abra-o em um navegador. Cada traçado original tem 240 unidades de comprimento, com largura de contorno de 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

A primeira linha usa 12 20 com pontas retas. Seus traços completos ocupam 12 unidades e deixam 20 unidades de espaço visível. A segunda linha usa os mesmos números com pontas redondas. Cada ponta se estende 4 unidades além da extremidade do traço subjacente; assim, um traço completo ocupa 20 unidades e o intervalo visível diminui para 12.

A terceira linha muda o comprimento do traço para zero. As pontas redondas criam pontos de diâmetro 8, com centros separados por 20 unidades nesse traçado reto. O espaço visível entre suas bordas é de 12 unidades. As regras de pintura de SVG do W3C definem as pontas nas extremidades dos traços, incluindo o tratamento dos traços de comprimento zero; a referência de pontas da MDN explica sua geometria.

Para traços completos e separados em um segmento reto, sem calibração de distância nem transformação, os cálculos úteis são:

• Ponta reta: comprimento visível do traço = dash; intervalo visível = gap.
• Ponta redonda: comprimento visível do traço = dash + stroke-width; intervalo visível = gap - stroke-width.
• Ponto redondo: diâmetro = stroke-width; distância entre centros = gap; intervalo visível = gap - stroke-width.

Se o último cálculo resultar em zero ou em um valor negativo, os pontos se tocam ou se sobrepõem. Nas curvas, a distância ao longo do traçado é diferente da distância direta entre os pontos. Inspecione cantos e curvas em vez de aplicar o cálculo de intervalo em linha reta a todo o contorno.

Ajuste a repetição ao redor de um emblema fechado

Cada um dos traçados retangulares de emblema abaixo mede 180 por 120 unidades. Seu perímetro é 2 × (180 + 120) = 600. O traçado começa no canto superior esquerdo e segue no sentido horário.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

À esquerda, 0 32 posiciona os centros dos pontos nas distâncias 0, 32, 64 e assim por diante até 576 ao longo do traçado. Restam apenas 24 unidades antes de o traçado retornar ao início. O intervalo de fechamento é menor que os outros intervalos de 32 unidades, por isso a emenda é irregular. Aumentar o tamanho de exibição do SVG amplia essa diferença sem resolvê-la.

À direita, 0 30 divide o perímetro em 20 intervalos iguais. Nesse retângulo específico, os comprimentos dos dois lados também são divisíveis por 30, então os cantos se alinham com os pontos. Em cada lado reto, os pontos de 8 unidades deixam 22 unidades de espaço visível. Isso corrige a repetição do emblema escolhido; não é uma promessa de espaçamento visual idêntico em qualquer contorno curvo.

Para seu próprio contorno, escolha uma quantidade desejada de pontos e divida o perímetro do traçado por essa quantidade para obter uma distância inicial de repetição. Depois, confira o resultado renderizado, especialmente curvas, detalhes pequenos e o ponto de fechamento. Uma forma com vários subtraçados desconectados exige atenção separada, pois o padrão tracejado recomeça em cada subtraçado, conforme descreve a especificação de pintura de SVG.

stroke-dashoffset desloca a posição inicial do padrão ao longo do traçado. Ele pode levar uma emenda evidente para um lugar menos perceptível, mas não faz uma repetição de 32 unidades dividir 600. Use uma repetição ajustada quando o objetivo for um fechamento uniforme. A referência de dash-offset da MDN documenta esse ajuste de fase.

Abrimos os dois arquivos SVG independentes separadamente e conferimos sua renderização no navegador com esta comparação. Os exemplos usam valores sem unidade, sem calibração por pathLength, sem transformações e sem CSS externo. Eles demonstram esses traçados feitos manualmente, não uma conversão do PerfectVector nem um teste de compatibilidade entre aplicativos.

Mantenha o dimensionamento e as configurações de pintura consistentes

Comece com valores numéricos nas próprias coordenadas do SVG, como acima. Não troque esses valores por porcentagens supondo que elas representam a mesma fração do perímetro do traçado. A referência de dash-array descreve o cálculo das porcentagens em relação à área de visualização, e não ao comprimento do traçado.

Se você usar pathLength para normalizar as distâncias, calcule o padrão tracejado nesse sistema de distâncias calibradas. Evite misturar o perímetro sem calibração deste exemplo com valores de traços normalizados de outro trecho de código. O guia de animação de contornos SVG mostra um uso separado da calibração nativa de comprimento de traçado para revelar um desenho.

Defina fill="none" quando quiser somente a borda. Um preenchimento pode continuar visível mesmo quando parte do contorno está tracejada. Se os pontos esperados desaparecerem, confirme que o elemento tem um contorno visível e que nenhuma regra CSS substituiu seus atributos de apresentação. A lista de verificação para contornos ausentes aborda essas verificações antes de você começar a alterar o espaçamento.

Deixe espaço suficiente ao redor da geometria para o contorno. Um contorno de 8 unidades se estende além do traçado, e as pontas redondas se estendem além das extremidades abertas. O exemplo inclui margens para que os pontos não sejam recortados pela área de visualização. Teste o SVG entregue no tamanho real de exibição; pontos minúsculos que parecem distintos em uma prévia ampliada podem ser difíceis de enxergar em um ícone.

Separe a preparação da arte do desenho da borda

Se o motivo dentro de um emblema existe somente como PNG ou JPG, o fluxo de imagem para vetor do PerfectVector pode preparar uma arte SVG editável para esse motivo. Compare a silhueta, as pequenas aberturas e as regiões separadas com a imagem original antes de colocá-la dentro da borda. Mantenha o contorno decorativo como uma forma separada para poder alterar sua largura e o espaçamento dos pontos de maneira independente.

Mantenha um arquivo mestre vetorial existente quando ele estiver disponível. Um retângulo ou outra borda simples costuma ser fácil de desenhar diretamente em um editor. A vetorização não projeta automaticamente uma borda deslocada, não recupera uma única linha central nem escolhe o espaçamento dos traços. Se uma marca grossa vetorizada tem dois limites, o guia de SVG de linha única explica por que isso difere de uma única rota de desenho.

Em um fluxo de corte, não suponha que a máquina interpretará a pintura decorativa do contorno como cortes individuais em formato de ponto. Prepare a geometria pretendida em um editor e inspecione a prévia do aplicativo de destino. Este artigo testa a pintura no navegador, não o comportamento de uma máquina de corte. Os guias de edição do blog abordam decisões relacionadas à preparação dos arquivos.

Confira o contorno final

Antes de aceitar o arquivo, inspecione separadamente o traçado aberto curto e a borda fechada. Confirme o estilo das pontas, a largura do contorno e os números de repetição; depois, inspecione a primeira e a última marca do traçado aberto e a junção do traçado fechado. Confira as curvas apertadas no tamanho em que a arte será usada.

Reabra o SVG salvo no destino pretendido. Se você precisa de pintura decorativa editável, mantenha as propriedades do contorno. Se o destino exige contornos permanentes, execute e verifique essa conversão como uma etapa de edição separada. Guarde uma cópia editável do arquivo de origem para poder revisar o espaçamento depois.

Perguntas frequentes

Por que meus traços parecem mais próximos depois que escolho pontas redondas? As pontas redondas se estendem além das duas extremidades do traço. Em um segmento reto, o intervalo visível entre traços completos é o intervalo especificado menos a largura do contorno, desde que as marcas continuem separadas.

Como faço pontos redondos em vez de pequenas cápsulas? Use um traço de comprimento zero, um intervalo positivo e pontas redondas. Por exemplo, uma largura de contorno de 8 com stroke-dasharray="0 20" produz pontos de 8 unidades com centros separados por 20 unidades em um traçado reto.

Por que um dos intervalos é diferente ao redor de um contorno fechado? A repetição pode não dividir o perímetro de maneira exata. Ajuste a repetição ao comprimento do traçado e inspecione o ponto de fechamento e os cantos. Deslocar o padrão muda sua fase, mas não corrige a diferença aritmética.

Fontes

1. MDN — stroke-dasharray — define a lista alternada de traços e intervalos e o tratamento de seus valores.
2. MDN — stroke-linecap — explica a geometria das pontas retas e redondas e o comportamento em comprimentos zero.
3. W3C — pintura de SVG — especifica a pintura dos traços, o tratamento das pontas e o comportamento do padrão nos subtraçados.
4. MDN — stroke-dashoffset — define o deslocamento usado para mover um padrão tracejado.

Se o motivo do seu emblema começa como uma imagem raster, prepare uma versão candidata em SVG com o PerfectVector, inspecione seus contornos e aberturas e acrescente a borda pontilhada como uma forma editável separada.