SVG Basics

This page will explain the basics of Scalable Vector Graphics. SVG is used to define vector-based graphics for the Web. A well known user of SVG-images is Wikipedia.

Usage

Open your favorite text-editor and enter your SVG code. Save it as a *.svg file (for example: myImage.svg). Then you can open it with an SVG-supporter webbrowser or you could place it into your web directory.

SVG Syntax

SVG files have the *.svg extension.

Example of a SVG file
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%"
     height="100%"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg">

	<circle cx="75"
           	cy="125"
           	r="35"
           	stroke="red"
           	stroke-width="5"
           	fill="black"/>

</svg>
Tags

SVG files start with a XML Declaration and have a Doctype. (See the XML Basics for more information). After those tags we have an SVG start- and end-tag.

Svg start- and end-tag: 

<svg></svg>
Notation

The following code below is simillar but we prefer the notation from the SVG Example above. It takes more lines but is better to read and edit. 

<circle cx="75"
        cy="125"
        r="35"
        stroke="red"
        stroke-width="5"
        fill="black"/>

or

<circle cx="75" cy="125" r="35" stroke="red" stroke-width="5" fill="black"/>

Shapes

Predefined svg tags:

  • Rectangle <rect />
  • Circle <circle />
  • Ellipse <ellipse />
  • Line <line />
  • Polyline <polyline />
  • Polygon <polygon />
  • Path <path />
SVG Circle
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%"
     height="100%"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg">

	<circle cx="100"
           	cy="100"
           	r="65"
           	stroke="black"
           	stroke-width="2"
           	fill="red"/>

</svg>
SVG Rectangle
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%"
     height="100%"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg">

	<rect width="300"
	      height="100"
	      style="fill:rgb(0,0,255);
	      stroke-width:1;
	      stroke:rgb(0,0,0)"/>

</svg>