Computer Multimedia & Animation
Unit: II - HTML5 – SVG
Introduction
• SVG, Scalable Vector Graphics is an XML (Extensible Markup Language) based
language to define vector-based graphics.
• SVG is intended to display images over the web.
• Being vector images, SVG image never loses quality no matter how they are zoomed out
or resized.
• SVG images supports interactivity and animation.
• SVG is a W3C standard.
• Others image formats like raster images can also be clubbed with SVG images.
• SVG integrates well with XSLT and DOM of HTML.
Note:
• XSL (eXtensible Stylesheet Language) is a styling language for XML.
• XSLT stands for XSL Transformations.
Viewing SVG Files
• Most of the web browsers can display SVG just like they can display PNG, GIF, and
JPG.
• Internet Explorer users may have to install the Adobe SVG Viewer to be able to view
SVG in the browser.
Advantages of SVG
• Use any text editor to create and edit SVG images.
• Being XML based, SVG images are searchable, indexable and can be scripted and
compressed.
• SVG images are highly scalable as they never loses quality no matter how they are
zoomed out or resized
• Good printing quality at any resolution
• SVG is an Open Standard
Disadvantages
• Being text format size is larger than compared to binary formatted raster images.
• Size can be big even for small image.
Embedding SVG in HTML5
9
HTML5 allows embedding SVG directly using <svg>...</svg> tag which has following simple
syntax
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>
BIHE, DAVANGERE
Computer Multimedia & Animation
Following HTML snippet can be used to draw a circle in web browser.
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h1>Sample SVG Image</h1>
<svg width="100" height="100" xmlns = "http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke-width="2" fill="red" />
</svg>
</body>
</html>
OUTPUT
• <svg> element indicates the start of SVG image.
• <svg> element's width and height attributes defines the height and width of the SVG
image.
• In above example, we've used a <circle> element to draw a circle.
• cx and cy attribute represents center of the circle. Default value is (0,0). r attribute
represents radius of circle.
• Other attributes stroke and stroke-width controls the outlining of the circle.
• fill attribute defines the fill color of the circle.
• Closing</svg> tag indicates the end of SVG image.
Note:
http://www.w3.org/2000/svg is an XML namespace, first defined in the Scalable Vector
Graphics (SVG) 1.0 Specification and subsequently added to by SVG 1.1, SVG 1.2 and SVG
2. The SVG namespace is mutable; names may be added over time by the W3C SVG
Working Group by publication in W3C Technical Reports.
The latest version of the SVG specification can be found http://www.w3.org/TR/SVG.
BIHE, DAVANGERE
Computer Multimedia & Animation
<g> tag
The <g> SVG element is a container used to group other SVG elements.
Transformations applied to the <g> element are performed on its child elements, and its
attributes are inherited by its children. It can also group multiple elements to be referenced
later with the <use> element.
Following HTML snippet can be used to draw a circle using <g> tag in web browser.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
</svg>
OUTPUT
HTML5 − SVG Circle
<circle> element is used to draw circle with a center point and given radius.
Declaration
Following is the syntax declaration of <circle> element. We've shown main attributes only.
<circle
cx="x-axis co-ordinate"
cy="y-axis co-ordinate"
r="length" >
</circle>
Attributes
• cx − x-axis co-ordinate of the center of the circle. Default is 0.
BIHE, DAVANGERE
Computer Multimedia & Animation
• cy − y-axis co-ordinate of the center of the circle. Default is 0.
• r − radius of the circle.
Following HTML snippet can be used to draw a circle in web browser.
<html>
<title>SVG Circle</title>
<body>
<h1>Sample SVG Circle Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Circle #1: Without opacity.</text>
<circle cx="100" cy="100" r="50" stroke="black"
stroke-width="3" fill="rgb(121,0,121)"></circle>
</g>
</svg>
</body>
</html>
OUTPUT
Following HTML snippet can be used to draw a circle in web browser with opacity
<html>
<title>SVG Circle</title>
<body>
<h1>Sample SVG Circle Image</h1>
BIHE, DAVANGERE
Computer Multimedia & Animation
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Circle #2: With opacity </text>
<circle cx="100" cy="100" r="50"
style="fill:rgb(121,0,121);stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5"> </circle>
</g>
</svg>
</body>
</html>
OUTPUT
HTML5 − SVG Rectangle
<rect> element is used to draw rectangle which is axis aligned with the current user
co-ordinate system.
Declaration
BIHE, DAVANGERE
Computer Multimedia & Animation
Following is the syntax declaration of <rect> element. We've shown main attributes
only.
<rect
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
rx="length"
ry="length"
style="style information"
class="style class" >
</rect>
Attributes
• x − x-axis co-ordinate of top left of the rectangle. Default is 0.
• y − y-axis co-ordinate of top left of the rectangle. Default is 0.
• width − width of the rectangle.
• height − height of the rectangle.
• rx − used to round the corner of the rounded rectangle.
• ry − used to round the corner of the rounded rectangle.
• style − used to specify inline styles.
• class − used to specify external style name to the element.
Following HTML snippet can be used to draw a rectangle in web browser without opacity
<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >
Rectangle #1: Without opacity.</text>
<rect x="100" y="30" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</g>
BIHE, DAVANGERE
Computer Multimedia & Animation
</svg>
</body>
</html>
OUTPUT
Following HTML snippet can be used to draw a rectangle in web browser with opacity
<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >
Rectangle #2: With opacity </text>
<rect x="100" y="30" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);
stroke-opacity:0.5;opacity:0.5"> </rect>
</g>
</svg>
</body>
</html>
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
Following HTML snippet can be used to draw a rectangle with rounded corner in web
browser with opacity
<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="570" height="200">
<g>
<text x="0" y="15" fill="black" >
Rectangle #3: With Rounded Corner </text>
<rect x="100" y="100" rx="10" ry="10" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);"></rect>
</g>
</svg>
</body>
</html>
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
HTML5 − SVG Line
<line> element is used to draw line with a start point and end point.
Declaration
Following is the syntax declaration of <line> element. We've shown main attributes
only.
<line
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate" >
</line>
Attributes
• x1 − x-axis co-ordinate of the start point. Default is 0.
• y1 − y-axis co-ordinate of the start point. Default is 0.
• x2 − x-axis co-ordinate of the end point. Default is 0.
• y2 − y-axis co-ordinate of the end point. Default is 0.
BIHE, DAVANGERE
Computer Multimedia & Animation
Following HTML snippet can be used to draw a line without opacity.
<html>
<title>SVG Line</title>
<body>
<h1>Sample SVG Line Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Line #1: Without opacity.</text>
<line x1="20" y1="20" x2="150" y2="150"
stroke="black" stroke-width="3" fill="rgb(121,0,121)"></line>
</g>
</svg>
</body>
</html>
OUTPUT
BIHE, DAVANGERE
Computer Multimedia & Animation
Following HTML snippet can be used to draw a line without opacity.
<html>
<title>SVG Line</title>
<body>
<h1>Sam>le SVG Line Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Line #2: With opacity </text>
<line x1="20" y1="20" x2="150" y2="150"
style="fill:rgb(121,0,121);stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5"></line>
</g>
</svg>
</body>
</html>
OUTPUT
BIHE, DAVANGERE
Computer Multimedia & Animation
HTML5 − SVG Ellipse
<ellipse> element is used to draw ellipse with a center point and given two radii.
Declaration
Following is the syntax declaration of <ellipse> element. We've shown main
attributes only.
<ellipse
cx="x-axis co-ordinate"
cy="y-axis co-ordinate"
rx="length"
ry="length" >
</ellipse>
Attributes
• cx − x-axis co-ordinate of the center of the ellipse. Default is 0.
• cy − y-axis co-ordinate of the center of the ellipse. Default is 0.
• rx − x-axis radius of the ellipse.
• ry − y-axis radius of the ellipse.
Following HTML snippet can be used to draw a ellipse without opacity.
<html>
<title>SVG Ellipse</title>
<body>
<h1>Sample SVG Ellipse Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Ellipse #1: Without opacity.</text>
<ellipse cx="100" cy="100" rx="90" ry="50"
stroke="black" stroke-width="3" fill="rgb(121,0,121)"></ellipse>
</g>
</svg>
</body>
</html>
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
Following HTML snippet can be used to draw a ellipse with opacity
<html>
<title>SVG Ellipse</title>
<body>
<h1>Sample SVG Ellipse Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Ellipse #2: With opacity </text>
<ellipse cx="100" cy="100" rx="90" ry="50"
style="fill:rgb(121,0,121);stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5"></ellipse>
</g>
</svg>
</body>
</html>
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
HTML5 − SVG Polygon
<polygon> element is used to draw a closed shape consisting of connected straight
lines.
Declaration
Following is the syntax declaration of <polygon> element. We've shown main
attributes only.
<polygon
points="list of points" >
</polygon>
Attributes
points − List of points to make up a polygon.
BIHE, DAVANGERE
Computer Multimedia & Animation
Following HTML snippet can be used to draw a polygon without opacity.
<html>
<title>SVG Polygon</title>
<body>
<h1>Sample SVG Polygon Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Polygon #1: Without opacity.</text>
<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke="black" stroke-width="3" fill="rgb(121,0,121)"></polygon>
</g>
</svg>
</body>
</html>
OUTPUT
BIHE, DAVANGERE
Computer Multimedia & Animation
Following HTML snippet can be used to draw a polygon with opacity
<html>
<title>SVG Polygon</title>
<body>
<h1>Sample SVG Polygon Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Polygon #2: With opacity </text>
<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
style="fill:rgb(121,0,121);stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5"></polygon>
</g>
</svg>
</body>
</html>
OUTPUT
BIHE, DAVANGERE
Computer Multimedia & Animation
HTML5 − SVG Polyline
<polyline> element is used to draw a connected straight lines.
Declaration
Following is the syntax declaration of <polyline> element. We've shown main
attributes only.
<polyline
points="list of points" >
</polyline>
Attributes
points − List of points to make up a polyline.
Following HTML snippet can be used to draw a polyline without opacity.
<html>
<title>SVG Polyline</title>
<body>
<h1>Sample SVG Polyline Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Polyline #1: Without opacity.</text>
<polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke="black" stroke-width="3" fill="none"></polyline>
</g>
</svg>
</body>
</html>
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
Following HTML snippet can be used to draw a polyline with opacity.
<html>
<title>SVG Polyline</title>
<body>
<h1>Sample SVG Polyline Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Polyline #2: With opacity </text>
<polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
style="fill:none;stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;"></polyline>
</g>
</svg>
</body>
</html>
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
BIHE, DAVANGERE
Computer Multimedia & Animation
HTML5 − SVG Gradients
Gradient refers to smooth transition of one color to another color within a shape.
SVG provides two types of gradients.
• Linear Gradients - Represents linear transition of one color to another from one
direction to another.
• Radial Gradients - Represents circular transition of one color to another from one
direction to another.
Linear Gradients
Declaration
Following is the syntax declaration of <linearGradient> element. We've shown main
attributes only.
<linearGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient
coordinate system onto the target coordinate system"
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
spreadMethod="indicates method of spreading the gradient within graphics
element"
xlink:href="reference to another gradient" >
</linearGradient>
Attributes
• gradientUnits − units to define the coordinate system for the various length values
within the gradient. If gradientUnits="userSpaceOnUse", values represent values
in the current user coordinate system in place at the time when the gradient
element is used. If patternContentUnits="objectBoundingBox", values represent
values in fractions or percentages of the bounding box on the referencing
element in place at the time when the gradient element is used. Default is
userSpaceOnUse.
• x1 − x-axis co-ordinate of the gradient vector. Defeault is 0.
• y1 − y-axis co-ordinate of the gradient vector. Default is 0.
• x2 − x-axis co-ordinate of the gradient vector. Defeault is 0.
• y2 − y-axis co-ordinate of the gradient vector. Default is 0.
BIHE, DAVANGERE
Computer Multimedia & Animation
• spreadMethod − indicates method of spreading the gradient within graphics
element. Default is 'pad'.
• xlink:href − used to refer to another gradient.
Following HTML snippet can be used to draw a linear gradient.
<html>
<title>SVG Linear Gradient</title>
<body>
<h1>Sample SVG Linear Gradient</h1>
<svg width="600" height="600">
<defs>
<linearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</linearGradient>
</defs>
<g>
<text x="30" y="50" >Using Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-
width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>
Note
• One <linearGradient> element defined as sampleGradient.
• In linearGradient, two offsets are defined with two colors.
• In rect element, in fill attribute, url of the gradient is specified to fill the rectangle
with gradient created earlier.
BIHE, DAVANGERE
Computer Multimedia & Animation
OUTPUT
Radial Gradients
Declaration
Following is the syntax declaration of <radialGradient> element. We've shown main
attributes only.
<radialGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient
coordinate system onto the target coordinate system"
cx="x-axis co-ordinate of center of circle."
cy="y-axis co-ordinate of center of circle."
r="radius of circle"
fx="focal point for the radial gradient"
fy="focal point for the radial gradient"
BIHE, DAVANGERE
Computer Multimedia & Animation
spreadMethod="indicates method of spreading the gradient within graphics
element"
xlink:href="reference to another gradient" >
</radialGradient>
Attributes
• gradientUnits − units to define the coordinate system for the various length values
within the gradient. If gradientUnits="userSpaceOnUse", values represent values
in the current user coordinate system in place at the time when the gradient
element is used. If patternContentUnits="objectBoundingBox", values represent
values in fractions or percentages of the bounding box on the referencing
element in place at the time when the gradient element is used. Default is
userSpaceOnUse.
• cx − x-axis co-ordinate of the center of largest circle of gradient vector. Defeault
is 0.
• cy − y-axis co-ordinate of the center of largest circle of gradient vector. Default is
0.
• r − radius of the center of largest circle of gradient vector. Defeault is 0.
• fx − focal point of radial gradient. Default is 0.
• fy − focal point of radial gradient. Default is 0.
• spreadMethod − indicates method of spreading the gradient within graphics
element. Default is 'pad'.
• xlink:href − used to refer to another gradient.
Following HTML snippet can be used to draw a radial gradient.
<html>
<title>SVG Radial Gradient</title>
<body>
<h1>Sample SVG Radial Gradient</h1>
<svg width="600" height="600">
<defs>
<radialGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</radialGradient>
</defs>
<g>
<text x="30" y="50" >Using Radial Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green"
stroke-width="3"
fill="url(#sampleGradient)" />
BIHE, DAVANGERE
Computer Multimedia & Animation
</g>
</svg>
</body>
</html>
Note
• One <radialGradient> element defined as sampleGradient.
• In radialGradient, two offsets are defined with two colors.
• in rect element, in fill attribute, url of the gradient is specified to fill the rectangle
with gradient created earlier.
OUTPUT
BIHE, DAVANGERE
Computer Multimedia & Animation
HTML5 − SVG Star
<polygon> element is used to draw a closed shape consisting of connected straight lines.
Declaration
Following is the syntax declaration of <polygon> element. We've shown main attributes only.
<polygon
points="list of points" >
</polygon>
Attributes
points − List of points to make up a polygon.
Following HTML snippet can be used to draw a star using svg polygon tag.
<html>
<title>SVG Polygon</title>
<body>
<h1>Star using polygon.</h1>
<svg width="800" height="800">
<g>
<polygon points="100,10 40,180 190,60 10,60 160,180"
stroke="black" stroke-width="3" fill="rgb(121,0,121)"></polygon>
</g>
</svg>
</body>
</html>
OUTPUT
BIHE, DAVANGERE
