HTML and CSS Reference
In-Depth Information
The Fundamentals of Creating sVG
Images and adding Them to Your Web Pages
Unlike traditional drawing, SVG can be “drawn” all in code. You
can use your favorite text editor to create any type of SVG illus-
tration. The easiest way to manage SVG drawings is to save each
illustration to a text file with the extension SVG. You can then
treat your SVG drawings as if they are image files like JPEG or
PNG files.
All SVG files will start with a line declaring the document is an
XML file. The following line should be placed at the start of all
your SVG documents:
<?xml version=”1.0” standalone=”yes”?>
Following the XML declaration is some information explaining
the SVG document. The first line specifies which version of SVG
you are using. The most commonly adopted version is 1.1:
<svg version=”1.1”
The viewBox property identifies the size of the canvas you are
working with. The viewBox is constructed of four properties that
identify the X and Y coordinates of the viewBox and width and
height.
viewBox=”0.0 0.0 300.0 800.0”
You can specify drawing attributes that should be used for
all objects in the image in the opening SVG properties. Here all
objects in the illustration will, by default, have no fill or stroke,
and a square line will be used to draw images with a stroke miter
of 5.
fill=”none”
stroke=”none”
stroke-linecap=”square”
stroke-miterlimit=”5”
The final two attributes provide links to the SVG namespace
standard.
xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”>
Drawing is managed through a number of elements, with
PATH being the main one. The role of the PATH element is to
draw out the specific coordinates of an image point by point. In
the following example, a single line is drawn.
