index.html 26.5 KB

Raw Blame History Permalink

<?xml version="1.0"?>
<!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SVG Parameters 1.0, Part 1: Primer</title>
    <style type="text/css" media="screen">
    .idl-code {
      background-color: rgb(220, 220, 220);
      border: 1px solid gray;
    }

    .todo {
      background-color: rgb(255, 182, 193);
      border: 1px solid red;
    }

    .issue
    {
      font-weight: bold;
      background-color: yellow;
    }

    pre
    {
      border: 1px gray solid;
      background-color: rgb(236, 236, 236);
      margin: 1.5em;
      padding: 1em;
    }

    ul
    {
      list-style-type: circle;
    }

    .paramval
    {
      background: orange;
    }

    .paramname
    {
      background: yellow;
    }

    .defaultval
    {
      background: lime;
    }

    .used
    {
      border: black 1px solid;
    }

    .attr-name
    {
      font-family: monospace;
    }

    .note
    {
      font-style: italic;
    }

  </style>
    <link rel="stylesheet" type="text/css" href="style/svg-style.css" />
    <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD" />
  </head>
  <body>
    <div class="head">
      <p>
        <a href="http://www.w3.org/">
          <img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home" />
        </a>
      </p>
      <h1 id="pagetitle">SVG Parameters 1.0, Part 1: Primer</h1>
      <h2 id="pagesubtitle">W3C Working Draft <em>16 June 2009</em></h2>
      <dl>
        <dt>This version:</dt>
        <dd>
          <a href="http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/">http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/</a>
        </dd>
        <dt>Latest version:</dt>
        <dd>
          <a href="http://www.w3.org/TR/SVGParamPrimer/">http://www.w3.org/TR/SVGParamPrimer/</a>
        </dd>
        <dt>Previous version:</dt>
        <dd>
          <a href="http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090430/">http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090430/</a>
        </dd>
        <dt>Editors:</dt>
        <dd>Doug Schepers, W3C &lt;<a href="mailto:schepers@w3.org">schepers@w3.org</a>&gt;</dd>
        <dt>Authors:</dt>
        <dd>The authors of this specification are the participants of the W3C SVG Working Group.</dd>
      </dl>
      <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &#xA9; 2009 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>&#xAE;</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
    </div>
    <hr />
    <h2 id="abstract">Abstract</h2>
    <p>
    The SVG Parameters specification is an SVG 2.0 Module to provide a declarative way to incorporate parameter values into SVG content.  Often, users may wish to create a single resource, and reuse it several times with specified variations, and this specification provides a means to do so without the use of script.
  </p>
    <p>Although originally designed for use in SVG, some aspects of this specification are defined in XML and are accessed via presentation properties, and therefore could be used in other environments, such as HTML styled with CSS and XSL:FO.
  </p>
    <p>
    This document introduces the features used by SVG Parameters, for the use of the average developer or author.
  </p>
    <h2 id="status"> Status of This Document</h2>
    <p>
      <em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a>  at http://www.w3.org/TR/.</em>
    </p>
    <p>This document is an updated working draft of this specification. There is an accompanying <a href="#ref-SVGParam">SVG Parameters 1.0, Part 2: Language</a> specification that defines the features of SVG Parameters described in this specification.</p>
    <p>We explicitly invite comments on this specification. Please send them to <a href="mailto:www-svg@w3.org">www-svg@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-svg/">archives</a>), the public email list for issues related to vector graphics on the Web. Acceptance of the archiving policy is requested automatically upon first post to either list. To subscribe to this list, please send an email to <a href="mailto:www-svg-request@w3.org">www-svg-request@w3.org</a> with the word subscribe in the subject line. </p>
    <p>This document has been produced by the W3C <a href="http://www.w3.org/Graphics/SVG/WG/">SVG Working Group</a> as part of the <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a> within the <a href="http://www.w3.org/Interaction/">Interaction Domain</a>.</p>
    <p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. W3C maintains a <a rel="disclosure" href="http://www.w3.org/2004/01/pp-impl/19480/status">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
    <p>The latest information regarding <a href="http://www.w3.org/Graphics/SVG/Disclosures">patent disclosures</a> related to this document is available on the Web. As of this publication, the SVG Working Group are not aware of any royalty-bearing patents they believe to be essential to SVG. </p>
    <p>Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p>
    <hr />
    <h2 id="howto"> How to read this document and give feedback</h2>
    <p>This is a primer for the SVG Parameters specification. It gives guidelines on how to use the SVG Parameters specification with SVG 1.2. In many cases the reader will have to be familiar with the <a href="http://www.w3.org/TR/SVG11/">SVG</a> language.</p>
    <p>The main purpose of this document is to encourage public feedback. The best way to give feedback is by sending an email to <a href="mailto:www-svg@w3.org">www-svg@w3.org</a>.   Please include in the subject line of your message the string "[Params Primer]", and a short keyword that identifies the area of the specification the comment is referring to (e.g "[Params Primer] Section X.Y - Foo attribute values"). If you have comments on multiple areas of this document, then it is probably best to split those comments into multiple messages. </p>
    <p>The public are welcome to comment on any aspect in this document, but there are a few areas in which the SVG Working Group are explicitly requesting feedback. These areas are noted in place within this document.</p>
    <h2 id="toc">Table of Contents</h2>
    <ul class="toc">
      <li>
        <a href="#Introduction">1 SVG Parameters in SVG</a>
      </li>
      <li>
        <a href="#PassingValuesToSVGFiles">2 Passing Values to SVG Files</a>
        <ul class="toc">
          <li>
            <a href="#PassingValuesViaObjectParams">2.1 Passing Values via object param</a>
          </li>
          <li>
            <a href="#PassingValuesViaURLParameters">2.2 Passing Values via URL Parameters</a>
          </li>
          <li>
            <a href="#Syntax">2.3 Syntax</a>
          </li>
          <li>
            <a href="#Examples">2.4 Examples</a>
            <ul class="toc">
              <li>
                <a href="#NoParameters">2.4.1 No Parameters</a>
              </li>
              <li>
                <a href="#ObjectParameters">2.4.2 Object Parameters</a>
              </li>
              <li>
                <a href="#URLParameters">2.4.3 URL Parameters</a>
              </li>
              <li>
                <a href="#URLAndObjectParameters">2.4.4 URL and Object Parameters</a>
              </li>
              <li>
                <a href="#ParameterizingPosition">2.4.5 Parameterizing Position</a>
              </li>
              <li>
                <a href="#ParameterizingLinks">2.4.6 Parameterizing Links</a>
              </li>
              <li>
                <a href="#param-el">2.4.7 Setting Multiple Aspects of Reused Content</a>
              </li>
              <li>
                <a href="#complex-components">2.4.8 Complex Reusable Components</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#references">3 References</a>
      </li>
    </ul>
    <h2 id="Introduction">1 SVG Parameters in SVG</h2>
    <p>
