Scribd
Upload
36 views

HTML5 SVG

Uploaded by

Sanjan Sanju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views

HTML5 SVG

Uploaded by

Sanjan Sanju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML5-SVG

UNIT-3
What is SVG in HTML5?
 The full form of SVG is Scalable Vector Graphics
 HTML5 SVG is an alternative to Canvas.
 SVG helps in creating 2 Dimensional vector graphics for the website.
 SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate
system etc.
 It depicts the image or its related object in XML format which is like a special text format.

 Vector Graphics are made using line, points, and arc by using some mathematical formula. It is also a W3C
recommendation.

 Along with SVG, the other file formats which use Vector Graphics are PDF and EPS.

 On the other hand, Images like PNG, GIF and JPEG uses Raster Graphics. Raster Graphic is also called as
Bitmap Image, and they use pixels(set of dots), unlike Vector Graphics.
Vector Graphics Raster Graphics
 Consists of XML format using line, points & arc.  Consists of Pixels format like dots.

 Smaller in size.  Bigger in size than vector graphics.

 If you Zoom in the image, the quality of the image is not lost  The quality of the image is lost after
after scaling. zooming.

 Examples of Raster graphics


 Examples of Vector graphics are SVG, PDF and EPS. are PNG, APNG, JPEG, MPEG4,
and GIF.

 Famous tools based on Vector Graphics are Adobe  Famous tools based on Raster Graphics
Illustrator & CorelDRAW. is Adobe Photoshop.

 When to use – Use this


 When to use – Use this for Logo Design, Line
for photos, collage, Background
art, Graphs, Flyers, Business Card, Brochure etc
image etc.

 Not so good for Print compared to


 Good for print
Vector
In the below Image, you will notice that if you zoom in a Raster Image like PNG, JPEG or GIF, then
the image becomes blurry and the quality is reduced while Vector Image like SVG does not have an
impact on its quality even on Zoom in.

Vector(like SVG) VS Raster (like PNG, GIF and JPEG


Advantages of HTML5 SVG - Why to use

•If you scale the SVG image, it will not lose its quality at any resolution

•Normally, the image size is smaller

•You can modify the image using JavaScript

•You can also animate the SVG image using animation

•SVG images can be created and edited with any text editor.

•SVG images can be searched, indexed, scripted, and compressed.

•SVG images are scalable.

•SVG images can be printed with high quality at any resolution.


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.

How to create SVG on a web page


• To embed SVG inside a web page, you can use the <svg> tag.
• Using this tag, you can hold the SVG graphics so it is the container for SVG.
• SYNTAX:
<svg xmlns = "http://www.ABC.org/2000/svg">
...
</svg>
• SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG Line
The <line> element creates line inside your SVG.
Set these attributes –
•x1 – The x-coordinate of the starting point of a line
•y1 – The y-coordinate of the starting point of a line
•x2 – The x-coordinate of the ending point of a line
•y2 – The y-coordinate of the ending point of a line
•stroke – To create a stroke, which specifies the outline color.
Syntax:
<svg>
<line x1=”x-start-pos” y1=”y-start-pos”
x2=”x-end-pos” y2=”y-end-pos”
stroke=”crimson”/> </svg>
<!DOCTYPE html>
<html>

<body>
<h2>HTML5 SVG - LINE</h2>
<svg height="250" width="600">
<line x1="10" y1="10" x2="400" y2="400"
style="stroke:rgb(0,0,255);stroke-
width:3" />
</svg>
</body>
</html>
SVG Text
To draw HTML5 SVG containing Texts, you should use
the <text> element inside your SVG.
Set these attributes –
•x – The x-coordinate of the starting point of the text
•y – The y-coordinate of the starting point of the text
•Setting the width and height of the SVG is optional but often a
good idea
Syntax:
<svg>
<text x=”x-pos” y=”y-pos”> Text… </text>
</svg>
<!DOCTYPE html>
<html>
<HEAD>
<title> HTML5 SVG - TEXT</TITLE>
<style>
svg{
border:1px solid blue;
}
</style>
</head>

<body>
<h2> SVG - text </h2>
<svg height="250" width="400">
<text x="50" y="50" fill="red" font-
size="30px" font-family="Cavolini Condensed">HTML5 SVG
TEXT</text>
</svg>
</body>
</html>
<html>
<head>
<title>svg text</title>
<style>
</style>
</head>
<body>
<svg width="500" height="200">
<text x="30" y="30" fill="blue" font-size="25px"> G F G C
THIRTHAHALLI</body>
</text>
</svg>
<br>
<svg width="300" height="300">
<text x="30" y="30" fill="red" font-size="25px" transform="rotate(60)">
G F G C THIRTHAHALLI</body>
</text>
</svg>
<svg width="500" height="200">
<text x="30" y="30" fill="blue" font-size="25px"> G F G C
THIRTHAHALLI</body>
<tspan x="40" y="50" fill="pink"> bca</tspan>
<tspan x="40" y="70" fill="pink"> bsc</tspan>
</text>
</svg>
</body></html>
SVG Circle
To draw a circle inside HTML SVG, we should use the <circle> element inside our SVG.
Inside this element, we need to set these attributes –
•cx – The x-coordinate of the center of the circle
•cy – The y-coordinate of the center of the circle
•r – The radius of the circle
In the below example, the radius of the circle is 30% relative to the SVG so if you change the width and
height values of SVG, the area of the circle will also change.
To fix the radius irrespective of the SVG width and height values, you can use a fixed value of radius
like r:”120″.

Syntax:
<svg>
<circle cx=”x-center-val” cy=”y-center-val” r=”radius-val”/>
</svg>
<!DOCTYPE html>
<html>
<head>
</head>

<body>
<svg width="200" height="200">
<circle cx="99" cy="99" r="40" fill="red" stroke="green"
stroke-width="5"/>
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>

#cir:hover
{
fill:green;
}
</style>

<body>
<svg width="200" height="200">
<circle id="cir" cx="99" cy="99" r="40" fill="red" />
</svg>
</body>
</html>
HTML5 SVG Rectangle
To draw a Rectangle inside SVG, you should use the <rect> element inside your
SVG.
Set these attributes –
•x – The x-coordinate of the top left corner
•y – The y-coordinate of the top left corner
•width – The width of the rectangle
•height – The height of the rectangle
In the below example, the <fill> is optional. This sets the color of the rectangle as
darkred.
Syntax:
<svg>
<rect x=”x-top-left” y=”y-top-left” width=”w-val” height=”h-val”/>
</svg>
<!DOCTYPE html>
<html>
<body>
<h> SVG-RECTANGLE<h><br>
<svg width="200" height="100">
<rect width="200" height="100" stroke="yellow" stroke-
width="4" fill="red" />
</svg>
</body>
</html>

You might also like