How to apply a style to an embedded SVG?

html

svg-styling

javascript

css

byAlex Kataev·Jan 23, 2025

CSS can style an inline SVG similar to how it styles HTML. Take a look:

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

In the above script, a red fill is applied to the circle element directly within the SVG's inline code.

Inline SVG styling methods

Styling your SVGs can be approached in a multitude of ways, depending on your use-case and how the SVGs are utilized within your HTML. Now let's get our hands dirty with some code.

Method 1: Append style with JavaScript

With embedded SVGs via an <img> or <object> tag, external CSS styling may not be possible due to cross-document boundaries. Instead, inject styles or an external stylesheet using JavaScript after the SVG is fully loaded:

document.querySelector('img#mySVG').addEventListener('load', function() {
  const svgDocument = this.contentDocument;
  const styleElement = svgDocument.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleElement.textContent = `circle { fill: blue; }`; // Injecting Picasso's favourite color
  svgDocument.querySelector('svg').appendChild(styleElement); // Voilà, Magician style!
});

Method 2: Custom Elements and Shadow DOM

By using customElements.define(), you can create a custom SVG element and protect its styles with Shadow DOM, Confused? Behold:

class CustomSvgElement extends HTMLElement {
  connectedCallback() {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    // Inject SVG content and styles here like a graffiti artist
    this.shadowRoot.appendChild(svg);
  }
}
customElements.define('custom-svg', CustomSvgElement); // Now, this is a masterpiece!

Method 3: External Libraries (SVGInject)

Sometimes, you need a helping hand. External libraries like SVGInject provide a smooth approach to inject and style SVGs, just like this:

<img src="image.svg" onload="SVGInject(this)" /> <!-- Inject, style and bake till golden-brown -->

Advanced SVG styling techniques

These methods would take your SVG styling game to the next level. Ready to wield the power of SVG styles?

Technique 1: SVG CSS via '@import' statement

Keep your SVG styles separate and organized using CSS's @import rule inside an SVG's style tag:

<svg>
  <style>
    @import url('external-styles.css'); // Importing styles, the VIP way!
  </style>
</svg>

Technique 2: Avoiding Attribute Overrides

Inline SVG attributes like fill may override your CSS properties. Tip: Remove such attributes and let CSS take the steering wheel:

// Fetch SVG with JavaScript, evict 'fill' attribute and insert to DOM

Technique 3: `<object>` & `<iframe>` SVG Handling

When using <object> or <iframe> for your SVGs, directly inject stylesheets or style blocks via accessing the contentDocument:

const objectEl = document.querySelector('object#embeddedSvg');
objectEl.addEventListener('load', () => {
  const svgDocument = objectEl.contentDocument;
  const styleEl = svgDocument.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleEl.textContent = '/* SVG styles reporting for duty! */';
  svgDocument.documentElement.appendChild(styleEl); // Off you go!
});