This document is informative.
</p>
    <p>This specification describes some of the common uses cases for declarative parameters in SVG, and how to use them features defined in the <a href="#ref-SVGParam">SVG Parameters 1.0, Part 2: Language</a> specification.</p>
    <p>It is possible to provide parameters to standalone files or files referenced through another document.  Often, it is useful to allow parameter values to be used directly in the content of the SVG file, without the need for script.  These parameters may be provided to the document context through a variety of means, including, but not limited to, URL query strings or the &lt;param&gt; element in the HTML &lt;object&gt; element.</p>
    <p>Access to these parameters is currently possible by the use of script, but this does not work in scenarios where script is undesirable or unavailable.</p>
    <h2 id="PassingValuesToSVGFiles">2 Passing Values to SVG Files</h2>
    <h3 id="PassingValuesViaObjectParams">2.1 Passing Values via object param</h3>
    <p>Using the &lt;object&gt; element, you can pass parameters by the use of child &lt;param&gt; elements.  Each &lt;param&gt; element should have name/value pairs with the 'name' and 'value' attributes; these will be exposed to the embedded SVG document.</p>
    <p>HTML:</p>
    <pre>
      <code>
  &lt;object type="image/svg+xml" data="button.svg"&gt;
    &lt;param name="<span class="paramname">param1</span>" value="<span class="paramval">value1</span>" /&gt;
    &lt;param name="<span class="paramname">param2</span>" value="<span class="paramval">value2</span>" /&gt;
  &lt;/object&gt;
