SVG In HTML Introduction

  • Revision slug: SVG_In_HTML_Introduction
  • Revision title: SVG In HTML Introduction
  • Revision id: 54251
  • Created:
  • Creator: Roc
  • Is current revision? No
  • Comment /* Source */

Revision Content

Overview

This article and associated example shows how to use inline SVG to provide a background picture for a form. It shows how Javascript and CSS can be used to manipulate the picture in the same way you would script regular HTML.

Source

Here is the source to example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XTech SVG Demo</title>
  <style>
    stop.begin { stop-color:yellow; }
    stop.end { stop-color:green; }
    body.invalid stop.end { stop-color:red; }
    #err { display:none; }
    body.invalid #err { display:inline; }
  </style>
  <script>
    function signalError() {
      document.getElementById('body').
        setAttribute("class", "invalid");
    }
  </script>
</head>
<body id="body"
   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
  <form>
     <fieldset>

       <legend>HTML Form</legend>
       <p><label>Enter something:</label>
          <input type="text"/>
          <span id="err">Incorrect value!</span></p>
       <p><button onclick="signalError();">Activate!</button></p>
     </fieldset>
  </form>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid slice"
    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
    <linearGradient id="gradient">
      <stop class="begin" offset="0%"/>
      <stop class="end" offset="100%"/>
    </linearGradient>
    <rect x="0" y="0" width="100" height="100"
     style="fill:url(#gradient)" />
    <circle cx="50" cy="50" r="30"
     style="fill:url(#gradient)" />
  </svg>
</body>
</html>

Revision Source

<h3 name="Overview"> Overview </h3>
<p>This article and <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml|its">associated example</a> shows how to use inline SVG to provide a background picture for a form. It shows how Javascript and CSS can be used to manipulate the picture in the same way you would script regular HTML.
</p>
<h3 name="Source"> Source </h3>
<p>Here is the source to <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml|the">example</a>:
</p>
<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
  &lt;title&gt;XTech SVG Demo&lt;/title&gt;
  &lt;style&gt;
    stop.begin { stop-color:yellow; }
    stop.end { stop-color:green; }
    body.invalid stop.end { stop-color:red; }
    #err { display:none; }
    body.invalid #err { display:inline; }
  &lt;/style&gt;
  &lt;script&gt;
    function signalError() {
      document.getElementById('body').
        setAttribute("class", "invalid");
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body id="body"
   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
  &lt;form&gt;
     &lt;fieldset&gt;

       &lt;legend&gt;HTML Form&lt;/legend&gt;
       &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
          &lt;input type="text"/&gt;
          &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
       &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
     &lt;/fieldset&gt;
  &lt;/form&gt;

  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid slice"
    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
    &lt;linearGradient id="gradient"&gt;
      &lt;stop class="begin" offset="0%"/&gt;
      &lt;stop class="end" offset="100%"/&gt;
    &lt;/linearGradient&gt;
    &lt;rect x="0" y="0" width="100" height="100"
     style="fill:url(#gradient)" /&gt;
    &lt;circle cx="50" cy="50" r="30"
     style="fill:url(#gradient)" /&gt;
  &lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Revert to this revision