Revision 996881 of SVG Tutorial

<p>Scalable Vector Graphics, <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.</p>

<p>This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at <a class="external" href="https://inkscape.org/en/learn/" title="https://inkscape.org/doc/">Inkscape's documentation page</a>. Another good introduction to SVG is provided by the W3C's <a class="external" href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p>

<div class="note">The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!</div>

<h5 id="Introducing_SVG_from_Scratch">Introducing SVG from Scratch</h5>

<ul>
 <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introduction</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Getting Started</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Positions</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradients</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Patterns</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Texts</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Filter effects</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG fonts</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG&nbsp;Image tag</a></li>
 <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li>
</ul>

<p>The following topics are more advanced and hence should get their own tutorials.</p>

<h5 id="Scripting_SVG_with_JavaScript">Scripting SVG with JavaScript</h5>

<p>TBD</p>

<h5 id="SVG_filters_tutorial">SVG filters tutorial</h5>

<p>TBD</p>

<h5 id="Animations_with_SMIL_in_SVG">Animations with SMIL in SVG</h5>

<p>TBD</p>

<h5 id="Creating_fonts_in_SVG">Creating fonts in SVG</h5>

<p>TBD</p>