HTML5 – SVG


What is SVG?

SVG stands for “Scalable Vector Graphics“, Its an XML based language.

SVG is a W3C recommended standard.

SVG defines the two-dimensional vector based graphics for the webpages.

The HTML <svg> element is a container for SVG graphics.

SVG images supports interactivity and animation.

SVG integrates well with XSLT and DOM of HTML.

Why SVG is used ?

SVG is used to add two-dimensional vector based graphics for the webpages.

The image quality of these Vector based images is not lost even when its scaled up or down to any extent.

SVG images can also be clubbed with others image formats like (.jpg,.gif,.png,etc).

SVG is used for 2-dimensional vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

How SVG works with HTML ?


SVG element starts with <svg> and ends with </svg> tag.

SVG element have “width” and “height” attributes, which defines the width and height of the SVG image.

Based upon the developers wish he/she can draw anything and the attributes varies accordingly.

All attributes will be explained in the examples.

Why SVG is preferred more than other formats ?

SVG images can be saved even in smallest possible sizes.

SVG images appears in great quality when printed.

Even it is zoomed to a certain level the picture quality will be clear and good.

HTML coding for a website !!!

Click to Learn More about – HTML Tutorial for beginners

SVG implementation techniques

<svg></svg> element is used in many ways some of them are listed below,

1. Drawing Lines

2. Drawing square box

3. Drawing Rectangular box

4. Drawing circle

5. Drawing text

1. Drawing Lines

Example :

<!DOCTYPE html>
<html lang="en">
        <head>
                <title>HTML5 SVG</title>
        </head>
        <body>
                <svg height="5000" width="1000">
                        <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(255,0,0);stroke-width:2" />
                </svg>
        </body>
</html>

x1 – Defines the start of the line on the x-axis

y1 – Defines the start of the line on the y-axis

x2 – Defines the end of the line on the x-axis

y2 – Defines the end of the line on the y-axis

Output :

2. Drawing square box

Example :

<!DOCTYPE html>
<html lang="en">
        <head>
                <title>HTML5 SVG</title>
        </head>
        <body>
                <svg width="500" height="500">
                        <rect width="300" height="300" style="fill:rgb(0,0,255);stroke:rgb(0,0,0)" />
                </svg>
        </body>
</html>

“width” , “height” –  Defines the height and the width of the rectangle

Style – Defines CSS properties for the rectangle

fill property – Defines the fill color of the rectangle

stroke-width – Defines the width of the border of the rectangle

stroke – Defines the color of the border of the rectangle

Output :

3. Drawing Rectangular box

Example :

<!DOCTYPE html>
<html lang="en">
        <head>
                <title>HTML5 SVG</title>
        </head>
        <body>
                <svg width="600" height="200">
                        <rect width="300" height="300" style="fill:rgb(0,0,255);stroke:rgb(0,0,0)" />
                </svg>
        </body>
</html>

“width” , “height” – Defines the height and the width of the rectangle

“style” – Defines CSS properties for the rectangle

“fill property” – Defines the fill color of the rectangle

“stroke-width” – Defines the width of the border of the rectangle

“stroke – Defines the color of the border of the rectangle.

Output :

4. Drawing circle

Example :

<!DOCTYPE html>
<html lang="en">
        <head>
                <title>HTML5 SVG</title>
        </head>
        <body>
                <svg height="500" width="500">
                        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
                </svg>
        </body>
</html>

“cx” and “cy” –  Defines the x and y coordinates of the center of the circle. (If cx and cy are omitted, then the circle’s center is set to (0,0))

“r” – Defines the radius of the circle.

Output :

5. Drawing text

Example :

<!DOCTYPE html>
<html lang="en">
        <head>
                <title>HTML5 SVG</title>
        </head>
        <body>
                <svg height="30" width="200">
                        <!-- text single line -->
                        <text x="0" y="15" fill="red">Welcome to CSTechbook!</text><br/>
                        <!-- text multi line -->
                        <tspan x="10" y="45">Span tag text line1</tspan><br/>
                        <tspan x="10" y="45">Span tag text line2</tspan><br/>
                        <tspan x="10" y="45">Span tag text line3</tspan><br/><br/>
                        <!-- text anchor tag -->
                </svg>
                <svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <a xlink:href="https://s30.e0b.myftpupload.com.com" target="_blank">
                        <text x="0" y="15" fill="blue">Welcome to CSTechbook!</text><br/>
                        </a>
                </svg>
        </body>
</html>

“x” and “y” – Defines the coordinates of the span.

Output :


HTML coding for a website !!!

Click to Learn More about – HTML Tutorial for beginners

Advantages of SVG


We can use any text editor to create and edit SVG images.

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

SVG images can be created and modified using JavaScript in real time.

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

SVG content can be animated using the built-in animation elements.

SVG images can contain hyperlinks to other documents.

Disadvantages of SVG


Text format size is larger in SVG compared to binary formatted raster images.

Default size can be big even for small image.