--- title: SVG slug: Web/SVG tags: - NeedsTranslation - References - SVG - TopicStub translation_of: Web/SVG --- <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) & <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_charting_games_3D_experiments">Mapping, charting, games & 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> & <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> & <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> <p> </p>