</code>
    </pre>
    <h3 id="PassingValuesViaURLParameters">2.2 Passing Values via URL Parameters</h3>
    <p>With the &lt;object&gt;, &lt;iframe&gt;, &lt;embed&gt;, and &lt;img&gt; elements, you can pass parameters via the URL.  The URL query syntax allows you to pass sets of name/value pairs separated by an ampersand (&amp;); as with object params, these will be exposed to the embedded SVG document.</p>
    <p>HTML:</p>
    <pre>
      <code>
  &lt;object type="image/svg+xml" data="button.svg?<span class="paramname">param1</span>=<span class="paramval">value1</span>&amp;<span class="paramname">param2</span>=<span class="paramval">value2</span>"&gt;
  &lt;/object&gt;
</code>
    </pre>
    <h3 id="Syntax">2.3 Syntax</h3>
    <p>The <a href="#ref-SVGParam">SVG Parameters 1.0, Part 2: Language</a> specification adds a new functional attribute value, the <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#param-attr-value"><span class="attr-name">&#x2018;param()&#x2019;</span></a> function.  This attribute takes a string as as a value, which matches the name part of a parameter name-value pair that's been passed into the document.</p>
    <p>To provide a default value for the attribute for the case where no parameters are passed into the document, the author can simply give an attribute value after the <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#param-attr-value"><span class="attr-name">&#x2018;param()&#x2019;</span></a> function, like this:</p>
    <pre>
      <code><em>attributename="param(parameter-name) default-value"</em>
  fill="param(color) red"
</code>
    </pre>
    <p>The specification also introduces the &lt;param&gt; element into SVG.  As with HTML, this element has two attributes, <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#name-attr"><span class="attr-name">&#x2018;name&#x2019;</span></a> and <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#value-attr"><span class="attr-name">&#x2018;value&#x2019;</span></a>, and it passes these parameters to referenced content (such as from a &lt;use&gt; or &lt;image&gt; element), like so:</p>
    <pre>
      <code><em>&lt;param name="parameter-name" value="parameter-value" /&gt;</em>
  &lt;param name="color" value="blue" /&gt;
