SVG usage in Web pages

There are a several ways to include SVG content to a Web page.
The most popular is to embed an SVG image into the HTML code. This method can be realised using the following HTML/XHTML elements:

  • The img element is the most common method for using graphics in HTML pages.
    <img src="sample.svg" alt="This is a simple example of embedding an SVG image within a Web page.">
  • The embed element is widely used although it is not authorised be the W3C reccomendation:
    <embed src="sample.svg>
  • The object element can contain other elements nested within it, unlike img, which is empty. Due to this fact using nested object elements markup, links, etc. can be used.
    <object data="img/sample.svg" type="image/svg+xml" width="500" height="200">
  • The applet element which can invoke a Java applet to view SVG content within the given Web page. The applet is assumed to be in the same directory as the current document.
    <applet code="Bubbles.class" width="500" height="500">
    Java applet that draws animated bubbles.
    </applet>

you also can use external link in HTML/XHTML code:

  • The a element allows using any stand-alone SVG viewer
    <a href="http://abc.org/sample.svg"> see SVG image here < a>

Alternatively, it is possible to embed SVG content inline the Web page..

  • An SVG document textually fragment is included within the XHTML:
    <html xmlns:svg="http://www.w3.org/2000/svg">
    <object id="AdobeSVG" CLASSID="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
    </object>
    <?import namespace="svg" implementation="#AdobeSVG"?>
    <head>
    ...
    </head>
    <body>
    <svg:svg width="100" height="120" >
    <svg:circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/>
    </svg:svg>
    ...
    </body>
    </html>