Revision 44679 of SVG

  • Revision slug: SVG
  • Revision title: SVG
  • Revision id: 44679
  • Created:
  • Creator: Jeff Schiller
  • Is current revision? No
  • Comment

Revision Content

Getting Started
This tutorial will help get you started using SVG.
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. Basically SVG is to graphics what XHTML is to text.

SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard for all intents and purposes) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.


Why use SVG?

Great Image Format
SVG is a vector graphics format. Vector graphics can be scaled without loss of image quality, while raster (bitmap) graphics cannot.

Enhance HTML Content
SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.

SVG in Mozilla
Notes and information on how SVG is implemented in Mozilla.

Tools

Animation and Interactions
Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

Mapping, Charting, Games & 3D Experiments
While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

Community

  • View Mozilla forums...

{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}

View All...

Related Topics

XML, Canvas

Categories

Interwiki Language Links


{{ languages( { "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}

Revision Source

<p>
</p>
<div class="callout-box"><b><a href="en/SVG/Tutorial">Getting Started</a></b><br>
This tutorial will help get you started using SVG.</div>
<div><b>Scalable Vector Graphics (SVG)</b> is an <a href="en/XML">XML</a> markup language for describing two-dimensional vector graphics. Basically SVG is to graphics what XHTML is to text.
<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a class="external" href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (i.e., a standard for all intents and purposes) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other <a class="external" href="http://www.w3.org/">W3C</a> standards such as <a href="en/CSS">CSS</a>, <a href="en/DOM">DOM</a> and <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.
</p>
</div>
<p><br style="clear:both;">
</p>
<table class="topicpage-table">
<tbody><tr><td colspan="2">
<h4 name="Why_use_SVG.3F"> Why use SVG? </h4>
</td>
</tr>
<tr><td>
<dl><dt> Great Image Format
</dt><dd> <small>SVG is a vector graphics format. Vector graphics can be scaled without loss of image quality, while raster (bitmap) graphics cannot.
</small></dd></dl>
<ul><li> <a class="external" href="http://www.croczilla.com/svg/samples/lion/lion.svg">Lion</a>, <a class="external" href="http://www.croczilla.com/svg/samples/butterfly/butterfly.svg">Butterfy</a> &amp; <a class="external" href="http://www.croczilla.com/svg/samples/tiger/tiger.svg">Tiger</a>
</li><li> <a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a>
</li><li> More samples (<a class="external" href="http://www.croczilla.com/svg/samples/">SVG Samples croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a>)
</li></ul>
<p>
</p>
<dl><dt> Enhance HTML Content
</dt><dd> <small>SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.
</small></dd></dl>
<ul><li> Tutorial for how to use <a href="en/SVG_In_HTML_Introduction">SVG in XHTML</a>
</li><li> Google <a class="external" href="http://maps.google.com">Maps</a> (route overlay) &amp; <a class="external" href="http://docs.google.com">Docs</a> (spreadsheet charting)
</li><li> <a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a>
</li></ul>
<p>
</p>
<dl><dt> SVG in Mozilla
</dt><dd> <small>Notes and information on how SVG is implemented in Mozilla.
</small></dd></dl>
<ul><li> <a href="en/SVG_in_Firefox">SVG 1.1 specification</a> as currently implemented in Firefox
</li><li> <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a>
</li><li> An overview of the <a href="en/Mozilla_SVG_Project">Mozilla SVG Project</a>
</li><li> <a href="en/Mozilla_SVG_Project_FAQ">Mozilla SVG Project FAQ</a>
</li></ul>
<p>
</p>
<dl><dt> Tools
</dt></dl>
<p><small>
</small></p>
<ul><li> <a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a>
</li><li> <a class="external" href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a>
</li><li> <a href="Special:Tags?tag=SVG:Tools&amp;language=en">More Tools...</a>
</li></ul>
<p>
</p>
</td><td>
<dl><dt> Animation and Interactions
</dt><dd> <small>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.
</small></dd></dl>
<ul><li> Firefox extension (<a class="external" href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support
</li><li> Interactive <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation
</li><li> <a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code>
</li><li> Animated <a class="external" href="http://lab.vodafone.com/vienna/">art</a>
</li></ul>
<p>
</p>
<dl><dt> Mapping, Charting, Games &amp; 3D Experiments
</dt><dd> <small>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.
</small></dd></dl>
<ul><li> <a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">Yet Another SVG Tetris</a> &amp; <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a>
</li><li> <a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a> game
</li><li> <a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">US popuplation map</a> &amp; <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">Germany population chart</a>
</li><li> <a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> &amp; <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a>
</li><li> <a class="external" href="http://www.amaltas.org/svgapp">SVG+DOM based drawing tool</a>
</li></ul>
<p>
</p>
<dl><dt> Community
</dt></dl>
<p><small>
</small></p>
<ul><li> View Mozilla forums...
</li></ul>
<p>{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}
</p>
<ul><li> <a class="external" href="http://wiki.svg.org/">SVG Wiki</a>
</li></ul>
<p>
</p>
</td></tr>
</tbody></table>
<p><span class="alllinks"><a href="Special:Tags?tag=SVG&amp;language=en">View All...</a></span>
</p>
<h4 name="Related_Topics"> Related Topics </h4>
<dl><dd> <a href="en/XML">XML</a>, <a href="en/HTML/Canvas">Canvas</a>
</dd></dl>
<p><span class="comment">Categories</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p><p><br>
</p>{{ languages( { "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}
Revert to this revision