Simple SVG Display

Inkscape » SVG and the Web » Simple SVG Display

There are several different ways to display SVG files in a web page. The simplest way is just to link to an SVG file. Browsers that support SVG will display the drawing by itself on a page.

To put an SVG drawing in an XHTML (Extensible Hypertext Markup Language) or HTML (Hypertext Markup Language) document one can either include the SVG drawing in the XHTML using Name Spaces or use the XHTML <object> tag to include an external SVG file.

	Warning
	A method you might see used to include an SVG drawing in a web document: using the <embed> tag, is not part of the XHTML specification (nor HTML 4 specification). Modern browsers (e.g., Firefox and Opera) comply with the XHTML standard and use the <object> tag, while the Adobe plug-in requires the use of the <embed> tag.

Using Object Tags

A simple and easy way to include SVG into a web page is to use the XHTML object tag. Here is an example:


<?xml version="1.0"?>     
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>SVG Included with <object> tag in an XHTML File</title>
  </head>
  <body>

   <h1>An SVG rectangle (via <object> tag)</h1>

   <object type="image/svg+xml" data="web_square.svg">     
    Browser does not support SVG files!     
   </object>

  </body>
</html>

	XML declaration.
	Inclusion of SVG file. The "image/svg+xml" is the MIME type of the included file. It must be given.
	Text that will be displayed if a browser does not support SVG. Browsers should ignore tags that they don't understand thereby exposing the text.

Using Name Spaces

Through Name Spaces, an SVG file can be placed directly in an XHTML file. Here is an example of a very simple XHTML file that displays a blue square. The square was drawn with Inkscape. (For clarity, the Inkscape drawing was saved as a plain SVG file and some of the unused rectangle attributes were deleted.)


<?xml version="1.0"?>     
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     
  <head>
   <title>SVG Embedded into an XHTML File</title>
  </head>
  <body>

<h1>An SVG rectangle (via Name spaces)</h1>

<!-- Created with Inkscape (http://www.inkscape.org/) -->     
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"     
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs
     id="defs1343" />
  <g
     id="layer1">
    <rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </g>
</svg>     

  </body>
</html>

	XML version declaration. Note that there is only one <?xml?> declaration in the document.
	Start of XHTML name space.
	Beginning of Inkscape SVG content. Note that the <?xml?> line has been removed.
	Declaration of SVG name space. Note that when 'xmlns' does not have an extension (e.g., ':svg'), then the line declares a default name space.
	End of SVG name space and Inkscape SVG content.

The above file will be displayed by Firefox 1.5 as long as the filename ends with “.xml”. It however will not validate with the W3C Markup Validation Service. To be validated, changes need to be made. The “DOCTYPE” must be changed to "XHTML 1.1 plus MathML 2.0 plus SVG 1.1". The SVG version must be 1.1 to match the “DOCTYPE”. And all SVG tags must prefixed by "svg:" to explicitly declare which name space they belong to. The latter is required due to name space conflicts between XHTML and SVG. The following file will validate.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>SVG Included via Namespace in an XHTML File</title>
  </head>
  <body>

<h1>An SVG rectangle (via Name spaces)</h1>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg:svg     
   xmlns:svg="http://www.w3.org/2000/svg"     
   version="1.1"
   width="150"
   height="150"
   id="svg1341">
  <svg:defs
     id="defs1343" />
  <svg:g
     id="layer1">
    <svg:rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </svg:g>
</svg:svg>

  </body>
</html>

	Beginning of Inkscape SVG content. Note that the object is now declared with an 'svg:' prefix. All SVG objects must use this prefix.
	Declaration of SVG name space. Note the addition of ':svg' to the 'xmlns' declaration as compared to the previous example.

To get the Adobe plug-in to display SVG content that is embedded in an XHTML or HTML file takes a bit of work. The plug-in predates much of the work on name spaces. You can find out more details on this black magic at the SVG Wiki site.


Chapter 19. SVG and the Web		Adding Links