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 has many number of Elements with which drawings and animations are easily made.
Heres a list of the most popular SVG elements
style(CSS in SVG)
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.
To start drawing on SVG, one has to open the SVG tag.
The svg width attribute is used to specify the width of your svg element.
The svg height attribute is used to specify the height of your svg element.
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!
Which one of the following is NOT an SVG attribute?
Basic Shapes are those objects which can be easily made using predefined tools.
The below listed elements makes drawing basic shapes easier in SVG.
Each one of the above elements have different uses, click next to learn more!
The rect svg element is used to draw rectangles.
Used to specify the left padding of the <rect>
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
The circle svg element is used to draw circles.
Used to specify the x-axis central cordinate for the <circle>
Used to specify the y-axis central cordinate for the <circle>
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!
The ellipse svg element is used to draw ellipses.
Used to specify the x-axis central cordinate for the <ellipse>
Used to specify the y-axis central cordinate for the <ellipse>
Used to specify the horizontal radius of the <ellipse>
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.
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.
Specifies the begining x and y axis cordinate for the <line>
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.
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.
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.
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.
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.
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
Used to make a rectangle.
Used to draw a circle.
Used to draw an ellipse.
Used to draw line(s)
Used to draw complex lines
Used to make any shape with three or more sides.
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.
Which one of the following elements does not accept the fill attribute?
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!
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"/>
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 "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"/>
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"/>
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 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.
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.
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 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 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.
play with these parameters to get familiar with the A command.
Note that x-axisRotation has no effect on Firefox Gecko 7.
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 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.
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!
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 defines the left padding for the text element.
y defines the top padding for the text element.
stroke specifies the color of the borders of the text element. Eg:
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.
This attribute lets you specify the width of the space into which the text will be drawn. See the below example.
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.
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).
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.
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.
What is the default value for the lengthAdjust attribute?
The <a> svg element is used to make hyperlinks in svg, it is similar to the HTML <a> tag.
The <audio> element is used to play music on svg, it is similar to the HTML <audio> tag.
<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.
The <use> element copies nodes of drawings and paste them anywhere.
The <desc> element is used to describe an element using just text so it could be easily read by some visual or aural programs.
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.
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.
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.
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.
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.
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.
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!
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>.