peteroupc.github.io

Essentials of SVG

The following short note explains the most useful things to know when writing vector graphics to SVG.

First, we start with a skeleton of an SVG file (which uses the XML data format):

<svg width='300px' height='300px' viewBox='0 0 100 100'
     xmlns='http://www.w3.org/2000/svg'>
     <ellipse style='stroke:none;fill:red' cx='10' cy='10' rx='2' ry='2'/>
     <path style='stroke:black;fill:none' d='M10 10L20 20 L30 10Z'/>
</svg>

In this simple example, we can already see several useful things:

An SVG document can have any number of path and/or ellipse elements, and each one is a separate shape. Finally, each path and ellipse element can have a transform attribute, which describes an optional geometric transformation. The attribute’s value is made up of one or more commands described further in the SVG specification. The commands, which are followed in the order written, include “translate(x,y)” which moves the zero-point; “rotate(d)” which rotates the coordinate system by d degrees, and “scale(x)” which scales the coordinates by a factor of x. Examples of the attribute include transform='translate(3, 5)', transform='rotate(90)', and transform=' translate(2, 2) scale(2)'.

License

Any copyright to this page is released to the Public Domain. In case this is not possible, this page is also licensed under Creative Commons Zero.