</code>
    </pre>
    <div id="example">
      <h3 id="Examples">2.4 Examples</h3>
      <p>The usage of the <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#param-attr-value"><span class="attr-name">&#x2018;param()&#x2019;</span></a> function is outlined in this section.</p>
      <p>The various values in the code examples are color-coded as follows:</p>
      <ul>
        <li>
          <span class="paramname">&#xA0;parameter name&#xA0;</span>
        </li>
        <li>
          <span class="paramval">&#xA0;parameter value&#xA0;</span>
        </li>
        <li>
          <span class="defaultval">&#xA0;default value&#xA0;</span>
        </li>
        <li>
          <span class="used">&#xA0;(value which is used is outlined)&#xA0;</span>
        </li>
      </ul>
      <p>HTML:</p>
      <pre>
        <code>
      &lt;object type="image/svg+xml" data="button.svg"&gt;
        &lt;param name="<span class="paramname">color</span>" value="<span class="paramval used">red</span>" /&gt;
        &lt;param name="<span class="paramname">label</span>" value="<span class="paramval used">stop</span>" /&gt;
      &lt;/object&gt;
    </code>
      </pre>
      <p>SVG:</p>
      <pre>
        <code>
      &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
           viewBox="0 0 110 40" width="100%" height="100%"&gt;

        &lt;title&gt;Reusable Button&lt;/title&gt;
        &lt;desc&gt;Takes parameters from parent document's embedding element.&lt;/desc&gt;

        &lt;g&gt;
          &lt;rect id="button_rect" x="5" y="5" width="100" height="30" rx="15" ry="15"
            fill="param(<span class="paramname">color</span>) <span class="defaultval">blue</span>" stroke="param(<span class="paramname">outline</span>) <span class="defaultval used">navy</span>" /&gt;
          &lt;text id="button_label" x="55" y="30" text-anchor="middle"
            font-size="25" fill="black" font-family="Verdana"
            content-value="param(<span class="paramname">label</span>)"&gt;
            button
          &lt;/text&gt;
        &lt;/g&gt;

      &lt;/svg&gt;
    </code>
      </pre>
      <p>The following examples demonstrate how this work in practice, by use of a prototyping script, <a href="param.js">param.js</a>.  Obviously, this wouldn't be needed in a working native implementation.</p>
      <p class="note">Note that these examples are emulated by a Javascript prototype.  It should work in Opera, Firefox, and Safari, and maybe others (Chrome? Plugins?).  The script may be used as is, and is released under a CC license, but it is not intended as production code.  Content authors are encouraged to experiment with this code, and to comment to the SVG WG at www-svg@w3.org with suggestions and critiques of the specification based on experience.</p>
      <h4 id="NoParameters">2.4.1 No Parameters</h4>
      <pre>
        <code>
  &lt;object type="image/svg+xml" data="button.svg"&gt;
  &lt;/object&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="button.svg" style="width: 110px; height:40px; display:inline;">
    </object>
      <h4 id="ObjectParameters">2.4.2 Object Parameters</h4>
      <pre>
        <code>
  &lt;object type="image/svg+xml" data="button.svg"&gt;
    &lt;param name="<span class="paramname">color</span>" value="<span class="paramval used">red</span>" /&gt;
    &lt;param name="<span class="paramname">label</span>" value="<span class="paramval used">stop</span>" /&gt;
  &lt;/object&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="button.svg" style="width: 110px; height:40px; display:inline;">
        <param name="color" value="red" />
        <param name="label" value="stop" />
      </object>
      <object type="image/svg+xml" data="button.svg" style="width: 110px; height:40px; display:inline;">
        <param name="color" value="orange" />
        <param name="label" value="fast" />
      </object>
      <object type="image/svg+xml" data="button.svg" style="width: 110px; height:40px; display:inline;">
        <param name="color" value="green" />
        <param name="label" value="go" />
      </object>
      <h4 id="URLParameters">2.4.3 URL Parameters</h4>
      <pre>
        <code>
  &lt;object type="image/svg+xml" data="button.svg?<span class="paramname">color</span>=<span class="paramval used">cornflowerblue</span>&amp;<span class="paramname">label</span>=<span class="paramval used">fnord</span>"&gt;
  &lt;/object&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="button.svg?color=cornflowerblue&amp;label=fnord" style="width: 110px; height:40px; display:inline;">
    </object>
      <h4 id="URLAndObjectParameters">2.4.4 URL and Object Parameters</h4>
      <pre>
        <code>
  &lt;object type="image/svg+xml" data="button.svg?<span class="paramname">color</span>=<span class="paramval used">cornflowerblue</span>&amp;<span class="paramname">label</span>=<span class="paramval used">fnord</span>"&gt;
    &lt;param name="<span class="paramname">color</span>" value="<span class="paramval">purple</span>" /&gt;
    &lt;param name="<span class="paramname">label</span>" value="<span class="paramval">override</span>" /&gt;
  &lt;/object&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="button.svg?color=purple&amp;label=override" style="width: 110px; height:40px; display:inline;">
        <param name="color" value="cornflowerblue" />
        <param name="label" value="fnord" />
      </object>
      <h4 id="ParameterizingPosition">2.4.5 Parameterizing Position</h4>
    <pre>
      <code>
  &lt;object type="image/svg+xml" data="map.svg"&gt;
    &lt;param name="<span class="paramname">x</span>" value="<span class="paramval used">255</span>" /&gt;
    &lt;param name="<span class="paramname">y</span>" value="<span class="paramval used">172</span>" /&gt;
  &lt;/object&gt;
  &lt;object type="image/svg+xml" data="map.svg?<span class="paramname">y</span>=<span class="paramval used">167</span>&amp;<span class="paramname">x</span>=<span class="paramval used">655</span>"&gt;
  &lt;/object&gt;
      </code>
    </pre>
    <pre>
      <code>
  &lt;circle id="coord" cx="<span class="paramname">param(x)</span>" cy="<span class="paramname">param(y)</span>" r="5" fill="tan" stroke="brown" stroke-width="3" /&gt;
      </code>
    </pre>
      <object type="image/svg+xml" data="map.svg" style="width: 450px; height:240px; display:inline;">
        <param name="x" value="255" />
        <param name="y" value="172" />
      </object>
      <object type="image/svg+xml" data="map.svg?y=167&amp;x=655" style="width: 450px; height:240px; display:inline;">
      </object>
      <h4 id="ParameterizingLinks">2.4.6 Parameterizing Links</h4>
      <pre>
        <code>
  &lt;object type="image/svg+xml" data="ad.svg"&gt;
    &lt;param name="<span class="paramname">buylink</span>" value="<span class="paramval used">http://example.com/shop</span>" /&gt;
  &lt;/object&gt;
  &lt;object type="image/svg+xml" data="ad.svg?<span class="paramname">buylink</span>=<span class="paramval used">http%3A%2F%2Fexample.com%2Fbargains</span>"&gt;
  &lt;/object&gt;
