Técnicas de Cor em SVG: Fill, Stroke e Gradientes

SVG (Scalable Vector Graphics) tem seu próprio sistema de cores, paralelo mas separado do HTML/CSS. Entender como o SVG lida com cor abre as portas para ícones independentes de resolução, ilustrações animadas e efeitos de gradiente que escalam perfeitamente para qualquer tamanho de tela. Este guia aborda todas as principais técnicas de cor em SVG, desde fill e stroke básicos até gradientes complexos, com exemplos práticos ao longo do texto.

O Atributo Fill em SVG

O atributo fill controla a cor dentro de uma forma. É o equivalente SVG de background-color para elementos HTML. Toda forma SVG — <rect>, <circle>, <path>, <polygon>, <ellipse> — aceita fill.

Valores Básicos de Fill

Fill aceita todos os mesmos formatos de cor que o CSS:

<!-- Cores hex -->
<circle cx="50" cy="50" r="40" fill="#3B82F6" />

<!-- Cores nomeadas -->
<rect width="100" height="60" fill="tomato" />

<!-- RGB -->
<polygon points="50,10 90,90 10,90" fill="rgb(34, 197, 94)" />

<!-- HSL -->
<ellipse cx="60" cy="40" rx="50" ry="30" fill="hsl(220, 80%, 55%)" />

<!-- Fill transparente -->
<circle cx="50" cy="50" r="40" fill="none" stroke="#EF4444" stroke-width="3" />

Um fill="none" remove o fill completamente, deixando visível apenas o stroke — padrão comum para ícones de contorno.

Opacidade do Fill

O atributo fill-opacity controla a transparência independentemente da cor:

<!-- Sobreposição semitransparente -->
<rect width="200" height="120" fill="#1E3A8A" fill-opacity="0.3" />

<!-- Ou usando rgba() diretamente -->
<rect width="200" height="120" fill="rgba(30, 58, 138, 0.3)" />

<!-- Ou usando hex de 8 dígitos -->
<rect width="200" height="120" fill="#1E3A8A4D" />

Os três exemplos acima produzem o mesmo resultado. O atributo fill-opacity tem suporte ligeiramente melhor em renderizadores SVG mais antigos, enquanto rgba() e hex de 8 dígitos exigem versões modernas do navegador. Para qualquer coisa destinada a navegadores modernos, os três são equivalentes.

Regra de Fill

Quando um path se cruza consigo mesmo, o atributo fill-rule determina quais áreas são consideradas internas:

<!-- evenodd: áreas alternadas preenchidas e vazias (para formas em donut, estrelas) -->
<path d="M50,10 L61,35 L90,35 L68,57 L79,82 L50,65 L21,82 L32,57 L10,35 L39,35 Z"
      fill="#F59E0B"
      fill-rule="evenodd" />

<!-- nonzero (padrão): a maioria das áreas é preenchida -->
<path d="..." fill="#3B82F6" fill-rule="nonzero" />

A regra evenodd é particularmente útil para formas de estrela e designs de path ocos. Sem ela, uma estrela de cinco pontas desenhada como um único path preenche o centro — evenodd deixa o centro vazio.

Propriedades de Stroke em SVG

O stroke desenha uma linha ao longo do path ou do contorno da forma. Ao contrário do border do HTML, os strokes SVG são centralizados na borda do path por padrão, estendendo-se igualmente para dentro e para fora da forma.

Atributos Básicos de Stroke

<!-- Cor e largura do stroke -->
<circle cx="60" cy="60" r="40"
        fill="none"
        stroke="#0EA5E9"
        stroke-width="4" />

<!-- Stroke em uma forma preenchida -->
<rect width="120" height="80" rx="8"
      fill="#DBEAFE"
      stroke="#2563EB"
      stroke-width="2" />

Padrões de Traço do Stroke

Os atributos stroke-dasharray e stroke-dashoffset criam linhas tracejadas e efeitos de desenho animado:

<!-- Traços simples: traço de 10px, espaço de 5px -->
<line x1="10" y1="50" x2="290" y2="50"
      stroke="#64748B"
      stroke-width="2"
      stroke-dasharray="10 5" />

