---
title: SVG Tutorial
slug: Web/SVG/Tutorial
tags:
  - Intermediate
  - NeedsContent
  - NeedsHelp
  - NeedsUpdate
  - SVG
  - SVG:Tutorial
---
Scalable Vector Graphics, [SVG](/en-US/docs/Web/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](https://inkscape.org/en/learn/). Another good introduction to SVG is provided by the W3C's [SVG Primer](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html).

## Introducing SVG from Scratch

- [Introduction](/en-US/docs/Web/SVG/Tutorial/Introduction)
- [Getting Started](/en-US/docs/Web/SVG/Tutorial/Getting_Started)
- [Positions](/en-US/docs/Web/SVG/Tutorial/Positions)
- [Basic Shapes](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes)
- [Paths](/en-US/docs/Web/SVG/Tutorial/Paths)
- [Fills and Strokes](/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes)
- [Gradients](/en-US/docs/Web/SVG/Tutorial/Gradients)
- [Patterns](/en-US/docs/Web/SVG/Tutorial/Patterns)
- [Texts](/en-US/docs/Web/SVG/Tutorial/Texts)
- [Basic Transformations](/en-US/docs/Web/SVG/Tutorial/Basic_Transformations)
- [Clipping and masking](/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking)
- [Other content in SVG](/en-US/docs/Web/SVG/Tutorial/Other_content_in_SVG)
- [Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects)
- [SVG fonts](/en-US/docs/Web/SVG/Tutorial/SVG_fonts)
- [SVG Image tag](/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag)
- [Tools for SVG](/en-US/docs/Web/SVG/Tutorial/Tools_for_SVG)
- [SVG and CSS](/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS)

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
