main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:html_around

SVG in HTML pages

On the left you should see three times the same SVG file with different manners to "embed" them into the HTML page. The word "embed" is quoted here because the first of the methods uses the embed-tag. The second does the same with object, the third uses iframe. All of them have advantages, none is perfect.

As long as no browser has native SVG support, any html/svg-combination will relay on plugIn or activeX mechanisms. Both are not clearly standardized, thus html2svg-communication, especially for scripting needs to be checked case by case.

<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
You should see a maps within an <object>-tag here

YOUR BROWSER DOESN'T SUPPORT EMBEDED HTML-OBJECTS.

Please update!

<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

Files used

Right-click, save ...

Technical Details

Embed

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

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 www.w3.org/TR/SVGMobile/#sec-structure). For now there is only one browser supporting such constructs, www.w3.org/Amaya, the W3C's Editor/Browser.

<?xml version="1.0" standalone="yes"?>
<html xmlns="https://www.w3.org/1999/xhtml" 
                 xmlns:svg="https://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>


Last modified: Tuesday, 10-Dec-2019 21:42:16 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/svg_html.shtml