</code>
      </pre>
      <pre>
        <code>
  &lt;a xlink:href="<span class="paramname">param(buylink)</span>" target="_new"&gt;...&lt;/&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="ad.svg" style="width: 200px; height:100px; display:inline;">
        <param name="buylink" value="http://example.com/shop" />
      </object>
      <object type="image/svg+xml" data="ad.svg?buylink=http%3A%2F%2Fexample.com%2Fbargains" style="width: 200px; height:100px; display:inline;">
    </object>
      <h4 id="param-el">2.4.7 Setting Multiple Aspects of Reused Content</h4>
      <p>This example shows the use of the <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#param-element"><span class="element-name">&#x2018;param&#x2019;</span></a> element with the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#UseElement"><span class="element-name">&#x2018;use&#x2019;</span></a> element, to pass on multiple values to a referenced graphic, to customize several aspects of it at once.  If no parameters are passed along, the flower will simply be colored with shades of white, black, and gray; with parameters, different parts of the flower can be given different colors for stroke and fill.</p>
      <pre>
        <code>
  &lt;defs&gt;
    &lt;g id="flower"&gt;
      &lt;radialGradient id="petals" cx="220" cy="250" gradientUnits="userSpaceOnUse"&gt;
        &lt;stop offset="0%" stop-color="param(petal1) white" /&gt;
        &lt;stop offset="50%" stop-color="param(petal2) gray" /&gt;
      &lt;/radialGradient&gt;
      &lt;path fill="param(base) black" d="..."/&gt;
      &lt;path fill="param(heart) darkgray" stroke="param(petal2)" stroke-width="2"  d="..."/&gt;
      &lt;path fill="url(#petals)" d="..."/&gt;
      &lt;path fill="url(#petals)" d="..."/&gt;
      &lt;path fill="url(#petals)" d="..."/&gt;
      &lt;path fill="url(#petals)" d="..."/&gt;
      &lt;path fill="url(#petals)" d="..."/&gt;
    &lt;/g&gt;
  &lt;/defs&gt;


  &lt;use id="use_0" xlink:href="#flower"/&gt;

  &lt;use id="use_1" xlink:href="#flower" x="330" y="170" transform="scale(1.3)" &gt;
    &lt;param name="base" value="brown" /&gt;
    &lt;param name="petal1" value="navy" /&gt;
    &lt;param name="petal2" value="ghostwhite" /&gt;
    &lt;param name="heart" value="pink" /&gt;
  &lt;/use&gt;

  &lt;use id="use_2" xlink:href="#flower" x="300" y="0"&gt;
    &lt;param name="base" value="cornflowerblue" /&gt;
    &lt;param name="petal1" value="white" /&gt;
    &lt;param name="petal2" value="blue" /&gt;
    &lt;param name="heart" value="darkslateblue" /&gt;
  &lt;/use&gt;

  &lt;use id="use_3" xlink:href="#flower" x="490" y="100"&gt;
    &lt;param name="base" value="gold" /&gt;
    &lt;param name="petal1" value="yellow" /&gt;
    &lt;param name="petal2" value="red" /&gt;
    &lt;param name="heart" value="darkorange" /&gt;
  &lt;/use&gt;

  &lt;use id="use_4" xlink:href="#flower" x="530" y="10" transform="scale(0.6)" &gt;
    &lt;param name="base" value="pink" /&gt;
    &lt;param name="petal1" value="magenta" /&gt;
    &lt;param name="petal2" value="purple" /&gt;
    &lt;param name="heart" value="lightpink" /&gt;
  &lt;/use&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="flowers.svg" style="width:395px; height:275px; display:inline;">
    </object>
      <h4 id="complex-components">2.4.8 Complex Reusable Components</h4>
      <p>This example demonstrates the use of the <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#param-element"><span class="element-name">&#x2018;param&#x2019;</span></a> attribute value with a complex reusable component, in this case a bar chart.  The component author has created a chart with a set number of bars, one for each month, and set the labels and the bar height to the value of the parameter for each month.  The content author using the component passes in the value for each month as a parameter, and the chart is presented accordingly.  There are limitations to this approach, e.g. you cannot add new bars, and the range of values is limited, but for certain kinds of complex components, the <a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/#param-element"><span class="element-name">&#x2018;param&#x2019;</span></a> attribute value can be very useful.</p>
      <pre>
        <code>
  &lt;object type="image/svg+xml" data="year-chart.svg" style="width:660px; height:320px; display:inline;"&gt;
    &lt;param name="jan" value="10"/&gt;
    &lt;param name="feb" value="30"/&gt;
    &lt;param name="mar" value="30"/&gt;
    &lt;param name="apr" value="100"/&gt;
    &lt;param name="may" value="80"/&gt;
    &lt;param name="jun" value="20"/&gt;
    &lt;param name="jul" value="55"/&gt;
    &lt;param name="aug" value="71"/&gt;
    &lt;param name="sep" value="6"/&gt;
    &lt;param name="oct" value="89"/&gt;
    &lt;param name="nov" value="45"/&gt;
    &lt;param name="dec" value="8"/&gt;
  &lt;/object&gt;
