08.04.2025

Aplicando Estilos CSS ao SVG Usando a Tag Object

Resposta Rápida

CSS pode estilizar SVG incorporado da mesma forma que HTML comum. Aqui está um exemplo:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: red;" />
</svg>

Neste exemplo, o círculo adquire uma cor vermelha a partir do estilo especificado diretamente na marcação SVG.

Métodos para Estilizar SVG Incorporado

Dependendo de como o SVG é utilizado dentro do HTML, há várias maneiras de estilizar. Vamos explorá-las.

Método 1: Adicionando Estilo via JavaScript

Se o SVG estiver incorporado usando as tags <img> ou <object>, estilizar com CSS externo pode ser um desafio devido às limitações entre documentos. Nesse caso, os estilos podem ser aplicados ou um CSS externo pode ser vinculado usando JavaScript após a imagem ter sido totalmente carregada:

document.querySelector('img#meuSVG').addEventListener('load', function() {
  const svgDoc = this.contentDocument;
  const style = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
  style.textContent = `circle { fill: blue; }`; // Adicionando cor azul, a favorita de Picasso
  svgDoc.querySelector('svg').appendChild(style); // Voilà, mágica em ação!
});

Método 2: Usando Elementos Personalizados e Shadow DOM

Você pode criar um elemento SVG personalizado e encapsular seus estilos usando Shadow DOM com customElements.define(). O exemplo abaixo demonstra isso:

class CustomSvgElement extends HTMLElement {
  connectedCallback() {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    // Inserindo SVG e estilos como verdadeiros artistas de graffiti
    this.shadowRoot.appendChild(svg);
  }
}
customElements.define('custom-svg', CustomSvgElement); // E voilà, arte na sua frente!

Método 3: Usando Bibliotecas Externas (SVGInject)

Bibliotecas especiais como SVGInject ajudam a simplificar a estilização do SVG. Veja como funciona na prática:

<img src="imagem.svg" onload="SVGInject(this)" /> <!-- Injetando, estilizando e aperfeiçoando -->

Visualização

Imagine que você tem uma pintura (🖼️) e quer dar um charme especial. SVG é nossa tela, mas atualmente parece sem vida. Vamos usar estilos para dar vida a ela:

SVG sem estilo (🖼️): 
Sem graça e desinteressante.

SVG CSS Estilizado (🖼️🎨): 
Brilhante, chamativo, impossível de ignorar.

Com CSS, podemos fazer nosso SVG brilhar:

<svg>
  <!-- SVG original -->
</svg>
<style>
  svg { fill: blue; } /* 💡 Dando uma nova vida ao nosso SVG */
</style>

Agora nosso SVG brilha na galeria virtual:

Antes: [🖼️]
Depois: [🖼️💡]

Técnicas Avançadas de Estilização de SVG

Abaixo estão métodos que ajudarão a elevar suas habilidades de estilização de SVG ao próximo nível. Pronto para se tornar um verdadeiro mestre da estilização?

Técnica 1: CSS SVG com '@import'

Usando o comando @import, você pode armazenar os estilos do SVG separadamente e de forma organizada:

<svg>
  <style>
    @import url('estilos-externos.css'); // Importando estilos como um verdadeiro VIP
  </style>
</svg>

Técnica 2: Evitar Sobrescrever Atributos

Atributos embutidos do SVG como fill podem sobrescrever o CSS. Para evitar isso, é melhor remover tais atributos:

// Usando JavaScript para remover o atributo 'fill' enquanto insere o SVG no DOM

Técnica 3: Manipulando SVG em <object> e <iframe>

Para SVG usado com <object> ou <iframe>, os estilos podem ser aplicados diretamente inserindo-os ou folhas de estilo através do contentDocument:

const objectEl = document.querySelector('object#svgIncorporado');
objectEl.addEventListener('load', () => {
  const svgDoc = objectEl.contentDocument;
  const styleElement = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleElement.textContent = '/* Estilos SVG prontos para uso! */';
  svgDoc.documentElement.appendChild(styleElement); // E vamos lá!
});

Recursos Úteis

1. SVG e CSS - SVG: Gráficos Vetoriais Escaláveis | MDN — Conhecimento aprofundado sobre SVG e CSS no MDN.
2. Usando SVG | CSS-Tricks — Uma exploração fundamental de todos os aspectos de SVG e CSS no CSS-Tricks.
3. Estilizando e Animando SVGs com CSS — Smashing Magazine — O mundo colorido do SVG na Smashing Magazine.
4. SVG Inline vs Fontes de Ícone [CAGEMATCH] | CSS-Tricks — Uma comparação entre SVG inline e fontes de ícone no CSS-Tricks.
5. Um Guia Prático para Usar SVG na Web — Um guia para usar SVG de forma estilizada na internet.
6. Entendendo Sistemas de Coordenadas SVG e Transformações (Parte 1) — Sara Soueidan — Lições sábias de Sara Soueidan sobre sistemas de coordenadas e transformações SVG.
7. Gráficos Vetoriais Escaláveis (SVG) 2 — Uma especificação SVG detalhada do W3C.

Video

Navigation