Unidades de gradiente SVG: uma transição entre traçados

Para distribuir um gradiente entre traçados SVG separados, use gradientUnits="userSpaceOnUse", defina os extremos nas coordenadas da arte e mantenha os traçados no mesmo sistema de coordenadas. Cada traçado então revela a parte da transição correspondente à sua posição. Você pode manter as partes do logo editáveis separadamente.

O padrão, objectBoundingBox, ajusta o gradiente a cada elemento pintado. Referenciar o mesmo ID de gradiente em três traçados pode, portanto, produzir três transições completas de roxo para laranja. Alterar as unidades corrige essa repetição, mas um filho transformado ainda pode deslocar sua própria pintura. A referência de gradientUnits da MDN define o espaço de referência como o espaço atual do usuário do elemento que usa o gradiente.

Este passo a passo usa um emblema original de três partes desenhado diretamente como traçados SVG. Se você já tem um logo vetorial, trabalhe a partir desse mestre. Uma imagem original disponível somente em raster precisa de recuperação de geometria antes dessa etapa de edição da pintura; o guia mais amplo de vetorização de gradientes explica essa escolha.

Decida se a transição pertence a cada forma ou à marca inteira

Use pintura relativa ao objeto quando cada parte deve ter sua própria transição completa. Use extremos compartilhados no espaço do usuário quando as partes esquerda e direita devem obter cores diferentes de uma única transição.

Colocar fill="url(#brandBlend)" em um grupo transmite o preenchimento aos filhos. Isso não faz um gradiente baseado na caixa delimitadora medir a silhueta combinada do grupo. Os filhos ainda recebem sua própria pintura. A especificação de servidores de pintura SVG descreve gradientes como recursos referenciados pelo preenchimento ou contorno de um elemento.

Um emblema, quatro escolhas de coordenadas

Defina extremos que abranjam a arte

Os traçados do exemplo ocupam posições horizontais de x=30 a x=310. Esses são os extremos da transição. O triângulo termina em x=125, o bloco central ocupa de 140 a 210, e a forma direita vai de 225 a 310.

Salve isto como shared-logo.svg e abra-o em um navegador:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Você deve ver um triângulo roxo, um bloco central principalmente rosa e uma forma direita em tons de laranja, como em B. Os espaços vazios ocultam trechos da mesma transição; a cor não recomeça quando o próximo traçado começa. Altere uma parada de cor e as três partes serão atualizadas, pois referenciam a mesma definição.

Para uma comparação direta com A, substitua os atributos gradientUnits, x1, y1, x2 e y2 do gradiente por x1="0%" y1="0%" x2="100%" y2="0%". Omitir gradientUnits restaura o padrão. Cada forma agora recebe a transição completa de cores.

As porcentagens também têm outra referência: com userSpaceOnUse, elas se referem à área de visualização SVG atual, em vez da caixa delimitadora do objeto pintado. Números explícitos tornam este exemplo mais fácil de inspecionar. Um logo que ocupa apenas parte de um viewBox grande não precisa usar toda a largura desse viewBox para sua transição.

Confira as transformações quando uma parte tiver a cor errada

Em C, a forma direita parece ter permanecido no lugar. Suas coordenadas de traçado foram movidas 60 unidades para a esquerda, e um grupo filho a moveu 60 unidades para a direita:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Substitua o terceiro traçado do exemplo completo por esse grupo para reproduzir a diferença. Sua borda esquerda visível permanece em x=225, mas sua borda esquerda local está em x=165. O gradiente usa esse espaço local, então a parte recebe uma porção anterior e mais rosada da transição. userSpaceOnUse não é uma promessa de um único sistema global de coordenadas, independentemente das transformações aninhadas.

Para este emblema, restaure as coordenadas originais do terceiro traçado e remova sua translação particular. Se o logo inteiro precisa ser movido, aplique transform="translate(10 0)" ao grupo externo existente. Isso produz D: as três formas e sua pintura compartilhada se movem juntas.

