Applying CSS to img-tag-embedded SVG images
Well it can be achieved through JQuery
( Work Around ) , this Jquery
function will convert <img>
tag that hold current svg image into a <svg>
inline tags, you can view it in your browser debugger.In short it will mimic as if directly inserted the SVG image.
<script type="text/javascript">
$(document).ready(function() {
$('#img').each(function(){
var img = $(this);
var image_uri = img.attr('src');
$.get(image_uri, function(data) {
var svg = $(data).find('svg');
svg.removeAttr('xmlns:a');
img.replaceWith(svg);
}, 'xml');
});
});
</script>
<img id='img' src="my.svg" />
How to use link to SVG file inside image element?
Yes, you can use SVG-file inside image
tag in SVG! But this tag does not have src
attribute. This attribute is from HTML img
tag.
Inside image
tag you have to use href
attribute or also xlink:href
attribute (but it is deprecated since SVG 2) for this purpose.
<svg width="50" height="150">
<image href="https://developer.mozilla.org/static/platforms/mobile.d9737f9e22aa.svg" width="50" height="150"/>
</svg>
Targeting SVG inside img tag?
It's not possible, the external content is not accessible.
Your need to embed the SVG markup itself into your HTML document.
CSS @import not Resolved in SVG on Firefox if SVG is Embedded in HTML Via img Tag
<img>
files must be entirely self-contained for privacy reasons, i.e. they can't refer to any external files.
You'd have to include all the styles inline in the file itself if you want this to work as @import won't work in an image context.
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.
Do I use img , object , or embed for SVG files?
I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
If you use <object>
then you get raster fallback for free*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.
2014 update:
If you want a non-interactive svg, use
<img>
with script fallbacks
to png version (for older IE and android < 3). One clean and simple
way to do that:<img src="your.svg" onerror="this.src='your.png'">
.This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.
If you want an interactive svg, use either
<iframe>
or<object>
.If you need to provide older browsers the ability to use an svg plugin, then use
<embed>
.For svg in css
background-image
and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.
An additional good read is this blogpost on svg fallbacks.
Dynamic CSS embedded in an SVG doesn't work when used in an img tag
The img
tag doesn't allow interactive svg's. Try changing the img
tag with an object
tag. This will make the svg interactive.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<object type="image/svg+xml" data="dots.svg"></object>
</body>
</html>
DEMO: https://plnkr.co/edit/i9VCecx2NxIHMaSr2lmB?p=preview
More information on types of tags to use with SVG in this question.
Related Topics
How to Add a Font Awesome Icon to Input Field
How to Export Rmarkdown File to HTML Document with Two Columns
Embed a Powerpoint in a Web Page
Manipulating External Svg File Style Properties with CSS
Difference Between Url Encode and HTML Encode
Why Is the Span's Line-Height Useless
How to Nest Button Inside Another Button
All Widths Set to Width of Widest Element
100% Width Twitter Bootstrap 3 Template
Make Columns of Equal Width in <Table>
How to Set Div's Height in CSS and HTML
Do HTML Websockets Maintain an Open Connection for Each Client? Does This Scale
How to Trigger a Phone Call When Clicking a Link in a Web Page on Mobile Phone
HTML Video Player Plays Sound But Not Video
How to Make Rooftext Effect and Valley Text Effect in HTML5 (Or Fabric.Js)
How to Make a Chevron Arrow Using CSS