[ programação ] 15 jun 2026 1 min de leitura

O SVG do Illustrator vaza estilo no seu HTML

Exportou dois SVGs do Illustrator e colou inline no HTML? Cuidado: cada um traz um <style> interno com classes genéricas (.cls-1, .cls-2) — e <style> dentro de SVG inline vale para o documento inteiro. O último sobrescreve o primeiro.

A correção é simples:

<!-- antes: estilo global vazando -->
<circle class="cls-1" ... />

<!-- depois: cor blindada no elemento -->
<circle fill="#141414" ... />

Remova o bloco <defs><style> e troque as classes por atributos fill diretos. Aprendi na prática, depurando o avatar deste site.

(Texto de exemplo — edite à vontade.)