embeddingsvgxml
I have an SVG document, and I would like to include an external svg image within it, i.e. something like:
<object data="logo.svgz" width="100" height="100" x="200" y="400"/>
("object" is just an example – the outer document will be SVG rather than xhtml).
Any ideas? Is this even possible? Or is the best thing for me to simply slap the logo.svg xml into my outer SVG document?
Open your .svg file with a text editor (it's just XML), and look for something like this at the top:
<svg ... width="50px" height="50px"...
Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.
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.
Best Answer
Use the
imageelement and reference your SVG file. For fun, save the following asrecursion.svg: