How to apply a style to an embedded SVG?
HtmlCssSvgHtml Problem Overview
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;
}
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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>
Solution 3 - Html
If the only reason for using the
Solution 4 - Html
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))
})
Solution 5 - Html
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 <object> or <embed> tags. The only difference is that <object> or <embed> tags injects the data in a shadow root, which prevents styling from the parent document, while <custom-svg> injects the data in the document itself.
I have tried too many ways to style my SVG images, and this was the easiest and more flexible way i have found so far.
<html>
<head>
<style>
.blue {
fill: blue;
}
.red {
fill: red;
}
</style>
</head>
<body>
<custom-svg class="blue" src="icon.svg"></custom-svg>
<custom-svg class="red" src="icon.svg"></custom-svg>
<script>
class CustomSVG extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
fetch(this.getAttribute('src'))
.then(response => response.text())
.then(text => {
this.innerHTML = text;
});
}
}
customElements.define('custom-svg', CustomSVG);
</script>
</body>
</html>
Notes
- The SVG image must not have the "fill" attribute if you want, for example, change the fill color using CSS.
Solution 6 - Html
custom-svg works very good, for width style use this:
custom-svg svg{
max-width:64px;
max-height:64px;
}