HTML5 SVG
DIFFERENCES
BETWEEN SVG AND CANVAS
The HTML5 introduced the two graphical elements Canvas and SVG for
creating rich graphics on the web, but they are fundamentally different. The
following table summarizes some of the basic differences between these two
elements, which will help you to understand how to use the Canvas and SVG
elements effectively and appropriately.
SVG
The SVG stands for Scalable Vector Graphics.
·
Vector based (composed of shapes)
·
Multiple graphical elements, which become the part of the
DOM
·
Modified through script and CSS
·
Give better performance with smaller number of objects or
larger surface, or both
·
Better scalability — can be printed with high quality at
any resolution
Canvas
·
Raster based (composed of pixel)
·
Single HTML element similar to <img> in behavior
·
Modified through script only
·
Give better performance with smaller surface or larger
number of objects, or both
·
Poor scalability — not suitable for printing on higher
resolution
WHAT
IS SVG
a.
The Scalable Vector Graphics (SVG) is an XML-based image format
b.
SVG is used to define two-dimensional vector based graphics for the Web.
c.
A vector image can be scaled up or down to any extent without losing the
image quality.
d.
SVG images and their behaviors are defined in XML files — that means SVG
images can be created and edited with any text editor.
e.
There are several other advantages of using SVG over other image formats
like JPEG, PNG, GIF etc.
f.
SVG images can be searched, indexed, scripted, and compressed.
g.
SVG images can be created and modifed using JavaScript in real time.
h.
SVG images can be printed with high quality at any resolution.
i.
SVG content can be animated using the built-in animation elements.
j.
SVG images can contain hyperlinks to other
documents.
NOTE: The vector images are composed of a fixed set of shapes defined by math,
while the bitmap or raster images are composed of a fixed set of dots called
pixels.
EMBEDDING
SVG INTO HTML PAGES
You can embed SVG graphics directly into your document using the
HTML5 <svg> element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 SVG</title>
</head><body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>
Note: All the major modern web browsers like
Firefox, Chrome, Safari, Opera, and Internet Explorer 9+ support inline SVG
rendering.
DRAWING
PATH AND SHAPES WITH SVG
The following section will explain you how to draw basic vector-based
paths and shapes on the web pages using the HTML5 <svg> element.
DRAWING
A LINE
Line is the most basic path you can draw with SVG. The following example
will show you how to create a straight line using the SVG <line> element:
Example
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>
The attributes x1, x2, y1 and y2 of the <line> element draw a line
from (x1,y1) to (x2,y2).
DRAWING
A RECTANGLE
You can create simple rectangle and square shapes using the SVG <rect> element. The following
example will show you how to create and style a rectactangular shape with SVG:
Example
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
The attributes x and y of <rect> element defines the
co-ordinates of the top-left corner of the rectangle. The attributes width and height specifies the width and
height of the shape.
DRAWING
A CIRCLE
You can create circle shapes using the SVG <circle> element. The following
example will show you how to create and style a circular shape with SVG:
Example
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
The attributes cx and cy of the <circle> element defines the
co-ordinates of the center of the circle and the attribute r specifies the radius of the
circle. If the attributes cx and cy are omitted or not specified,
the center of the circle is set to (0,0).
DRAWING
TEXT WITH SVG
You can also draw text on web pages with SVG. The text in SVG is
rendered as a graphic so you can apply all the graphic transformation to it but
it is still acts like text — that means it can be selected and copied as text
by the user.
Example
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>
The attributes x and y of the <text> element defines the location
of the top-left corner in absolute terms whereas the attributes dx and dy specifies the relative
location.
You can also use the <tspan> element to reformat or
reposition the span of text contained within a <text> element. Text contained in
separate tspans, but inside the same text element can all be selected at once —
when you click and drag to select the text. However the text in separate text
elements can't be selected at the same time.
Example
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>
It's clear the whole concept of both topic in a minute (great study material) well done👍👍
ReplyDelete