Essa correção funciona porque os traçados já estão expressos em um sistema comum de coordenadas. Colocar filhos transformados sem relação entre si dentro de mais um grupo não remove suas transformações individuais. Para um logo importado, inspecione essas transformações antes de incorporá-las à geometria ou reescrevê-la, e preserve uma cópia do mestre original.

Quando gradientTransform é útil

gradientTransform altera o mapeamento de coordenadas da pintura sem alterar a geometria do traçado. Ele é útil quando você deliberadamente precisa girar, inclinar ou reposicionar uma transição. A MDN o documenta como uma transformação adicional, aplicada depois que o sistema de coordenadas escolhido por gradientUnits é estabelecido.

Evite ajustar uma definição compartilhada para compensar um único filho sem conferir os demais. Toda forma que referencia essa definição pode ser afetada. A arte em um espaço comum é mais fácil de manter para o logo simples daqui; uma arte importada mais complexa pode precisar de definições de gradiente mapeadas separadamente.

Onde o PerfectVector entra

Se o único arquivo original é um logo PNG ou JPG, o PerfectVector pode ajudar a recuperar geometria vetorial editável antes de você reconstruir o gradiente coordenado. Vetorize o logo e inspecione a silhueta, os vazados e as partes distintas no editor. Use essas formas como ponto de partida para a pintura compartilhada.

A demonstração acima foi feita manualmente para isolar o comportamento das coordenadas; não é um resultado de conversão do PerfectVector. Não se deve supor que vetorizar pixels sombreados recuperará as paradas de cor do gradiente original ou suas configurações de coordenadas. Um logo simples também pode ser mais rápido de redesenhar manualmente. Mantenha um SVG, AI ou PDF vetorial existente quando houver um disponível.

Para uma forma que não aceita um novo preenchimento, use as verificações de recoloração de SVG antes de alterar as coordenadas do gradiente. Se a mesma exportação difere entre aplicativos, siga o diagnóstico de mudança de cor em SVG.

Reabra o arquivo antes de entregá-lo

Salve um novo SVG e teste o arquivo exato, não apenas a tela do editor. Confira o seguinte:

• O ID do gradiente existe e cada traçado pretendido o referencia.
• A transição cobre os limites do logo na direção pretendida.
• Mover a marca inteira mantém as cores coordenadas.
• As partes separadas continuam selecionáveis onde você precisa editá-las.
• O aplicativo de destino preserva a aparência esperada.

Uma renderização suave no navegador demonstra o comportamento da pintura nesse navegador. Ela não comprova suporte em todos os editores nem transforma o gradiente em geometria de corte. Mantenha uma versão de cores chapadas para fluxos que precisam de formas sólidas e preserve o mestre SVG editável. O guia de arquivos SVG explica a diferença entre o conteúdo geométrico do arquivo e sua aparência exibida.

Perguntas frequentes

Preciso unir os traçados para compartilhar um gradiente? Não. Traçados separados podem referenciar um único gradiente. Use userSpaceOnUse com extremos adequados e certifique-se de que os traçados compartilham o sistema de coordenadas pretendido.

Por que agrupar os traçados ainda repete o gradiente? Um grupo pode transmitir seu preenchimento aos traçados filhos, mas um gradiente objectBoundingBox ainda usa os limites de cada filho pintado. Defina extremos no espaço do usuário quando a transição deve abranger toda a marca.

Por que a cor de um traçado mudou depois que o movi para um grupo? Uma transformação nesse grupo pode alterar o sistema local de coordenadas do traçado. Compare suas transformações com as dos outros traçados e teste o SVG exportado antes de ajustar o gradiente compartilhado.

Fontes

1. MDN — gradientUnits — Define o padrão, os sistemas de coordenadas de referência e o comportamento das porcentagens.
2. Grupo de Trabalho SVG — servidores de pintura — Especifica a pintura reutilizável de gradientes, as paradas de cor e o comportamento de extensão.
3. MDN — gradientTransform — Explica as transformações adicionais das coordenadas de gradiente.

Você está começando com um logo raster? Transforme seu logo em traçados SVG editáveis, inspecione as formas separadas, reconstrua o gradiente compartilhado e reabra a exportação final para conferir seu alinhamento.