SVG is the Abbreviation for Scalable Vector Graphics.
It is as the name implies a VECTOR based tool used for drawing 2D objects in HTML5.
SVG was developed by The World Wide Web Consortium(w3c) in 1999. Since then it has been the only HTML5 drawing tool which can still retain it's quality after being expanded or zoomed because it is vector based rather than pixel based.
One of the beautiful feature of SVG is the ability to make awesome and very easy animations with the tool, thus making it more preferable for 2D based animations to the pixel based HTML5 CANVAS. Click Next to learn more.
SVG Elements
SVG has many number of Elements with which drawings and animations are easily made.
Heres a list of the most popular SVG elements
a
animate
animateMotion
animateTransform
audio
circle
clipPath
defs
desc
ellipse
fe(Filter Effects)
foreignObject
g
iframe
line
linearGradient
marker
mask
metadata
mpath
path
pattern
polygon
polyline
radialGradient
rect
script(JavaScript in SVG)
stop
style(CSS in SVG)
switch
symbol
text
textPath
tspan
use
Svg is fast, resolution independent and easy to learn. Don't worry if you have never met any of the above listed elements before as I'm going to walk you through each one of them step by step.
Note: Some unsupported elements were excluded from the above list and some of the listed elements are not supported in Internet Explorer.
SVG Attributes
To start drawing on SVG, one has to open the SVG tag.
Attributes
width
The svg width attribute is used to specify the width of your svg element.
height
The svg height attribute is used to specify the height of your svg element.
viewBox
This is the attribute which makes your svg drawings responsive. It accepts four attributes "a, b, c, d". a specifies a horizontal left padding for your svg element.
b specifies a vertical top padding for your svg element.
c,d gives a usable height to your svg element irrespective of its actual height.
If the viewBox is set. for each child element of the svg element, every input for the width and height is presented as a percentage of c and d respectively.
All you need is a basic understanding of HTML5 and you're good to go!
CHALLENGE
Which one of the following is NOT an SVG attribute?
Shapes
Basic Shapes are those objects which can be easily made using predefined tools.
The below listed elements makes drawing basic shapes easier in SVG.
rect
circle
ellipse
line
polyline
polygon
Each one of the above elements have different uses, click next to learn more!
rect
The rect svg element is used to draw rectangles.
attributes
x
Used to specify the left padding of the <rect>
y
Used to specify the top padding of the <rect>
width and height
Used to specify the width and height of the <rect>
Now, to make a rectangle, we first need to open the SVG tag and set up all of it's default attributes if we want or leave it because the svg tag has no required attribute. Then inside of it, we open the <rect> ... </rect> tag and as well, set up its default 4 attributes making sure that the 2 required attributes width and height are properly set.
lets now make a square of sides 60px with the rect tag!
Theres another attribute called fill, it specifies the background color of every svg element, we can easily change the fill of our square to green by just adding the following attribute inside our rect opening tag fill="green". Note that since we did not specify any fill for our square, it took the default fill black.
You can make animations with the <rect> element
circle
The circle svg element is used to draw circles.
attributes
cx
Used to specify the x-axis central cordinate for the <circle>
cy
Used to specify the y-axis central cordinate for the <circle>
r
Used to specify the radius of the <circle>
Now, to make a green circle of radius 30px, we need to open the <circle> ... </circle> tag inside the svg tag just like we did on the rect.
Note that the fill was set to green making our circle green.
Note that the cx and cy circle attributes are very different from the x and y rect attributes because they start padding from the circle's center instead of it's top/left. when making a circle, always make sure that these two attributes are greater than the radius attribute if you want all the circle to appear. Here the two attributes are of lenght 35px giving our circle a left/top padding of (cx/cy - r=5px) padding. just play with these two attributes to learn more!
ellipse
The ellipse svg element is used to draw ellipses.
attributes
cx
Used to specify the x-axis central cordinate for the <ellipse>
cy
Used to specify the y-axis central cordinate for the <ellipse>
rx
Used to specify the horizontal radius of the <ellipse>
ry
Used to specify the vertical radius of the <ellipse>
Now to make a colorless ellipse of horizontal radius 30px and vertical radius 15px, open the <ellipse> ... </ellipse> tag inside the svg tag, set the fill to none, and then use the stroke attribute to color it's borders.
Note that the stroke was set to green in other to make our ellipse's outline green since the default value of stroke is none.
You can also use the attribute stroke-width to change the size of the borders. This is also applicable to other elements.
line
The line svg element is used to draw a straight line.
The <line> svg element doesn't accept the fill attribute since its just a line.
attributes
x1, y1
Specifies the begining x and y axis cordinate for the <line>
x2, y2
Specifies the end-point x and y axis cordinate for the <line>
making a line is very easy, just open the <line> ... </line> tag inside the svg tag, set up the stroke if you want your line to have another color other than the default black and also set a value to the stroke-width to get a width greater than the default 1px if you want.
The following code outputs a cross, as specified by its 4 attributes.
Note the use of stroke-width which made the lines much bolder and stroke-linecap which specifies how the end points will look like. The brown line ends as a butt while the blue one has a round ending.
Some attributes like: fill, stroke, stroke-width, stroke-linecap etc...; can also be specified using CSS since they fall into the category of Presentation Attributes.
polyline
The polyline svg element is used to draw straight lines which can combine with each others.
Polyline accepts the fill attribute since its cordinates can joins each other to form a zigzag shaped line but it cannot close up to make a whole objects. The fill attribute automatically closes up the shape.
attributes
points
Used to specify a "space or comma" seperated list of numeric values which denotes the points of the line. Each pair of value represents a new offset of an x,y-axis for the polyline. The number of values should NOT be odd.
To use the polyline element, open the <polyline> ... </polyline> tag inside the svg tag, set up the stroke if you want your line(s) to have another color other than the default black and also set a value to the stroke-width to get a width greater than the default 1px if neccesary.
The following code outputs an orange triangle with green borders.
The above example prooves that the polyline elememt can never close, Note that the starting and ending points were the same but the line was clearly not connected as shown by the top angle of the above triangle.
Note that the width and height attributes of the svg element was set in other to see all the drawings cos it's default values might be smaller on some devices.
polygon
The polygon svg element is used to draw polygons.
Polygon automatically close up all it's shape only if the shape has more than one pair of points else its treated just like a line.
attributes
points
Used to specify a "space or comma" seperated list of numeric values which denotes the points of the line. Each pair of value represents a new offset of an x,y-axis for the polygon. The number of values should NOT be odd.
To use the polygon element, open the <polygon> ... </polygon> tag. This element and path is mostly used to draw stars, rhombuses, hexagons and any shape that consists of joined straight lines.
The following code outputs a black/default colored triangle with green borders.
Note how polygon automatically closed up the shape even though we didn't close the points as we did on the polyline element making it a more perfect drawing tool than the polyline.
If the fill was not set for this element, as long as the points are more than one pair, it automatically set the fill to black which clearly shows that its a closed object.
Glossary
Congrats for learning up to this point, I trust you can now efficiently draw circles, rectangles, triangles and lines on svg using the right element(s). The upcoming path module will teach you how to even draw all these shapes and practically every 2D object of your choice.
What we've learned on this module
<rect>
Used to make a rectangle.
<circle>
Used to draw a circle.
<ellipse>
Used to draw an ellipse.
<line>
Used to draw line(s)
<polyline>
Used to draw complex lines
<polygon>
Used to make any shape with three or more sides.
Note that all these elements accepts the global attributes including the JavaScript events!
Theses elements cannot be nested but the ending tag can be excluded since only the opening tags contains the attributes.
If you want to make any of these elements void(remove ending tag), you must add the optional "/" just before the closing angle brace, failure to do so will make some browsers to skip the rendering of all other elements after your void element.
CHALLENGE
Which one of the following elements does not accept the fill attribute?
path
The path element is used to draw any 2D shape in HTML5, it's known as the strongest drawing tool in SVG. With this tool one can draw from a single line to multiple number of complex objects.
The path SVG element has an attributes called d which stands for data, this attribute describes the path and it has many number of parameters with which drawings are made on the path element.
Using the path
To draw with the path element, you have to open up the path and set up the data Eg: <path d=" ..parameters.." />. and you're good to go!
The path accepts all the basic attributes Eg: fill, stroke, stroke-dasharray etc...
Heres a list of all the parameters of the d attribute.
M, m (MoveTo)
H, h (HorizontalLineTo)
V, v (VerticalLineTo)
L, l (LineTo)
A, a (ArcTo)
Q, q (QuadraticCurveTo)
C, c (BezierCurveTo)
Z, z (ClosePath)
Each one of them has a small cap partner which describes relative positioning while the Capital lettered denotes absolute points.
Note that you dont realy need to close the path with an ending tag. Each one of the above parameters have different uses, click next to learn more!
M
The M "moveTo" parameter defines where to place the drawing pen. It takes 2 arguments ("M x, y"), where x defines the x-axis cordinate while y defines the y-axis cordinate. This parameter must come first before other parameters.
The below example shows a pen placed at the point (50, 50)
>
d="M 50 50"/>
output
The m small cap parameter represents relative point, if you change the d parameters to "M 50 50 m 50 50", the pen will be placed at the point (100, 100)=> 50+50=100 which clearly shows that the relative parameter starts where it's predecessor droped off the pen.
If the relative parameter came first, the point will still be (50, 50).
Note that the pen doesn't appear, its just for visual explanation.
H
H "HorizontalLineTo" parameter defines a horizontal line. It takes 1 argument ("H x"), where x defines the lenght of the straight horizontal line.
The below code shows a Horizontal line of lenght 50, a different output can be generated by replacing the absolute H with relative h which will lead to a longer line of 100vectors because the line will start from (50, 50) which is its's predecesor's ending point other than the initial absolute H which starts from (0, 0)
>
stroke="black" d="M 50 50 H 100"/>
output
All the path parameters accepts a negative value which denotes backwards drawing. The below code shows a -30 line from (50, 50).
>
stroke="black" d="M 50 50 h -30"/>
output
If H was used, the line would have been 20(50-30).
Once the path is closed either with Z or by accurately making the last point meet with the first one, the fill can then be succesfully applied.
V
V stands for "VerticalLineTo" and it defines a vertical line. It takes 1 argument ("V y") which defines the lenght of the straight vertical line through the y axis.
The V parameter is just like H but the difference is that H operates on the x axis while V runs through the top and bottom. The below code shows a typical example.
>
0
output
The path is the greatest drawing tool because it's different parameters can be concatenated to produce an excellent object. Let's try it out by making a square with those ones we've learnt.
>
1
output
Note how the relative h and v parameters joined each other to make a perfect closed square of sides 30.
To apply fill(color) on the path, use the attribute fill or CSS.
Z
Z means "closePath" and it draws a straight line from the end to the begining of the line. Z does not have any argument(s).
Once the path is closed with Z, the object will automatically get filled with a default black background color unless otherwise stated.
The relative z parameter does exactly the same function as the absolute Z.
L
L means "lineTo" and it defines a straight line. It takes 2 argument ("L x, y") x defines the x-axis cordinate while y defines the y-axis cordinate of the end point of the line.
L can efficiently replace the functions of H and V in an svg drawing.
Note that we used only the absolute L throught the drawing.
The main difference between (H, V) and L is that the former draws only horizontal and vertical lines but the later can make horizontal, vertical and also sloppy lines.
A
A means "arcTo" and it defines an arc. It takes 7 parameters ("A rx, ry, x-axisRotation, large/small, sweep?, x, y"). The relative a defines relative positioning.
The parameters
rx
rx defines the horizontal radius.
ry
ry defines the vertical radius.
x-axisRotation
This parameter of the A command specifies the x-axis rotation for the arc.
large/small
This parameter defines which arc to draw out of the two arcs. This parameter is like a boolean, and it accepts either 0 or 1 where 0 draws the smaller arc while 1 draws the bigger arc.
sweep?
sweep accepts either 0 or 1. when 0, the arc takes the anti-clockwise direction but a value of 1 takes a clockwise path.
x and y
x and y are the end points/destination of the arc.
play with these parameters to get familiar with the A command.
Note that x-axisRotation has no effect on Firefox Gecko 7.
Q
Q means "quadraticCurveTo" and it defines a quadratic curve. It takes 4 parameters ("Q dx, dy, x, y") where dx and dy are the control points and x and y are the destination. The relative q defines relative positioning.
The below example shows how a Q command with the following parameters (M 100 50 q 25 -40 50 0) is being read by the browser.
The "T" command
The command T stands for "smoothQuadraticCurveTo" and it is used to smoothly continue a Q curve. It takes 2 parameters (x, y), T takes the reflection of the control point of the previous Q command(dx, dy) as it's (dx, dy) thus creating a smooth curve from Q(x, y) to (T x, y).
The below code shows how to make a quadratic curve.
Note that T or relatively tmust be precceded by a Q command else it draws a curve which looks just like a line.
The next page teaches you how to make smoother curves. Click next to learn more.
C
C means "bezierCurveTo" and it defines a bezier curve. It takes 6 parameters ("Q dx1 dy1, dx2 dy2, x y") where dx1 and dy1 are the starting point's control points while dx2 and dy2 are the destination's control points, x and y are the destination. The relative c defines relative positioning.
The below example shows how a C command with the following parameters (M 100 100 C 50 60 250 60 200 100) is being read by the browser.
If you're familiar with drawing packages, you must have noticed that C acts just like the shape tool of corelDraw.
The "S" command
The command S stands for "smoothQuadraticCurveTo" and it is used to smoothly continue a C curve. It takes 4 parameters (dx2 dy2, x y), S takes the reflection of the last control point of the precceding C command(dx2, dy2) as it's (dx1, dy1) thus creating a smooth curve from the reflection of C(dx2, dy2) to (S x, y).
The below code shows how to make a cubic bezier curve.
Have you seen just how smooth the bezier curve looks with just few parameters.
Note that S or relatively smust be precceded only by a C command in other to produce a C curve else it makes a Q like curve.
The main difference between Q and C is that the previous has one control point while C has two control points which makes it a more perfect choice for drawing curves in svg.
The above like hand was made with relative path commands which makes it very easy to change it's position by carefully altering the cordinates of the first M command.
The below code shows how to make the above shape.
>
6
SVG is easy, with just few commands we were able to make a beautiful complex shape.
Try making shapes around you to widen your knowledge on the svg path.
On the path element, we learned that:
M moves to a starting point for the drawing.
H Draws a horizontal line.
V Draws a vertical line.
L Draws a free line.
A Draws an arc.
Q & T Draws a quadratic curve.
C & S Draws a bezier curve.
Z Closes the path.
If you find it hard to memorize all of these commands i recommend using an svg shape generating tool like Inkscape or Illustrator.
When making path drawings, i recommend using only the relative(small cap) commands so that changing the objects position can be easily done later.
CHALLENGE
The color attribute of the path element is used to color the path.
<text>
The textSVG element is used to make texts in svg, it takes 2 main parameters (x, y) which defines the horizontal and vertical padding respectively.
text accepts the fill, stroke and stroke-width attributes of svg elements. To make a text, open the <text> ... </text> tag.
The above text has a left padding of 20 and a top padding of 60. Note that texts written inside an svg tag does not appear eg: <svg> I'm an SVG text! </svg> wont appear.
An important thing about the text element is that it can also be fitted to a path!
attributes
The text element has many number of attributes which makes it's drawing and animation easier. Below is a list of some of the text elements.
x
x defines the left padding for the text element.
y
y defines the top padding for the text element.
stroke
stroke specifies the color of the borders of the text element. Eg:
text-anchor
The text-anchor attribute is used to align the text with either start, middle or end. See the below example.The red line is a visual aid to the cordinates(x, y) of the text element.
textLength
This attribute lets you specify the width of the space into which the text will be drawn. See the below example.
lengthAdjust
This attribute is used in line with the textLength to control how the text is stretched or compressed into the length given by the textLength. It has 2 different parameters(spacing & spacingAndGlyphs). Eg:Both of them has a textLength of 120. Notice how "spacingAndGlyphs" adjusted to the available textLength because it acts on the entire text unlike "spacing" which acts only on the spaces between the letters.
Other attributes includes: fill, stroke-width, stroke-dasharray etc...;
Note that the default value for lengthAdjust is "spacing" and length is very different from lenght.
tspan
The tspan <text> element is used to define a section of text in a text element.
When used inside a text element, <tspan> ... </tspan> can specify a different size, color, position, transformation etc... for the enclosed text(s).
code
>
8
output
The <tspan> element can be nested but <text> cannot be nested!
The textPath element is used to make an svg text fit to a custom path.
<textPath> has one required attribute called xlink:href, this attribute specifies which path to fit the text by means of id.
The following code generates the above textPath.
>
9
Notice that we don't need the x, y cordinates for the <text> element as the <path/> takes care of everything.
If the text overflows the given path, the overflown text is hidden by default.
Make sure that you identified your path so that xlink:href can link to it with CSS syntax.
CHALLENGE
What is the default value for the lengthAdjust attribute?
Some Elements
a
The <a> svg element is used to make hyperlinks in svg, it is similar to the HTML <a> tag.
audio
The <audio> element is used to play music on svg, it is similar to the HTML <audio> tag.
defs
<defs> is used to define an element so it could be easily referenced in the future. Any element that is enclosed inside a <defs> ... </defs> can be dublicated with the use tag.
use
The <use> element copies nodes of drawings and paste them anywhere.
desc
The <desc> element is used to describe an element using just text so it could be easily read by some visual or aural programs.
foreignObject
The <foriegnObject> element is used to import an external object into svg be it image or iframe. It allows for inclusion of a foreign XML namespace which has its graphical content drawn by a different user agent.
iframe
The <iframe> svg element is used to embed a browsing context in svg, it's very similar to the html iframe. The below code shows how to embed an iframe into svg.
metadata
The <metadata> element is used to add metadata to SVG content. Metadata is structured information about data. The contents of metadata elements should be elements from other XML namespaces such as RDF, FOAF, etc.
switch
The <switch><SVG>element evaluates the requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a <g>, then the entire subtree is either processed/rendered or bypassed/not rendered.
stop
The <stop> element is used to add color stops to SVG gradient elements, it is a child element to either the <linearGradient> or the <radialGradient> element.
The above listed elements will be used in the upcoming lessons.
g
The <g> element is used to group svg drawings so that it could be referenced as one element. Transformations applied to the <g> element are performed on all of its child elements, and any of its attributes are inherited by its child element.
The code bellow shows how the group element was used to color multiple elements.
Note how g set the colors of the border and the background of its child elements including the <text> element.
The power of the <g> element is not limited to colors only but it can also perform awesome animations. Lets say we drew a fan with four <rect> tags, a <circle> and a <polyline>
We can easily apply rotation to the grouped rectangles with <animateMotion> Thus:
The <g> element can be nested.
symbol
The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element. It accepts the global attributes including viewBox and preserveAspectRatio. The viewBox attribute is used to preserve the alignment and space taken up by the child element of the <symbol> element whenever the use tag changes it's width/height.
In the above output, the use element was used twice with different width & height. The smaller group of elements is the <use> with the w/h of 100 while the bigger one has a w/h of 300 making it take much more space than the initial because of they common viewBox.
Note that the symbol element can only be drawn if a use element references it!
clipPath
The <clipPath> element is used to define a region of an object where painting can be applied. It's referenced with the clip-path attribute.
Note that any parts of the drawing that lie outside of the region bounded by the active clipping path are not drawn.
The code below shows how a clipping <circle> was used to clip(paint) a <rect>.
Notice how the rectangle was cut in all parts which does not touch the circle.
The light rectangle/circle shows the original shape of the rectangle/circle.
The <clipPath> element uses an element to paint another element as shown in the above example.
Note that we defined the <clipPath> with <defs>
marker
The <marker> element is used for placing re-usable graphical elements along the outline of an SVG shape.
It's commonly used to place arrowheads or polymarks on the end of a markable element.
markable elements
<line>
<path>
<polygon>
<polyline>
The marker element is referenced with marker property.
marker properties
marker-start
marker-mid
marker-end
marker-segment
marker-pattern
marker-position
attributes
viewBox
This attribute specifies a rectangle in user space that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio.
refX
The refX attributes defines the x-axis reference point of the marker.
refY
The refY attributes defines the x-axis reference point of the marker.
markerUnits
The markerUnits attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the marker.
markerWidth
The markerWidth attributes represent the x-axis size of the viewport into which the marker is to be fitted according to the viewBox.
markerHeight
The markerHeight attributes represent the y-axis size of the viewport into which the marker is to be fitted according to the viewBox.
orient
The orient attribute indicates how the marker is rotated. It accepts either a value of auto or auto-start-reverse.
Notice how the marker properties were used differently to position different markers on the arc.
Try applying markers on <line>, <polyline> etc... to help broaden your knowledge on the subject matter!
You cannot apply marker on any other element other than the markable elements
pattern
The <pattern> element is used to fill or stroke an object using a pre-defined graphic object which can be repeated at fixed intervals.
It has an attribute called patternUnits used to define the coordinate system for attributes x, y, width and height which has a value of either "userSpaceOnUse" or "objectBoundingBox".
The stop child element can be used from 0 to infinity number of times.
If the offset of the latter <stop> child element of the gradient is equal to that of it's predecessor, a sharp color transition is formed.
CDATA
CDATA Otherwise known as Character Data are used to escape blocks of text containing characters which would otherwise be recognized as markup in XHTML.
CDATA is normally used in svg as the parent element of the contents of the <style> and <script> element.
Since CDATA is an XML(Extensible Markup Language) thing, it's deprecated in HTML and is rendered as a comment which only display "]]>" as the output.
But it still works as a parent to an <svg> style/script element contents.
style
The <style> svg element is used to embed style informations in an svg element.
The following code shows how to include CSS internal styling to an svg Element.