Displaying SVG in web browsers

In HTML you can use SVG images in several different ways:

  • Link to an svg image in an iframe element
  • As an img element
  • Use a svg image as a background in CSS.
  • Use the <svg> element
  • Use the <embed> element

iframe
<iframe src="/svg/mypic.svg" width="200" height="200" >

img

<img src="/svg/mypic.svg">

Use a svg image as a background in your CSS

div {
    background-image: url('my-svg-image.svg');
    background-size : 100px 100px;
}

In CSS you possible have to set the background's size of the svg image. This will tell the browser to scale the image properly.

Using the <svg> element
Simple embed an svg image using the <svg> element.

<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

      <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>

</svg>

This way will also allow you to manipulate the svg with common attributes like with and height. See svg Element

embed
Usually not used anylonger. It was as a work arround to make svg work in older browsers.

<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

Browser Support
Almost all modern browser support svg including mobile browsers like chrome, ie and safari.