mozilla

Compare Revisions

SVG In HTML Introduction

Change Revisions

Revision 54253:

Revision 54253 by Roc on

Revision 54254:

Revision 54254 by Roc on

Title:
SVG In HTML Introduction
SVG In HTML Introduction
Slug:
SVG_In_HTML_Introduction
SVG_In_HTML_Introduction
Tags:
SVG
SVG
Content:

Revision 54253
Revision 54254
n17      Here is the source to <a class="external" href="http://deven17      Here is the source to <a class="external" href="http://deve
>loper.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml|>loper.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml"
>the">example</a>:>>the example</a>:
n32      document.getElementById('body').n32      document.getElementById('body').setAttribute("class", "inva
 >lid");
33        setAttribute("class", "invalid");
n41 n
n49 n
n51    viewBox="0 0 100 100"n
52    preserveAspectRatio="xMidYMid slice"48    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
n58    &lt;rect x="0" y="0" width="100" height="100"n54    &lt;rect x="0" y="0" width="100" height="100" style="fill:url
 >(#gradient)" /&gt;
59     style="fill:url(#gradient)" /&gt;55    &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)"
 > /&gt;
60    &lt;circle cx="50" cy="50" r="30"
61     style="fill:url(#gradient)" /&gt;
tt60    <h3 name="Discussion">
61      Discussion
62    </h3>
63    <p>
64      The page is mainly regular HTML, CSS and Javascript. The on
 >ly interesting part is the &lt;svg&gt; element it contains. This 
 >element and its children are declared to be in the SVG namespace.
 > The element contains a gradient and two shapes filled with the g
 >radient. The gradient color stops have their colors set by CSS. W
 >hen the user enters something incorrect into the form, the script
 > sets the "invalid" attribute on the &lt;body&gt;, and a style ru
 >le changes the gradient end-stop color to red. (Another style rul
 >e makes an error message appear.)
65    </p>
66    <p>
67      This approach has the following points in its favor:
68    </p>
69    <ul>
70      <li>We have taken a regular HTML form that could have been 
 >part of an existing Web site, and added an attractive, interactiv
 >e background
71      </li>
72      <li>The approach is backward compatible to browsers that do
 > not support SVG; simply, no background appears in them
73      </li>
74      <li>It's very simple and performs very well
75      </li>
76      <li>The picture dynamically sizes itself to the required si
 >ze in an intelligent way
77      </li>
78      <li>We can have declarative style rules applying to both HT
 >ML and SVG
79      </li>
80      <li>The same script manipulates both HTML and SVG
81      </li>
82      <li>The document is entirely standards-based
83      </li>
84    </ul>
85    <h3 name="Details">
86      Details
87    </h3>
88    <p>
89      The "viewBox" attribute establishes a logical coordinate sy
 >stem which the SVG picture's coordinates are relative to. In this
 > case our picture is laid out in a 100 by 100 viewport.
90    </p>
91    <p>
92      The "preserveAspectRatio" attribute specifies that the aspe
 >ct ratio must be preserved by centering the picture in the availa
 >ble size, sizing to the maximum of the height or width and then c
 >utting off any overflow.
93    </p>
94    <p>
95      The "style" attribute pins the SVG element to the backgroun
 >d of the form.
96    </p>

Back to History