scalable vector graphics

serving SVG from your web server

step 1: sending the correct MIME type

To serve Scalable Vector Graphics from a web server, the correct MIME type has to be sent with each server response. MIME is a mechanisms for specifying and describing the format of internet message bodies. If the MIME type is not defined, some buggy web browsers like some Internet Explorers ignore the MIME types, and only display SVG files whose names ends in “.svg” as SVG, although the file extension shouldn't matter to the browser.

To be sure that everyone can request SVG files from the web server, the correct MIME type has to be set. The MIME types need to be listed on the web server, so the browser knows what to do with SVG files.

There are two methods to enable an Apache web server to send the correct MIME type:

  1. Add the following two lines to the existing “.htacces” file.
    AddType image/svg+xml svg
    AddType image/svg+xml svgz
    
  2. Put a file called “.htaccess” containing these two lines in the directory from which the SVG files are served.

On Windows 2000 Server, administrators can configure additional file types using the Internet Services Manager. Opening the “Default Web Site Properties” window, the file types can be configured under the tab “HTTP Headers”. Clicking on the “File Types” button, a new window pops up. A new file type can be added by typing in the associated extension (svg and svgz) and the content type in MIME format (image/svg+xml).

step 2: referencing SVG

Currently, there are three methods to embed SVG within an XHTML document:

  1. Use the object element.
  2. Use the embed element.
  3. Use inline frames (iframe) with the SRC attribute set to the SVG file.

The proper method of embedding SVG within an XHTML document is by means of the object element:

<object
  type="image/svg+xml"
  data="/svg/svgfiles/nederland.svg"
  width="300"
  height="350"
>
<img
  src="/img/nederland.png"
  width="300"
  height="350"
  alt="Map of the Netherlands"
/>
<p>Your browser does not support Scalable Vector Graphics. If you install the 
  <a
    href="http://www.adobe.com/svg/viewer/install/auto/"
    title="Adobe SVG Viewer Download Area"
  >Adobe SVG Viewer</a>, or upgrade to an
  <a
    href="http://www.mozilla.org/projects/svg/"
    title="Mozilla SVG Project"
  >SVG-compatible web browser</a>,
  you will be presented with an interactive map of the Netherlands.
</p>
</object>

Because the object element has separate start and end elements, one can put something useful inside, such as a PNG file, or a text description, or both. This will be displayed in browsers that can't yet display SVG files.

Unfortunately, the embed element has become the de facto approach to embedding SVG documents since Adobe released version 3.01 of its SVG viewer:

Adobe SVG Viewer 3.01 always disables scripting when it determines that the SVG file is embedded using the object element. When authoring in SVG, Adobe recommends that you not use the object element and instead use the embed element when embedding SVG in HTML pages.
<embed
  src="/svg/svgfiles/nederland.svg"
  width="300"
  height="350"
  pluginspage="http://www.adobe.com/svg/viewer/install/auto"
/>
<noembed>
<p>Your browser does not support Scalable Vector Graphics. If you install the 
  <a
    href="http://www.adobe.com/svg/viewer/install/auto/"
    title="Adobe SVG Viewer Download Area"
  >Adobe SVG Viewer</a>, or upgrade to an
  <a
    href="http://www.mozilla.org/projects/svg/"
    title="Mozilla SVG Project"
  >SVG-compatible web browser</a>,
  you will be presented with an interactive map of the Netherlands.
</p>
</noembed>

The embed element is not listed in any DTD. Nor can it be, since its syntax is not SGML conformant, but for the “real world” Internet browser audience one should stick with the embed element. Therefore, if documents must validate as XHTML, the definition of an embed element with its attributes has to be included in an internal DTD subset within the head of a document. The modification to the DTD is best implemented as a driver. This allows everything else in the file to be validated correctly and lets the embed element get treated as if it were valid.

<!DOCTYPE
  html
  PUBLIC
  "-//pinkjuice//DTD XHTML_plus_embed 1.0//EN"
  "http://www.pinkjuice.com/XHTML_plus_embed.dtd"
>
...

The third suggested option is to use inline frames (iframe) with the SRC attribute set to the SVG file. Unlike the embed element, the iframe element is part of the XHTML Transitional DTD. Between the iframe elements, one can provide information to users of browsers that do not support inline frames. Also, if there's no SVG handling type, users can still link to the SVG document to open it in an external programme. For example, Batik won't work inside the browser, but the SVG file will still be accessible to the user. Finally, the iframe elements also circumvents the changes to IE's handling of ActiveX controls and Java applets in the next version. The iframe element will ensure a smooth user experience.

<iframe
  src="/svg/svgfiles/nederland.svg"
  width="300"
  height="350"
  frameborder="0"
  marginwidth="0"
  marginheight="0"
>
<img
  src="/img/nederland.png"
  width="300"
  height="350"
  alt="Map of the Netherlands"
/>
<p>Your browser does not support Scalable Vector Graphics. If you install the 
  <a
    href="http://www.adobe.com/svg/viewer/install/auto/"
    title="Adobe SVG Viewer Download Area"
  >Adobe SVG Viewer</a>, or upgrade to an
  <a
    href="http://www.mozilla.org/projects/svg/"
    title="Mozilla SVG Project"
  >SVG-compatible web browser</a>,
  you will be presented with an interactive map of the Netherlands.
</p>
</iframe>

In the future, one could use inline SVG and XHTML, using multiple namespaces in the same document. This approach has been simplified by the release of the first Working Draft of a combined XHTML, MathML, SVG document type that uses the SVG 1.1 modularisation. This profile enables mixing XHTML, MathML, and SVG in the same document using XML namespaces mechanism, while allowing validation of such a mixed-namespace document.