Skip navigation

Category Archives: SVG

Inline SVG that Validates

XHTML and SVG are different document types, so it’s not possible to include inline SVG documents in webpages without javascript. However it is possible to use frames to explicitly or implicitly embed SVG documents. The method is similar to embedding flash. The following is the implicit method based on the Flash Satay article.
http://www.carto.net/papers/svg/samples/svg_html.shtml
http://www.alistapart.com/articles/flashsatay

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <title>Inline SVG Example</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="robots" content="all" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
    <table border='1' cellpadding='8' cellspacing='0'>
    <tr>
    <td align='center' valign='top'>
    <object type='image/svg+xml' data='example.svg' width='' height=''>
    </object>
    </td>
    </tr>
    </table>
</body>
</html>