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="files/imgs/hints/address-add-c.svg" onerror="this.onerror=null; this.src='files/imgs/hints/address-add-c.png'">
    </div>
    	
    	
    
    <!-- Scale up --> 
    <div class="svg-demo scaleup">
    	<div class="caption"><strong>105 x 105 px</strong></div>
    	<img src="files/imgs/hints/address-add-c.svg" onerror="this.onerror=null; this.src='files/imgs/hints/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;
    }
    
    ...
  • 35 x 35 px (1:1)
    105 x 105 px

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="files/imgs/hints/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("files/imgs/hints/address-add-c210.png");
        background-position:center center;
        background-repeat:no-repeat;
    }
    
    ...

2. 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("files/imgs/hints/address-add-c.png");
        background-image: url("files/imgs/hints/address-add-c.svg"), none;
        background-size: 105px 105px;
        background-position: center center;
    }
    
    ...
  • Text content
    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.

Go back