How to apply a style to an embedded SVG?

html css svg

When an SVG is directly included in a document using the <svg> tag, you can apply CSS styles to the SVG via the document's stylesheet. However, I am trying to apply a style to an SVG which is embedded (using the <object> tag).

Is it possible to use anything such as the following code?

object svg { 
    fill: #fff; 
}

I came up with a lightweight way to do this which would work great for what you are trying to do. See this Q&A: stackoverflow.com/questions/11978995/…

Here's an answer that actually gets the job done (from Manipulating external svg file style properties with CSS.)

Toby Allen

Short answer: no, since styles don't apply across document boundaries.

However, since you have an <object> tag you can insert the stylesheet into the svg document using script.

Something like this, and note that this code assumes that the <object> has loaded fully:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

It's also possible to insert a <link> element to reference an external stylesheet:

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

Yet another option is to use the first method, to insert a style element, and then add an @import rule, e.g styleElement.textContent = "@import url(my-style.css)".

Of course you can directly link to the stylesheet from the svg file too, without doing any scripting. Either of the following should work:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

or:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

Update 2015: you can use jquery-svg plugin for apply js scripts and css styles to an embedded SVG.

Is this a method to link an external stylesheet? If not, is that possible?

The above inserts a style element into the svg. Yes it's possible to insert an xhtml link element too for linking to an external stylesheet, or possibly an xml-stylesheet processing instruction (see w3.org/Style/styling-XML.html).

This is pretty awesome Erik! However, I couldn't manage to get this trick to work in Chrome without including svgweb: code.google.com/p/svgweb ...Any idea's what I'm doing wrong?

@MattW-D: you should probably just open a new question for that. Svgweb is not needed in chrome.

Thank You Erik, was really struggling trying to get font-face to work in svg through css, linking the css into the svg worked first try and miraculously cross browser!

R Reveley

You can do this without javsscrpt by putting a style block with your styles inside the SVG file itself.

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

Waruyama

If the only reason for using the tag to inlcude the SVG is that you do not want to clutter your source code with the markup from the SVG, you should take a look at SVG injectors like SVGInject.

SVG injection uses Javascript to inject an SVG file inline into your HTML document. This allows for clean HTML source code while making the SVGs fully styleable with CSS. A basic example looks like this:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

Awesome! Thanks for the neat tool.

Ahmed Shehab

Based on @Erik Dahlström answer, found a short path as follow:


let svg_objecst = document.getElementsByClassName('svg-object')

const forceStylingObjSvg = (svg)=>{
    var svgDoc = svg.contentDocument;
    svgDoc.firstElementChild.setAttribute('fill','blue')
}
Array.from(svg_objecst).forEach((obj)=>{
    obj.addEventListener('load',()=>forceStylingObjSvg(obj))
})

Fabiano Bonin

You can create a custom element to inject the SVG file into your html.

This way, the SVG will be inlined, and you can easily apply styles using CSS.

This custom element will work just like the

How to apply a style to an embedded SVG?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US