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:
heightgive the size of the SVG in pixels relative to the host document.
viewBoxgives the size of the shape in SVG units (not pixels). It has four numbers giving the left side, top side, width, and height. Y coordinates run downwards.
ellipsedraws an ellipse.
rygives its center’s X and Y coordinates and its horizontal and vertical radii, all in SVG units.
pathgives the shape of the path in a compact form specified as the
dattribute. Each path is broken up into commands, which are detailed further in the SVG specification. The most important of these are perhaps M, L, and Z: the M command moves the pen; the L command draws with the pen, moving it to a new position; and the Z command closes the shape by drawing with the pen straight to the shape’s beginning. In general, numbers given in the path specification are in SVG units, relative to the SVG document itself.
stylegives styling instructions for the path or ellipse. Perhaps the most important style rules are
stroke-width, and the following are examples of the
styleattribute, which are mostly self-explanatory:
pxmeans an SVG unit, relative to the SVG document itself).
An SVG document can have any number of
ellipse elements, and each one is a separate shape. Finally, each
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(2, 2) scale(2)'.
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.