INSTALL
SVG VIEWER Before we can start writing SVG documents you need to install
the svg viewer. For this class we are going to use the SVG viewer provided
by Adobe. Please follow the instructions and install the viewer on your system.
First SVG DOCUMENT
Every SVG document start with <svg> and ends with </svg>. In this
example we have a blank SVG document. We have no other tags inside <svg>
and </svg> and as a result you do not see any drawing on the screen.
Also, note the attributes height and width which denote the dimensions for
the SVG document.
BASIC SHAPES
RECT SVG
has numerous tags for creating vector-based shapes. In this example we are
demonstrating the <rect> tag.
To see this tag's dtd click here.
CIRCLE
In this example we are demonstrating the <circle> tag. Please note that
circle coordinate are calculated from the center of the circle, hence the
attributes cx, and cy.
To see this tag's dtd click here.
ELLIPS
In this example we are demonstrating the <ellipse> tag. Please note
the difference between an ellipse and a circle is that ellipse does not have
the same values for its height and width, hence it has rx and ry attributes.
To see this tag's dtd click here.
LINE In
this example we are demonstrating the <line> tag. Please note a line
has a starting point x1, y1 and an ending point x2, y2.
To see this tag's dtd click here.
POLYLINE
In this example we are demonstrating the <polyline> tag. Please note
a polyline is made up of several points separated by space, the lines are
drawn sequentially.
To see this tag's dtd click here.
POLYLGON
In this example we are demonstrating the <polygon> tag. Please note
a polygon is made up of at least 3 points separated by space, the lines are
drawn sequentially. Polygon is meant to be and enclosed shape and polyline
a sequence of straight lines between points.
To see this tag's dtd click here.
CSS AND SVG
STYLE ATTRIBUTE
SVG allows for inline CSS styling via the style attribute. If you are familiar
with CSS style sheets then you should be on familiar land. In this example
we have taken the polygon example but have used the "fill" property and assigned
the color red, "#FF0000". Please note, for inline style the property is assigned
the value by ":" and the assignment has to end with ";".
STYLE ELEMENT
Along with inline styling, SVG has a document level styling. The document
level style follows the rules of CSS, inline style will overwrite the document
level when the same property is assigned a value. In this example we are demonstrating
several properties, fill-opacity, stroke, and stroke-width. fill-opacity,
accepts a value from 0 to 1. 1, will be fully filled and 0 is fully transparent.
stroke, is the color of the line, and stroke-width is the width of the line.
Please note, if you were wondering about the difference between polyline and
polygon, you can see that the polyline does not enclose the points to create
a shape.
EXTERNAL STYLE
SHEET Like HTML, you can have external CSS to. In this example we are
using a simple external CSS.
To view the CSS click here.
OTHER MAJOR TAGS
PATH In
this example we are demonstrating the <polygon> tag. path is one of
the most complicated tags in SVG as you will discover soon. What make path
complicated is the way one assigns a value to it's "d" attribute. The creators
of SVG came up with this scheme for creating complex paths so they could keep
SVG document to a reasonable size. In this simple example we have instructed
path to "M10,10" move to point 10,10 and then to draw a line "L50,50" to point
50,50. The "d" attribute has numerous commands, every command has an uppercased
and a lowercased version, "c" or "C". The uppercase letters execute the command
to an absolute point (coordinate) where is the lowercase ones to a relative
position.
To see this tag's dtd and more click here.
GROUPING
SVG allows grouping of several elements together as one unit with the <g>
tag. For example one can group a line and a circle as one unit. Since a several
objects are grouped together as one unit then they can all be controlled as
one unit. As an example we can apply a style to a group or dynamically change
a group property via EcmaScript (javascript). Note, how we have applied the
style to both line and circle in this example.
TEXT To
display text in SVG we would use the <text> tag. The text tag is a powerful
tag as it can utilize all the capabilities of CSS and more.
To see this tag's dtd and more click here.
LINKING
To link in SVG, is very similar to linking in HTML. SVG uses the <a>
tag, and like HTML uses the href attribute. However, most attributes of <a>
tag for SVG are from XLINK. Although, Adobe's SVG viewer does not require
it, it's a good idea to declare the XLINK namespace, 'xmlns:xlink="http://www.w3.org/1999/xlink"'.
To see this tag's dtd and more click here.
INTERACTIVE SVG
MOUSEOVER
SVG has several built-in functionality and they are easy to use. In this example
we are utilizing the <set> tag attribute modifier. We are setting the
value of attribute font-size for the text element to 40 upon the mouseover
event.
To see more on event handlers click here.
CHANGING THE
X This is very similar to the above example, except we are modifying the
"x" attribute upon mouseover.
SIMPLE ANIMATION
In here we are illustrating a very simple animation by gradually changing
the stroke property of text from red, "#FF0000" to white, "#FFFFFF". SVG has
a built-in element called animate which is triggered upon the mouseover on
the link tag. Please note the attribute, id on the <a> tag. The value
assigned to the "id" attribute, "link1" is used to activate the animate tag.
To see more on animation click here.
CLONING SVG ELEMENTS
CLONING THE
SIGN In this example we are going to clone an SVG element. Please look
at the source code and the comments that goes along with it.
