How to use svg in html
SVG has a number of advantages: small file sizes, scalable to any dimension without losing quality, easy to modify (XML declared), looks great on retina displays etc. All major modern browsers supports this image format. Examples bellow includes also some fallbacks if needed support for IE8 or Android 2.3.
1. Using SVG as an <img> element
Basic usage is as simple as using a regular raster graphic (png, jpg,gif) with an SVG file. For fallback we include piece of Javascript which swaps out the source of the image and loads supported format instead.
... <!-- No scale --> <div class="svg-demo noscale"> <div class="caption"><strong>35 x 35 px</strong> (1:1)</div> <img src="path/to/img/address-add-c.svg" onerror="this.onerror=null; this.src='path/to/img/address-add-c.png'"> </div> <!-- Scale up --> <div class="svg-demo scaleup"> <div class="caption"><strong>105 x 105 px</strong></div> <img src="path/to/img/address-add-c.svg" onerror="this.onerror=null; this.src='path/to/img/address-add-c.png'"> </div> ...
...
/* No scale - width, height is important only for fallback image*/
.svg-demo.noscale img {
width:35px;
height:35px;
}
/* Scale up */
.svg-demo.scaleup img {
width:105px;
height:105px;
}
...
You can use Modernizr to test svg support or use jQuery plugin/online tool SVGMagic as a fallback.
2. Using SVG as an <object> element
If you want to use any advanced SVG features such as CSS (e.g. for interactivity), the HTML5 <object> element should be the option. You can use a <style> element or load external stylesheets inside the SVG file itself. Simple CSS :hover is implemented in this example.
...
<!-- Fallback image in CSS -->
<object class="address-add" type="image/svg+xml" data="path/to/img/address-add-c.svg">
<div></div>
</object>
...
...
/* set dimensions for object element */
.address-add {
width:210px;
height:210px;
}
/* Fallback */
.address-add div {
width:210px;
height:210px;
background-image:url("path/to/img/address-add-c210.png");
background-position:center center;
background-repeat:no-repeat;
}
...
3. Using SVG as a CSS background-image
Another popular way to embed an SVG is using a background-image CSS property on an element. SVG background image can be positioned, tiled, sized and scaled as any bitmap background image. Important fallback technique is described by Chris Coyier (css-tricks): "SVG and multiple backgrounds have very similar browser support, so if the browser supports multiple backgrounds, it supports SVG, and the declaration will work (and override any previous declaration)."
... <!-- Fallback by CSS --> <div class="svg-in-bg">Text content<br>over the SVG image<br>in background</div> ...
...
/* Background image with fallback */
.svg-in-bg {
background: url("path/to/img/address-add-c.png");
background-image: url("path/to/img/address-add-c.svg"), none;
background-size: 105px 105px;
background-position: center center;
}
...
over the SVG image
in background
There are few more methods how an SVG image can be added to webpage. For example: as a piece of code directly within your HTML5 page using <svg> tags, load images within an <iframe> etc. You can find more articles on this topic on internet.
SVG graphics provided on our site are prepared precisely, optimized and most of all CSS styled.