SVG Tutorial


SVG stands for Scalable Vector Graphics.

SVG defines graphics in XML format.

Start learning SVG now!

SVG Example


<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />


Try it yourself »

Click on the "Try it Yourself" button to see how it works.

SVG Examples

Learn from examples! With our editor, you can edit the SVG, and click on a button to view the result.


SVG Reference

At W3Schools you will find a complete SVG reference, listing all SVG elements from the W3C Recommendation (SVG Version 1.1).

SVG Reference

Color Picker