<!-- Pontos: traço muito curto, espaço maior -->
<line x1="10" y1="50" x2="290" y2="50"
      stroke="#EF4444"
      stroke-width="3"
      stroke-dasharray="1 8"
      stroke-linecap="round" />

<!-- Padrão irregular -->
<path d="M10,50 Q150,10 290,50"
      fill="none"
      stroke="#8B5CF6"
      stroke-width="2"
      stroke-dasharray="15 5 3 5" />

A clássica animação de desenho em SVG usa stroke-dashoffset:

/* Animação CSS: o path se "desenha" ao carregar a página */
.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-in-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Extremidades e Junções de Stroke

stroke-linecap controla a aparência das extremidades das linhas. stroke-linejoin controla como os cantos do path se encontram:

<!-- Cap butt (padrão): extremidades cortadas rentes -->
<line x1="20" y1="20" x2="180" y2="20"
      stroke="#1A1A2E" stroke-width="12"
      stroke-linecap="butt" />

<!-- Cap round: extremidades com semicírculos -->
<line x1="20" y1="50" x2="180" y2="50"
      stroke="#3B82F6" stroke-width="12"
      stroke-linecap="round" />

<!-- Cap square: extremidades se estendem além do ponto final -->
<line x1="20" y1="80" x2="180" y2="80"
      stroke="#22C55E" stroke-width="12"
      stroke-linecap="square" />

stroke-linecap="round" é a escolha padrão para strokes de ícones — proporciona uma aparência suave e amigável que funciona bem em todos os tamanhos.

Opacidade do Stroke

Assim como fill-opacity, stroke-opacity controla a transparência do stroke:

<circle cx="60" cy="60" r="40"
        fill="none"
        stroke="#EF4444"
        stroke-width="6"
        stroke-opacity="0.5" />

Gradientes Lineares em SVG

O SVG define gradientes em blocos <defs> e os referencia por ID. Essa separação entre definição e uso permite que uma única definição de gradiente seja aplicada a múltiplas formas.

Definindo um Gradiente Linear

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#3B82F6" />
      <stop offset="100%" stop-color="#1E3A8A" />
    </linearGradient>
  </defs>

  <rect width="300" height="200" fill="url(#blueGradient)" />
</svg>

Os atributos x1/y1/x2/y2 definem a direção do gradiente como um vetor dentro da bounding box da forma:

Múltiplas Paradas de Cor

<defs>
  <linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   stop-color="#FF6B6B" />
    <stop offset="50%"  stop-color="#FFC300" />
    <stop offset="100%" stop-color="#FF3C00" />
  </linearGradient>
</defs>

Isso produz um gradiente de pôr do sol de #FF6B6B passando por #FFC300 até #FF3C00.

Unidades do Gradiente

Por padrão (gradientUnits="objectBoundingBox"), as coordenadas do gradiente são porcentagens da bounding box da forma. Com gradientUnits="userSpaceOnUse", as coordenadas ficam no espaço de pixels do canvas SVG:

<defs>
  <!-- Coordenadas absolutas em pixels SVG -->
  <linearGradient id="absGradient"
                  x1="0" y1="0" x2="300" y2="0"
                  gradientUnits="userSpaceOnUse">
    <stop offset="0%"   stop-color="#667EEA" />
    <stop offset="100%" stop-color="#764BA2" />
  </linearGradient>
</defs>

userSpaceOnUse é útil quando múltiplas formas compartilham um único gradiente grande que abrange todo o canvas SVG.

Animando Paradas de Gradiente

O SVG suporta animação SMIL nativa dentro das definições de gradiente:

<linearGradient id="animGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#3B82F6">
    <animate attributeName="stop-color"
             values="#3B82F6; #8B5CF6; #EC4899; #3B82F6"
             dur="4s"
             repeatCount="indefinite" />
  </stop>
  <stop offset="100%" stop-color="#1E3A8A">
    <animate attributeName="stop-color"
             values="#1E3A8A; #5B21B6; #9D174D; #1E3A8A"
             dur="4s"
             repeatCount="indefinite" />
  </stop>
</linearGradient>

Isso anima as cores do gradiente em um ciclo azul → roxo → rosa → azul. As animações CSS não conseguem animar diretamente as cores de parada de gradiente (apenas propriedades personalizadas CSS via @property podem), portanto a animação SMIL do SVG é a abordagem mais direta para esse efeito.

