How do you style a external svg with css
If you include your svg image by referencing an external file, like you do with the object
tag, the elements in the svg image are not included to your main documents DOM tree. They comprise their own tree. Therefore, the elements in the external image can't be matched by CSS selectors in the main document.
You can style the object
element like you could most other elements, for example giving it a border. But you can't (this way, at least) access the elements in the external image. In your case, you try to style #ob
's color
. That would apply to the object
s text color, not to any color inside the referenced svg image. On browsers not supporting svg, the "Your browser does not support SVG" notice would probably rendered in blue.
The case with your CSS selector for svg
is similar: CSS selectors in the main document match only to elements in the main document, and there's no svg
to be found, just an object
.
There are some ways to apply CSS styling to svg elements. The idea generally is to bring the CSS and the svg elements to the same DOM tree, either by getting the svg elements from the external file to the main document or the CSS from the main document to the external file:
- Embed your
svg
element and its child elements directly into the main document instead of referencing an external file. In this case, thesvg
element and its children will be part of the man document's DOM tree, so they're accessible to the main document's CSS. - Embed an
svg
element into your main document and use xlink'suse
to reference an external svg image (rather, a part of it). For the general idea, see this answer or this answer. - Load the elements from the external image to the main documents tree via AJAX/XHR. For the general idea, again see this answer.
- You can grab a hold of the external images' tree with JavaScript and edit their styles from there. The keyword for that would be
contentDocument
, see this answer. - If you can't get the elements from your external svg image to your main document's DOM tree, so the main documents CSS selectors can match to it, you can try the other way around: Add your CSS to your svg file. Similar to the ways you can include CSS into a html document, you can use inline
style
attributes, use astyle
element like in html'shead
or reference an external CSS file with<?xml-stylesheet ... ?>
. For more information, see for example this tutorial.
How to style SVG with external CSS?
Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
<html>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......."/>
</g>
</svg>
</html>
If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.
You can do it with a style tag:
http://www.w3.org/TR/SVG/styling.html#StyleElementExample
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="50px" height="50px" viewBox="0 0 50 50">
<defs>
<style type="text/css"><![CDATA[
.socIcon g {
fill:red;
}
]]></style>
</defs>
<g>
<path d="M28.44......./>
</g>
</svg>
You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.
If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.
How to use external SVG in HTML?
You should embed the image by using <object>
tag:
<object data="algerie.svg" type="image/svg+xml"></object>
Refer to this question for the details: Do I use <img>, <object>, or <embed> for SVG files?
How to set a External SVG color in HTML using CSS?
The problem is that you don't target the actual SVG element, you target the "SVG container". To be able to change the color of one of the elements inside the SVG you have to target that specific element.
E.g change the fill color of all paths in a SVG:
.weather_icon path {
fill: yellow;
}
If you want to make it easier to handle add class names to the different elements inside the svg.
<path class="my-class" ......... />
This will make it possible to target a specific element by its class:
.weather_icon .my-class {
fill:blue;
stroke:green;
}
Is it possible to style external svg file with css?
It's not possible using an img tag, these are basically similar to bitmaps as far as accessing or modify them is concerned. You could use the <iframe>
tag with its style attribute instead or alternatively just include the svg inline in the file which you can do with html5.
How to access style properties of externally insert svg file?
You can use a <use>
element instead.
Give your path element an unique id and strip all fill attributes:
Svg markup
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>
Use element in html
Use elements support external svg files.
<svg>
<use href="icon.svg#icon" style="fill:red" />
</svg>
So you don't need to inline your assets/icons svg (some legacy browsers might still have issues with external svgs referenced in use)
Example (inlined svg just for circumventing CORS issues)
<svg style="display:none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>
<p>
<svg>
<use href="#icon" style="fill:red" />
</svg>
<svg>
<use href="#icon" style="fill:green" />
</svg>
</p>
How to apply a style to an embedded SVG?
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.
Related Topics
Conditional HTML Attributes Using Razor MVC3
Bootstrap: Add Margin/Padding Space Between Columns
Highlight the Navigation Menu for the Current Page
Make Link in Table Cell Fill the Entire Row Height
CSS Transition - Eases in But Doesn't Ease Out
Is Using <Li> Without Enclosing <Ul> Tags Dangerous
How to Bevel the Corner of a Block Div
Can a Span Be Closed Using <Span />
How to Give a CSS Class Priority Over an Id
Flex Item Should Align Left, Not Center, When It Wraps
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
Highlight the Navigation Menu for the Current Page
How to Set a Stroke-Width:1 on Only Certain Sides of Svg Shapes
White Space Showing Up on Right Side of Page When Background Image Should Extend Full Length of Page