mozilla

Revision 44665 of SVG

  • Revision slug: SVG
  • Revision title: SVG
  • Revision id: 44665
  • Created:
  • Creator: Azer
  • 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 Macromedia'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.


Documentation

SVG in Firefox
This article describes the subset and behavior of the SVG 1.1 specification as currently implemented in Firefox 2.
An Introduction to using SVG in XHTML
This article and its associated example show 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 XHTML.
SVG Authoring Guidelines
jwatt here discusses some of the most common mistakes made in SVG content, and explains what SVG maintainers can do to fix them.
Mozilla SVG Project FAQ
This FAQ was originally drawn up after searching through the newsgroup mozilla.dev.tech.svg and the discussion forums at forums.mozillazine.org to see what sort of questions were being asked about SVG in Mozilla.

View All...

Community

  • View Mozilla forums...

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

Tools

View All...

Related Topics

XML, Canvas

Categories

Interwiki Language Links


{{ wiki.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 Macromedia'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>
<h4 name="Documentation"> <a href="Special:Tags?tag=SVG&amp;language=en">Documentation</a> </h4>
<dl><dt> <a href="en/SVG_in_Firefox">SVG in Firefox</a>
</dt><dd> <small>This article describes the subset and behavior of the SVG 1.1 specification as currently implemented in Firefox 2.</small>
</dd></dl>
<dl><dt> <a href="en/SVG_In_HTML_Introduction">An Introduction to using SVG in XHTML</a>
</dt><dd> <small>This article and its <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">associated example</a> show 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 XHTML.</small>
</dd></dl>
<dl><dt> <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a>
</dt><dd> <small>jwatt here discusses some of the most common mistakes made in SVG content, and explains what SVG maintainers can do to fix them.</small>
</dd></dl>
<dl><dt> <a class="external" href="http://www.mozilla.org/projects/svg/faq.html">Mozilla SVG Project FAQ</a>
</dt><dd> <small>This FAQ was originally drawn up after searching through the newsgroup  mozilla.dev.tech.svg and the discussion forums at forums.mozillazine.org to see what sort of questions were being asked about SVG in Mozilla.</small>
</dd></dl>
<p><span class="alllinks"><a href="Special:Tags?tag=SVG&amp;language=en">View All...</a></span>
</p>
</td>
<td>
<h4 name="Community"> Community </h4>
<ul><li> View Mozilla forums...
</li></ul>
<p>{{template.DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
</p>
<ul><li> <a class="external" href="http://wiki.svg.org/">SVG Wiki</a>
</li></ul>
<h4 name="Tools"> Tools </h4>
<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 class="external" href="http://rainbow9.org/">Rainbow9 - Web Based IDE</a>
</li></ul>
<p><span class="alllinks"><a href="Special:Tags?tag=SVG:Tools&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>
</td></tr></tbody></table>
<p><span class="comment">Categories</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p><p><br>
</p>{{ wiki.languages( { "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}
Revert to this revision