SVG in HTML

汪丁雷

2023-12-01

转自http://greaterthanme.blog.hexun.com/list.aspx?tag=svg

<embed>

advantage: supported in nearly any browser, allows html2svg and svg2html scripting, is recommended by Adobe for their SVG Viewer
disadvantage: not clearly standardized within any HTML specification

<object>

advantage: HTML4 and higher standard, supported in newer browser generations
disadvantage: works on newer browsers but without html2svg and svg2html scripting.

<iframe>

advantage: works in most browsers, but not documented
disadvantage: generates a window-like border without specific styling

Technical Details

Embed

The syntax is an old one:
<embed src="canvas.svg" width="350" height="176" type="image/svg+xml" name="emap">

An additional attribute is pluginspage that can be set to an URL for the plugin download:
pluginspage=http://www.adobe.com/svg/viewer/install/main.html

On Internet Explorer the additional attribute wmode="transparent" can be set to let the html page background shine through.

Object

The syntax is HTML 4 Strict standard:
<object type="image/svg+xml" name="omap" data="canvas_norelief.svg" width="350" height="176"></object>

Between the opening and the closing object tag one can be add information for browsers that do not support objects:
<object ... ><b>YOU SHOULD UPDATE<br>YOUR BROWSER</b></object>

Unfortunately the some browsers (NN4) do not show this alternative content if type="image/svg+xml" has been set to something else than text/html.

Iframe

The syntax is only HTML 4 Transitional standard:
<iframe src="canvas_norelief.svg" width="350" height="176" name="imap"></iframe>

Between the opening and the closing iframe tag one can be add information for browsers that do not support objects:
<iframe ... ><b>YOU SHOULD UPDATE<br>YOUR BROWSER</b></iframe>

Foreign Namespaces

It would be great if standards evolve in a sense of compatibility without needing to "embed" one document into another. Such a file could look like the one below (taken from Mobile SVG Profiles at W3C). For now there is only one browser supporting such constructs, Amaya, the W3C's Editor/Browser.

<?xml version="1.0" standalone="yes"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
                 xmlns:svg="http://www.w3.org/2000/svg">
  <head>
      <title xml:lang="en">Sample XHTML + SVG document</title>
  </head>
  <body>
     <svg:svg width="4cm" height="8cm" version="1.1" baseProfile="tiny" >
         <svg:ellipse cx="2" cy="4" rx="2" ry="1" />
     </svg:svg>
  </body>
</html>

Cross-browser workarounds

There's a solution that works in most browsers, but note that this is an workaround unsupported by browser and svg viewer authors: It works like this:

<html>
...
  <body>
...
    <iframe src="svgtest.svgz" width="200px" height="200px" 
            frameborder="0" marginwidth="0"  marginheight="0" >
      <embed src="svgtest.svgz" width="200px" height="200px" 
             type="image/svg+xml" /> 
    </iframe>
...
  </body>
</html>