SVG Tutorial

  • Revision slug: SVG/Tutorial
  • Revision title: SVG Tutorial
  • Revision id: 74732
  • Created:
  • Creator: Manuel_Strehl
  • Is current revision? No
  • Comment 2 words added

Revision Content

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.

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 Inkscape's documentation page.

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!
Introducing SVG from Scratch

The following topics are more advanced and hence should get their own tutorials.

Scripting SVG with JavaScript

TBD

SVG filters tutorial

TBD

Animations with SMIL in SVG

TBD

Creating fonts in SVG

TBD

{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}

Revision Source

<p>Scalable Vector Graphics, <a href="/en/SVG" title="en/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="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape's documentation page</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>Introducing SVG from Scratch</h5>
<ul> <li><a href="/en/SVG/Tutorial/Introduction" title="en/SVG/Tutorial/Introduction">Introduction</a></li> <li><a href="/en/SVG/Tutorial/Getting_Started" title="en/SVG/Tutorial/Getting_Started">Getting Started</a></li> <li><a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">Positions</a></li> <li><a href="/en/SVG/Tutorial/Basic_Shapes" title="en/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li> <li><a href="/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">Paths</a></li> <li><a href="/en/SVG/Tutorial/Fills_and_Strokes" title="en/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li> <li><a href="/en/SVG/Tutorial/Gradients" title="en/SVG/Tutorial/Gradients">Gradients</a></li> <li><a href="/en/SVG/Tutorial/Patterns" title="en/SVG/Tutorial/Patterns">Patterns</a></li> <li><a href="/en/SVG/Tutorial/Texts" title="en/SVG/Tutorial/Texts">Texts</a></li> <li><a href="/en/SVG/Tutorial/Basic_Transformations" title="en/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li> <li><a href="/en/SVG/Tutorial/Clipping_and_masking" title="en/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li> <li><a href="/en/SVG/Tutorial/Other_content_in_SVG" title="en/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li> <li><a href="/en/SVG/Tutorial/SVG_Fonts" title="en/SVG/Tutorial/SVG Fonts">SVG Fonts</a></li> <li>lots of other entries here</li> <li><a href="/en/SVG/Tutorial/Tools_for_SVG" title="en/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li> <li><a href="/en/SVG/Tutorial/Other_Tutorials" title="en/SVG/Tutorial/Other_Tutorials">Other Tutorials</a></li>
</ul>
<p>The following topics are more advanced and hence should get their own tutorials.</p><h5>Scripting SVG with JavaScript</h5>
<p>TBD</p>
<h5>SVG filters tutorial</h5>
<p>TBD</p>
<h5>Animations with SMIL in SVG</h5>
<p>TBD</p>
<h5>Creating fonts in SVG</h5>
<p>TBD</p>
<p>{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p>
Revert to this revision