--- a/master/concepts.html Thu May 10 11:54:52 2012 +0200
+++ b/master/concepts.html Thu May 10 12:00:41 2012 +0200
@@ -14,224 +14,265 @@
<h1>Concepts</h1>
- <h2 id="Intro">Explaining the name: SVG</h2>
- <p class="explain">SVG stands for <a
- href="#Scalable">S</a>calable <a href="#Vector">V</a>ector <a
- href="#Graphics">G</a>raphics, an <a href="#XML">XML</a>
- grammar for <a href="#Stylable">stylable</a> graphics, usable
- as an <a href="#Namespace">XML namespace</a>.</p>
- <h3 id="Scalable" edit:toc="no">Scalable</h3>
- <p>To be scalable means to increase or decrease uniformly. In
- terms of graphics, scalable means not being limited to a
- single, fixed, pixel size. On the Web, scalable means that a
- particular technology can grow to a large number of files, a
- large number of users, a wide variety of applications. SVG,
- being a graphics technology for the Web, is scalable in both
- senses of the word.</p>
- <p>SVG graphics are scalable to different display resolutions,
- so that for example printed output uses the full resolution of
- the printer and can be displayed at the same size on screens of
- different resolutions. The same SVG graphic can be placed at
- different sizes on the same Web page, and re-used at different
- sizes on different pages. SVG graphics can be magnified to see
- fine detail, or to aid those with low vision.</p>
- <p>SVG graphics are scalable because the same SVG content can
- be a stand-alone graphic or can be referenced or included
- inside other SVG graphics, thereby allowing a complex
- illustration to be built up in parts, perhaps by several
- people. The <a href="#Symbols">symbol</a>, marker and <a
- href="#Fonts">font</a> capabilities promote re-use of graphical
- components, maximize the advantages of HTTP caching and avoid
- the need for a centralized registry of approved symbols.</p>
- <h3 id="Vector" edit:toc="no">Vector</h3>
- <p>Vector graphics contain geometric objects such as lines and
- curves. This gives greater flexibility compared to raster-only
- formats (such as PNG and JPEG) which have to store information
- for every pixel of the graphic. Typically, vector formats can
- also integrate raster images and can combine them with vector
- information such as clipping paths to produce a complete
- illustration; SVG is no exception.</p>
- <p>Since all modern displays are raster-oriented, the
- difference between raster-only and vector graphics comes down
- to where they are rasterized; client side in the case of vector
- graphics, as opposed to already rasterized on the server. SVG
- gives control over the rasterization process, for example to
- allow anti-aliased artwork without the ugly aliasing typical of
- low quality vector implementations. SVG also provides
- client-side <a href="#RasterEffects">raster filter effects</a>,
- so that moving to a vector format does not mean the loss of
- popular effects such as soft drop shadows.</p>
- <h3 id="Graphics" edit:toc="no">Graphics</h3>
- <p>Most existing XML grammars represent either textual
- information, or represent raw data such as financial
- information. They typically provide only rudimentary graphical
- capabilities, often less capable than the HTML 'img' element.
- SVG fills a gap in the market by providing a rich, structured
- description of vector and mixed vector/raster graphics; it can
- be used stand-alone, or as an <a href="#Namespace">XML
- namespace</a> with other grammars.</p>
- <h3 id="XML" edit:toc="no">XML</h3>
- <p>XML, a for
- structured information exchange, has become extremely popular
- and is both widely and reliably implemented. By being written
- in XML, SVG builds on this strong foundation and gains many
- advantages such as a sound basis for internationalization,
- powerful structuring capability, an object model, and so on. By
- building on existing, cleanly-implemented specifications,
- XML-based grammars are open to implementation without a huge
- reverse engineering effort.</p>
- <h3 id="Namespace" edit:toc="no">Namespace</h3>
- <p>It is certainly useful to have a stand-alone, SVG-only
- viewer. But SVG is also intended to be used as one component in
- a multi-namespace XML application. This multiplies the power of
- each of the namespaces used, to allow innovative new content to
- be created. For example, SVG graphics may be included in a
- document which uses any text-oriented XML namespace - including
- XHTML. A scientific document, for example, might also use <a
- href="http://www.w3.org/TR/2001/REC-MathML2-20010221/">MathML</a> for mathematics
- in the document. The combination of SVG and SMIL leads to
- interesting, time based, graphically rich presentations.</p>
- <p>SVG is a good, general-purpose component for any
- multi-namespace grammar that needs to use graphics.</p>
- <h3 id="Stylable" edit:toc="no">Stylable</h3>
- <p>The advantages of style sheets in terms of presentational
- control, flexibility, faster download and improved maintenance
- are now generally accepted, certainly for use with text. SVG
- extends this control to the realm of graphics.</p>
- <p>The combination of scripting, DOM and CSS is often termed
- "Dynamic HTML" and is widely used for animation, interactivity
- and presentational effects. SVG allows the same script-based
- manipulation of the document tree and the style sheet.</p>
- <h2 id="Concepts">Important SVG concepts</h2>
- <h3 id="GraphicalObjects" edit:toc="no">Graphical Objects</h3>
- <p>With any XML grammar, consideration has to be given to what
- exactly is being modelled. For textual formats, modelling is
- typically at the level of paragraphs and phrases, rather than
- individual nouns, adverbs, or phonemes. Similarly, SVG models
- graphics at the level of graphical objects rather than
- individual points.</p>
- <p>SVG provides a general path element, which can be used to
- create a huge variety of graphical objects, and also provides
- common <a>basic shapes</a>
- such as rectangles and ellipses. These are convenient for hand
- coding and may be used in the same ways as the more general
- path element. SVG provides fine control over the coordinate
- system in which graphical objects are defined and the
- transformations that will be applied during rendering.</p>
- <h3 id="Symbols" edit:toc="no">Symbols</h3>
- <p>It would have been possible to define some standard symbols
- that SVG would provide. But which ones? There would always be
- additional symbols for electronics, cartography, flowcharts,
- etc., that people would need that were not provided until the
- "next version". SVG allows users to create, re-use and share
- their own symbols without requiring a centralized registry.
- Communities of users can create and refine the symbols that
- they need, without having to ask a committee. Designers can be
- sure exactly of the graphical appearance of the symbols they
- use and not have to worry about unsupported symbols.</p>
- <p>Symbols may be used at different sizes and orientations, and
- can be restyled to fit in with the rest of the graphical
- composition.</p>
- <h3 id="RasterEffects" edit:toc="no">Raster Effects</h3>
- <p>Many existing Web graphics use the filtering operations
- found in paint packages to create blurs, shadows, lighting
- effects and so on. With the client-side rasterization used with
- vector formats, such effects might be thought impossible. SVG
- allows the declarative specification of filters, either singly
- or in combination, which can be applied on the client side when
- the SVG is rendered. These are specified in such a way that the
- graphics are still scalable and displayable at different
- resolutions.</p>
- <h3 id="Fonts" edit:toc="no">Fonts</h3>
- <p>Graphically rich material is often highly dependent on the
- particular font used and the exact spacing of the glyphs. In
- many cases, designers convert text to outlines to avoid any
- font substitution problems. This means that the original text
- is not present and thus searchability and accessibility suffer.
- In response to feedback from designers, SVG includes font
- elements so that both text and graphical appearance are
- preserved.</p>
- <h3 id="Animation" edit:toc="no">Animation</h3>
- <p>Animation can be produced via script-based manipulation of
- the document, but scripts are difficult to edit and interchange
- between authoring tools is harder. Again in response to
- feedback from the design community, SVG includes declarative
- animation elements which were designed collaboratively by the
- SVG and SYMM Working Groups. This allows the animated effects
- common in existing Web graphics to be expressed in SVG.</p>
- <h2 id="UsageOptions">Options for using SVG in Web pages</h2>
- <p>There are a variety of ways in which SVG content can be
- included within a Web page. Here are some of the options:</p>
- <dl>
- <dt>A stand-alone SVG Web page</dt>
- <dd> In this case, an SVG document (i.e., a Web resource whose
- MIME type is "<tt>image/svg+xml</tt>") is loaded directly
- into a user agent such as a Web browser. The SVG document is
- the Web page that is presented to the user.</dd>
- <dt>Embedding by reference</dt>
- <dd>In this case, a parent Web page references a separately
- stored SVG document and specifies that the given SVG
- document should be embedded as a component of the parent
- Web page. For HTML or XHTML, here are three options:
- <ul>
- <li>The HTML/XHTML <span
- class="element-name">'img'</span> element is the most
- common method for using graphics in HTML pages. For
- faster display, the width and height of the image can be
- given as attributes. One attribute that is required is
- <span class="attr-name">'alt'</span>, used to give an
- alternate textual string for people browsing with images
- off, or who cannot see the images. The string cannot
- contain any markup. A <span
- class="attr-name">'longdesc'</span> attribute lets you
- point to a longer description - often in HTML - which can
- have markup and richer formatting.</li>
- <li>The HTML/XHTML <span
- class="element-name">'object'</span> element can contain
- other elements nested within it, unlike <span
- class="element-name">'img'</span>, which is empty. This
- means that several different formats can be offered,
- using nested <span class="element-name">'object'</span>
- elements, with a final textual alternative (including
- markup, links, etc). The outermost element which can be
- displayed will be used.</li>
- <li>The HTML/XHTML <span
- class="element-name">'applet'</span> element which can
- invoke a Java applet to view SVG content within the given
- Web page. These applets can do many things, but a common
- task is to use them to display images, particularly ones
- in unusual formats or which need to be presented under
- the control of a program for some other reason.</li>
- </ul>
- </dd>
- <dt>Embedding inline</dt>
- <dd>In this case, SVG content is embedded inline directly within
- the parent Web page. An example is an XHTML Web page with an
- SVG document fragment textually included within the
- XHTML.</dd>
- <dt>External link, using the HTML <span
- class="element-name">'a'</span> element</dt>
- <dd>This allows any stand-alone SVG viewer to be used, which can
- (but need not) be a different program to that used to display
- HTML. This option typically is used for unusual image
- formats.</dd>
- <dt>Referenced from a CSS or XSL property</dt>
- <dd>When a user agent supports CSS-styled XML content [<a href="refs.html#ref-CSS2">CSS2</a>]
- or XSL [<a href="refs.html#ref-XSL">XSL</a>] and the user agent is a <a
- href="conform.html#ConformingSVGViewers">Conforming SVG
- Viewer</a>, then that user agent must support the ability to
- reference SVG resources wherever CSS or XSL properties allow
- for the referencing of raster images, including the ability
- to tile SVG graphics wherever necessary and the ability to
- composite the SVG into the background if it has transparent
- portions. Examples include the <a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/colors.html#propdef-background-image">
- <span class="property">'background-image'</span></a> and <a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html#propdef-list-style-image">
- <span class="property">'list-style-image'</span></a>
- properties ([<a href="refs.html#ref-CSS2">CSS2</a>], sections 14.2.1 and 12.6.2)
- that are included in both CSS and XSL.</dd>
- </dl>
+<h2 id="Intro">Explaining the name: SVG</h2>
+
+<p class="explain">SVG stands for <a
+href="#Scalable">S</a>calable <a href="#Vector">V</a>ector <a
+href="#Graphics">G</a>raphics, an <a href="#XML">XML</a>
+grammar for <a href="#Stylable">stylable</a> graphics, usable
+as an <a href="#Namespace">XML namespace</a>.</p>
+
+<h3 id="Scalable" edit:toc="no">Scalable</h3>
+
+<p>To be scalable means to increase or decrease uniformly. In
+terms of graphics, scalable means not being limited to a
+single, fixed, pixel size. On the Web, scalable means that a
+particular technology can grow to a large number of files, a
+large number of users, a wide variety of applications. SVG,
+being a graphics technology for the Web, is scalable in both
+senses of the word.</p>
+
+<p>SVG graphics are scalable to different display resolutions,
+so that for example printed output uses the full resolution of
+the printer and can be displayed at the same size on screens of
+different resolutions. The same SVG graphic can be placed at
+different sizes on the same Web page, and re-used at different
+sizes on different pages. SVG graphics can be magnified to see
+fine detail, or to aid those with low vision.</p>
+
+<p>SVG graphics are scalable because the same SVG content can
+be a stand-alone graphic or can be referenced or included
+inside other SVG graphics, thereby allowing a complex
+illustration to be built up in parts, perhaps by several
+people. The <a href="#Symbols">symbol</a>, marker and <a
+href="#Fonts">font</a> capabilities promote re-use of graphical
+components, maximize the advantages of HTTP caching and avoid
+the need for a centralized registry of approved symbols.</p>
+
+<h3 id="Vector" edit:toc="no">Vector</h3>
+
+<p>Vector graphics contain geometric objects such as lines and
+curves. This gives greater flexibility compared to raster-only
+formats (such as PNG and JPEG) which have to store information
+for every pixel of the graphic. Typically, vector formats can
+also integrate raster images and can combine them with vector
+information such as clipping paths to produce a complete
+illustration; SVG is no exception.</p>
+
+<p>Since all modern displays are raster-oriented, the
+difference between raster-only and vector graphics comes down
+to where they are rasterized; client side in the case of vector
+graphics, as opposed to already rasterized on the server. SVG
+gives control over the rasterization process, for example to
+allow anti-aliased artwork without the ugly aliasing typical of
+low quality vector implementations. SVG also provides
+client-side <a href="#RasterEffects">raster filter effects</a>,
+so that moving to a vector format does not mean the loss of
+popular effects such as soft drop shadows.</p>
+
+<h3 id="Graphics" edit:toc="no">Graphics</h3>
+
+<p>Most existing XML grammars represent either textual
+information, or represent raw data such as financial
+information. They typically provide only rudimentary graphical
+capabilities, often less capable than the HTML 'img' element.
+SVG fills a gap in the market by providing a rich, structured
+description of vector and mixed vector/raster graphics; it can
+be used stand-alone, or as an <a href="#Namespace">XML
+namespace</a> with other grammars.</p>
+
+<h3 id="XML" edit:toc="no">XML</h3>
+
+<p>XML, a for
+structured information exchange, has become extremely popular
+and is both widely and reliably implemented. By being written
+in XML, SVG builds on this strong foundation and gains many
+advantages such as a sound basis for internationalization,
+powerful structuring capability, an object model, and so on. By
+building on existing, cleanly-implemented specifications,
+XML-based grammars are open to implementation without a huge
+reverse engineering effort.</p>
+
+<h3 id="Namespace" edit:toc="no">Namespace</h3>
+
+<p>It is certainly useful to have a stand-alone, SVG-only
+viewer. But SVG is also intended to be used as one component in
+a multi-namespace XML application. This multiplies the power of
+each of the namespaces used, to allow innovative new content to
+be created. For example, SVG graphics may be included in a
+document which uses any text-oriented XML namespace - including
+XHTML. A scientific document, for example, might also use <a
+href="http://www.w3.org/TR/2001/REC-MathML2-20010221/">MathML</a> for mathematics
+in the document. The combination of SVG and SMIL leads to
+interesting, time based, graphically rich presentations.</p>
+
+<p>SVG is a good, general-purpose component for any
+multi-namespace grammar that needs to use graphics.</p>
+
+<h3 id="Stylable" edit:toc="no">Stylable</h3>
+
+<p>The advantages of style sheets in terms of presentational
+control, flexibility, faster download and improved maintenance
+are now generally accepted, certainly for use with text. SVG
+extends this control to the realm of graphics.</p>
+
+<p>The combination of scripting, DOM and CSS is often termed
+"Dynamic HTML" and is widely used for animation, interactivity
+and presentational effects. SVG allows the same script-based
+manipulation of the document tree and the style sheet.</p>
+
+<h2 id="Concepts">Important SVG concepts</h2>
+
+<h3 id="GraphicalObjects" edit:toc="no">Graphical Objects</h3>
+<p>With any XML grammar, consideration has to be given to what
+exactly is being modelled. For textual formats, modelling is
+typically at the level of paragraphs and phrases, rather than
+individual nouns, adverbs, or phonemes. Similarly, SVG models
+graphics at the level of graphical objects rather than
+individual points.</p>
+
+<p>SVG provides a general path element, which can be used to
+create a huge variety of graphical objects, and also provides
+common <a>basic shapes</a>
+such as rectangles and ellipses. These are convenient for hand
+coding and may be used in the same ways as the more general
+path element. SVG provides fine control over the coordinate
+system in which graphical objects are defined and the
+transformations that will be applied during rendering.</p>
+
+<h3 id="Symbols" edit:toc="no">Symbols</h3>
+
+<p>It would have been possible to define some standard symbols
+that SVG would provide. But which ones? There would always be
+additional symbols for electronics, cartography, flowcharts,
+etc., that people would need that were not provided until the
+"next version". SVG allows users to create, re-use and share
+their own symbols without requiring a centralized registry.
+Communities of users can create and refine the symbols that
+they need, without having to ask a committee. Designers can be
+sure exactly of the graphical appearance of the symbols they
+use and not have to worry about unsupported symbols.</p>
+
+<p>Symbols may be used at different sizes and orientations, and
+can be restyled to fit in with the rest of the graphical
+composition.</p>
+
+<h3 id="RasterEffects" edit:toc="no">Raster Effects</h3>
+
+<p>Many existing Web graphics use the filtering operations
+found in paint packages to create blurs, shadows, lighting
+effects and so on. With the client-side rasterization used with
+vector formats, such effects might be thought impossible. SVG
+allows the declarative specification of filters, either singly
+or in combination, which can be applied on the client side when
+the SVG is rendered. These are specified in such a way that the
+graphics are still scalable and displayable at different
+resolutions.</p>
+
+<h3 id="Fonts" edit:toc="no">Fonts</h3>
+
+<p>Graphically rich material is often highly dependent on the
+particular font used and the exact spacing of the glyphs. In
+many cases, designers convert text to outlines to avoid any
+font substitution problems. This means that the original text
+is not present and thus searchability and accessibility suffer.
+In response to feedback from designers, SVG includes font
+elements so that both text and graphical appearance are
+preserved.</p>
+
+<h3 id="Animation" edit:toc="no">Animation</h3>
+
+<p>Animation can be produced via script-based manipulation of
+the document, but scripts are difficult to edit and interchange
+between authoring tools is harder. Again in response to
+feedback from the design community, SVG includes declarative
+animation elements which were designed collaboratively by the
+SVG and SYMM Working Groups. This allows the animated effects
+common in existing Web graphics to be expressed in SVG.</p>
+
+<h2 id="UsageOptions">Options for using SVG in Web pages</h2>
+
+<p>There are a variety of ways in which SVG content can be
+included within a Web page. Here are some of the options:</p>
+
+<dl>
+ <dt>A stand-alone SVG Web page</dt>
+ <dd>In this case, an SVG document (i.e., a Web resource whose
+ MIME type is "<tt>image/svg+xml</tt>") is loaded directly
+ into a user agent such as a Web browser. The SVG document is
+ the Web page that is presented to the user.</dd>
+
+ <dt>Embedding by reference</dt>
+ <dd>In this case, a parent Web page references a separately
+ stored SVG document and specifies that the given SVG
+ document should be embedded as a component of the parent
+ Web page. For HTML or XHTML, here are three options:
+ <ul>
+ <li>The HTML/XHTML <span
+ class="element-name">'img'</span> element is the most
+ common method for using graphics in HTML pages. For
+ faster display, the width and height of the image can be
+ given as attributes. One attribute that is required is
+ <span class="attr-name">'alt'</span>, used to give an
+ alternate textual string for people browsing with images
+ off, or who cannot see the images. The string cannot
+ contain any markup. A <span
+ class="attr-name">'longdesc'</span> attribute lets you
+ point to a longer description - often in HTML - which can
+ have markup and richer formatting.
+ <p class='issue'>HTML5 doesn't have longdesc; we should
+ reference the appropriate aria attributes.</p></li>
+
+ <li>The HTML/XHTML <span
+ class="element-name">'object'</span> element can contain
+ other elements nested within it, unlike <span
+ class="element-name">'img'</span>, which is empty. This
+ means that several different formats can be offered,
+ using nested <span class="element-name">'object'</span>
+ elements, with a final textual alternative (including
+ markup, links, etc). The outermost element which can be
+ displayed will be used.</li>
+
+ <li>The HTML/XHTML <span
+ class="element-name">'applet'</span> element which can
+ invoke a Java applet to view SVG content within the given
+ Web page. These applets can do many things, but a common
+ task is to use them to display images, particularly ones
+ in unusual formats or which need to be presented under
+ the control of a program for some other reason.</li>
+ </ul>
+ </dd>
+
+ <dt>Embedding inline</dt>
+ <dd>In this case, SVG content is embedded inline directly within
+ the parent Web page. An example is an XHTML Web page with an
+ SVG document fragment textually included within the
+ XHTML.</dd>
+
+ <dt>External link, using the HTML <span
+ class="element-name">'a'</span> element</dt>
+ <dd>This allows any stand-alone SVG viewer to be used, which can
+ (but need not) be a different program to that used to display
+ HTML. This option typically is used for unusual image
+ formats.</dd>
+
+ <dt>Referenced from a CSS or XSL property</dt>
+ <dd>When a user agent supports CSS-styled XML content [<a href="refs.html#ref-CSS2">CSS2</a>]
+ or XSL [<a href="refs.html#ref-XSL">XSL</a>] and the user agent is a <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewer</a>, then that user agent must support the ability to
+ reference SVG resources wherever CSS or XSL properties allow
+ for the referencing of raster images, including the ability
+ to tile SVG graphics wherever necessary and the ability to
+ composite the SVG into the background if it has transparent
+ portions. Examples include the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/colors.html#propdef-background-image">
+ <span class="property">'background-image'</span></a> and <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html#propdef-list-style-image">
+ <span class="property">'list-style-image'</span></a>
+ properties ([<a href="refs.html#ref-CSS2">CSS2</a>], sections 14.2.1 and 12.6.2)
+ that are included in both CSS and XSL.</dd>
+</dl>
</body>
</html>