SVG tutorial

Introduction

SVG stands for Scalable Vector Graphics. It is a World Wide Web Consorcium (W3C) recommendation.

SVG uses XML to describe two-dimensional graphics that consist of lines, curves, and text. Graphics in SVG has compact and portable representation form. SVG graphics can be added to web pages (HTML or XHTML) and to Extensible Stylesheet Language Formatting Objects (XSL-FO) documents (fo further transformation to high-quality printable PDF).

Interest in SVG is growing rapidly, and there are many tools for creation and viewing SVG files available from major companies. Today most web browser can display SVG just the same way as they display PNG, GIF, and JPG.

SVG features

  • Being "Vector" means that SVG graphics has vector or vector-like structure and are described with numbers.
  • Being "Scalable" means that SVG graphics can be scaled without loss of image quality. This is possible because of vector graphic nature - the graphics are defined as numbers (not pixels) at specified sets of coordinates.
  • SVG doesn't suit well for bitmap graphics such as photographs.
  • Being an XML format SVG has many repeated parts and therefy can be compressed. The result file may be reduced to 20% of the original size.
  • SVG is ideal for computer-generated graphs, charts, diagrams, maps and other detailed graphic images.

About the Tutorial

This tutorial is created for the purpose of mastering SVG in a short period of time. We hope the SVG tutorial will help you in developping your projects and will serve as a quick reference.

In this tutorial we will try to cover the most important things about SVG and its main elements and attributes. We are not going to cover all the SVG Specification. We will try to give you an appropriate understanding of the SVG basis. Having mastered the basics you will be able to consult the W3C SVG Specification for advanced knowledge.

This tutorial is "in progress".

If you are not sure about the format you will use in your project, look through the SVG Examples page to get a quick overview of the SVG's capabilities.

This tutorial is based on the SVG 1.1 Specification, a W3C Recommendation from January 14, 2003.