How To Use SVG In HTML5
Posted By : Vikas Pundir | 29-May-2018
What is SVG(Scalable Vector Graphics)
The SVG is a format of
Scalable Vector Graphics images and in XML files their behaviors are defined, It means we can be created and edited of SVG images with any text editor. Some other advantages of using SVG over other formats of an image like PNG, GIF, JPEG etc.
1. We can be indexed, scripted, searched and compressed with SVG images.
2. Using JavaScript in real time SVG images can be modified and created.
3. At any resolution, SVG images can be printed with high quality.
4. Using the built-in animation elements SVG content can be animated.
5. To other documents, SVG images can contain hyperlinks.
How to ebedding SVG in a HTML Page
Using the HTML5 <svg> element you can embed SVG graphics directly into your document.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Embedding SVG Into HTML Pages</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
ebedding SVG in a HTML Page
</svg>
</body>
</html> '
How to draw Shapes and Path with SVG
How to draw basic vector-based shapes and paths on the web pages using the HTML5 <svg> element. This section will explain you.
Using SVG Draw a Line
The Line is a most basic path and you can draw it with SVG. How to create a straight line using the SVG <line> element following example will show you:
HTML
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
CSS:
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
From (x1,y1) to (x2,y2) draw a line using attributes x1, x2, y1 and y2 of the <line> element.
Draw a Rectangle
Using the SVG <rect> element you can create a simple rectangle and square shapes. How to create and style a rectangular shape with SVG following example will show you:
HTML:
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:red; stroke:black; stroke-width:3;" />
CSS:
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
The co-ordinates of the top-left corner of the rectangle defined by attributes x and y of <rect> element. The width and height of the shape specified by attributes width and height.
Draw a Circle
Using the SVG <circle> element you can create circle shapes. How to create a circular shape with SVG following example will show you :
HTML:
svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
The
Drawing Text with SVG
With SVG you can also draw text on web pages. You can apply all the graphics transformation to it because the text in SVG is rendered as a graphic but the user can be selected and copied it as text.
HTML:
<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 location of the top-left corner in absolute terms define by attributes x and y of the <text> element whereas the relative location specifies by attributes dx and dy.
For reposition or reformat the span of text contained within a <text> element you can also use the <tspan> element.
HTML:
<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;">
Hello everyone!
</tspan>
</text>
</svg>
CSS:
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vikas Pundir
Vikas has a good knowledge of HTML, CSS and JavaScript. He is working as a UI Developer and he love dancing and painting.