</code>
      </pre>
      <object type="image/svg+xml" data="year-chart.svg" style="width:660px; height:320px; display:inline;">
        <param name="jan" value="10" />
        <param name="feb" value="30" />
        <param name="mar" value="30" />
        <param name="apr" value="100" />
        <param name="may" value="80" />
        <param name="jun" value="20" />
        <param name="jul" value="55" />
        <param name="aug" value="71" />
        <param name="sep" value="6" />
        <param name="oct" value="89" />
        <param name="nov" value="45" />
        <param name="dec" value="8" />
      </object>
    </div>
    <h2 id="references">3 References</h2>
    <dl>
      <dt id="ref-SVGParam">
        <strong class="normref">[Param]</strong>
      </dt>
      <dd><cite class="w3cwd"><a href="http://www.w3.org/TR/2009/WD-SVGParam-20090616/">SVG Parameters 1.0, Part 2: Language </a></cite>,
      D. Schepers, editor.
      World Wide Web Consortium, <span class="wip">work in progress</span>,  16 June 2009.
      <br />This edition of SVG Parameters 1.0, Part 1:  is http://www.w3.org/TR/2009/WD-SVGParam-20090616/.
      <br />The <a href="http://www.w3.org/TR/SVGParam/">latest edition of SVG Parameters 1.0, Part 2: Language</a> is available at
      http://www.w3.org/TR/SVGParam/.
    </dd>
    </dl>
  </body>
</html>