Gradientes Radiais em SVG

Os gradientes radiais em SVG irradiam de um ponto central (o ponto focal) até um círculo externo. Eles suportam dois centros independentes: o centro do gradiente (cx/cy) e o ponto focal (fx/fy).

Gradiente Radial Básico

<defs>
  <radialGradient id="glowGradient" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#FFF176" />
    <stop offset="100%" stop-color="#F57F17" />
  </radialGradient>
</defs>

<circle cx="150" cy="100" r="80" fill="url(#glowGradient)" />

Isso cria um brilho semelhante ao sol: amarelo claro #FFF176 no centro, aprofundando para âmbar #F57F17 nas bordas.

Ponto Focal Deslocado do Centro

Definir fx/fy separadamente de cx/cy cria um efeito de perspectiva — como uma esfera iluminada de um lado:

<defs>
  <radialGradient id="sphereGradient"
                  cx="50%" cy="50%" r="50%"
                  fx="35%" fy="35%">
    <stop offset="0%"   stop-color="#A8E6CF" stop-opacity="1" />
    <stop offset="60%"  stop-color="#2D6A4F" stop-opacity="1" />
    <stop offset="100%" stop-color="#1B4332" stop-opacity="1" />
  </radialGradient>
</defs>

<circle cx="150" cy="150" r="120" fill="url(#sphereGradient)" />

O agrupamento de destaque em 35%, 35% (superior esquerdo) dá ao círculo uma aparência tridimensional de esfera.

Parada Transparente para Efeitos de Brilho

Usar paradas transparentes cria sobreposições de brilho:

<defs>
  <radialGradient id="glowOverlay" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#60A5FA" stop-opacity="0.8" />
    <stop offset="100%" stop-color="#60A5FA" stop-opacity="0" />
  </radialGradient>
</defs>

<!-- Fundo escuro -->
<rect width="300" height="200" fill="#0F172A" />
<!-- Sobreposição de brilho -->
<rect width="300" height="200" fill="url(#glowOverlay)" />

Use o Gerador de Gradiente para experimentar combinações de cores antes de se comprometer com o código de gradiente SVG. Defina as cores de início e fim visualmente e copie os valores hex para seus atributos stop-color.

A Palavra-chave currentColor

currentColor é uma das técnicas de cor mais poderosas em SVG. Ela faz com que um elemento SVG herde sua cor da propriedade CSS color de seu elemento HTML pai, permitindo que o CSS controle as cores do SVG sem tocar na marcação SVG.

Como currentColor Funciona

<!-- HTML: a propriedade CSS color em cascata entra no SVG -->
<button class="icon-button" style="color: #3B82F6;">
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5" />
  </svg>
  Exportar
</button>

.icon-button {
  color: #3B82F6;      /* Ícone preenchido com azul */
}

.icon-button:hover {
  color: #1D4ED8;      /* Ícone preenchido com azul escuro no hover */
}

.icon-button:disabled {
  color: #9CA3AF;      /* Ícone preenchido com cinza quando desabilitado */
}

Nenhuma regra adicional específica de SVG é necessária — uma declaração color controla todos os estados.

currentColor em Strokes

A palavra-chave funciona igualmente bem para strokes:

<svg viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round">
  <circle cx="12" cy="12" r="10" />
  <polyline points="12 6 12 12 16 14" />
</svg>

Esse ícone de relógio herda sua cor de stroke do valor CSS color pai — uma única propriedade CSS muda tanto a cor do ícone quanto a de qualquer texto adjacente.

Misturando currentColor com Cores Fixas

Você pode combinar currentColor com cores fixas em um único SVG para ícones multicoloridos:

<svg viewBox="0 0 24 24">
  <!-- Corpo: herda de currentColor -->
  <path fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
  <!-- Badge: cor de destaque fixa -->
  <circle cx="18" cy="6" r="4" fill="#EF4444" />
</svg>

Esse padrão é comum para badges de notificação: a cor principal do ícone segue a cor do texto pai, mas o badge permanece vermelho independentemente do contexto.

Estilização de SVGs com CSS

