SVG

  • Revision slug: Web/SVG
  • Revision title: SVG
  • Revision id: 439699
  • Created:
  • Creator: Sole
  • Is current revision? No
  • Comment remove dead links + fix typo

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. SVG is essentially 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) 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 element reference
Get details about each SVG element.
SVG attribute reference
Get details about each SVG attribute.
SVG DOM interface reference
Get details about the whole SVG DOM API.
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.

View All...

Community

  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}

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.

{{HTML5ArticleTOC}}

Revision Source

<div class="callout-box">
  <strong><a href="/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Getting Started</a></strong><br />
  This tutorial will help get you started using SVG.</div>
<p><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a> markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.</p>
<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (i.e., a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other <a href="http://www.w3.org/">W3C</a> standards such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> and <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
<div class="cleared row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation">Documentation</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/SVG/Element">SVG element reference</a></dt>
      <dd>
        Get details about each SVG element.</dd>
      <dt>
        <a href="/en-US/docs/SVG/Attribute">SVG attribute reference</a></dt>
      <dd>
        Get details about each SVG attribute.</dd>
      <dt>
        <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt>
      <dd>
        Get details about the whole SVG DOM API.</dd>
      <dt>
        Enhance HTML content</dt>
      <dd>
        SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.</dd>
      <dt>
        SVG in Mozilla</dt>
      <dd>
        Notes and information on how SVG is implemented in Mozilla.
        <ul>
          <li><a href="/en-US/docs/SVG_in_Firefox">How much SVG is implemented in Firefox</a></li>
          <li><a href="/en-US/docs/SVG_in_Firefox">Tutorial for how to use </a></li>
          <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG in XHTML</a></li>
        </ul>
      </dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p>
    <h2 class="Community" id="Community">Community</h2>
    <ul>
      <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
    </ul>
    <h2 class="Tools" id="Tools">Tools</h2>
    <ul>
      <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
      <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li>
      <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">More Tools...</a></li>
      <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li>
    </ul>
  </div>
  <div class="section">
    <h2 class="Related_Topics" id="Examples">Examples</h2>
    <ul>
      <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) &amp; <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li>
      <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li>
      <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li>
      <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li>
      <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li>
      <li>Slides and demos from talk on <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> at SVG Open 2009</li>
      <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li>
      <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li>
      <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li>
      <li>More samples (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
    </ul>
    <h3 id="Animation_and_interactions">Animation and interactions</h3>
    <p>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p>
    <ul>
      <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li>
      <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li>
      <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li>
      <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li>
    </ul>
    <h3 id="Mapping.2C_charting.2C_games_.26_3D_experiments">Mapping, charting, games &amp; 3D experiments</h3>
    <p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p>
    <ul>
      <li><a href="http://www.codedread.com/yastframe.php">An SVG Tetris</a> &amp; <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
      <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a> game</li>
      <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li>
      <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> &amp; <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li>
      <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li>
    </ul>
  </div>
</div>
<div>
  {{HTML5ArticleTOC}}</div>
Revert to this revision