Quando o SVG está inline no HTML (não em uma tag <img>), o CSS padrão pode estilizá-lo diretamente. Isso permite propriedades customizadas CSS, pseudo-classes, transições e animações — muito mais flexível do que atributos SVG isolados.

CSS Sobrescreve Atributos de Apresentação SVG

O CSS tem maior especificidade do que os atributos de apresentação SVG (os atributos fill="" e stroke="" diretamente na marcação SVG). Isso significa que você pode sobrescrever qualquer atributo com CSS:

/* Sobrescreve qualquer atributo fill inline */
.icon-danger path {
  fill: #EF4444;
}

/* Sobrescreve stroke para uma variante específica */
.icon-outline circle,
.icon-outline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

Propriedades Customizadas CSS em SVG

Propriedades customizadas cascateiam em elementos SVG inline, habilitando temas dinâmicos:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"
          fill="var(--chart-primary, #3B82F6)"
          stroke="var(--chart-border, #1E3A8A)"
          stroke-width="2" />
</svg>

:root {
  --chart-primary: #3B82F6;
  --chart-border:  #1E3A8A;
}

[data-theme="dark"] {
  --chart-primary: #60A5FA;
  --chart-border:  #93C5FD;
}

O elemento SVG recebe automaticamente as cores do modo escuro quando o tema muda — sem nenhum JavaScript.

Transições CSS em SVG

As transições CSS funcionam em propriedades de cor SVG:

.icon path {
  fill: #6B7280;
  transition: fill 200ms ease;
}

.icon:hover path {
  fill: #3B82F6;
}

Isso produz uma transição de cor suave ao passar o mouse sobre o ícone — impossível com atributos SVG isolados.

Recorte e Mascaramento para Efeitos de Cor

Para efeitos avançados, clip-path CSS e máscaras SVG podem revelar gradientes através de formas complexas:

<!-- Texto com gradiente usando SVG -->
<svg viewBox="0 0 400 100">
  <defs>
    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#667EEA" />
      <stop offset="100%" stop-color="#764BA2" />
    </linearGradient>
  </defs>
  <text x="10" y="80" font-size="72" font-weight="bold"
        fill="url(#textGrad)">ColorFYI</text>
</svg>

O Gerador de Gradiente pode ajudá-lo a criar os pares de cores do gradiente. Use o Conversor de Cor para traduzir qualquer cor HSL ou RGB que você tenha em mente para os valores hex necessários nos atributos stop-color do SVG.

Compatibilidade de Formatos de Cor

Os atributos de cor SVG aceitam os mesmos formatos que o CSS, mas há algumas notas de compatibilidade que vale conhecer:

Para máxima compatibilidade em fills SVG, use códigos hex de 6 dígitos. Para transparência, prefira fill-opacity em vez de hex de 8 dígitos ou rgba() se precisar suportar renderizadores SVG mais antigos (como SVGs usados em pipelines de exportação para PDF).

Principais Conclusões

• O SVG usa os atributos fill e stroke para colorir formas e paths, respectivamente. Ambos aceitam todos os formatos de cor CSS padrão, incluindo hex, RGB, HSL e cores nomeadas.
• fill-opacity e stroke-opacity controlam a transparência independentemente da cor, com compatibilidade ligeiramente melhor em ambientes SVG mais antigos do que hex de 8 dígitos ou rgba().
• Os gradientes SVG são definidos em blocos <defs> com um id único e aplicados usando fill="url(#id)". Gradientes lineares usam coordenadas vetoriais para direção; gradientes radiais suportam ponto focal independente (fx/fy) para efeitos de perspectiva.
• A palavra-chave currentColor é a técnica de cor SVG mais importante para sistemas de ícones — ela herda a propriedade CSS color, permitindo que uma única regra CSS controle a cor do ícone em todos os estados (hover, desabilitado, ativo).
• SVG inline pode ser estilizado com CSS padrão, incluindo propriedades customizadas, seletores de pseudo-classe e transições — tornando o tema dinâmico e as animações interativas simples.
• Use o Gerador de Gradiente para criar visualmente pares de cores de gradiente e o Conversor de Cor para traduzir cores entre os formatos necessários para atributos SVG.