Introduction to HTML SVG

Using images in HTML is awesome for multimedia-rich websites. All you have to do is add a tag to the HTML code, and viola, your browser will display and even add a link to the image of your choice. It gets a little troubling in situations where you know that the image or diagram will be zoomed in because a JPG or PNG won’t show any further detail once it is zoomed in past its resolution. SVG is the solution to this problem. SVG stands for Scalable Vector Graphics. As the name suggests, these can be zoomed in as much as needed, and the details never vanish. SVGs are not exclusive to web technology but being able to use them in HTML is really neat.

SVG is useful for diagrams, vectors, charts and graphs in the browser. Let’s learn about how you can use them in detail here.

Syntax of embedding SVG in HTML

Similar to using canvas in HTML5, there is a simple tag that you can use to embed SVG in HTML5 pages. The syntax is following:

<svg width="width here" height="height here "> …. …. …. …. </svg>

Examples of SVGs in HTML

Now, let’s take a look at some example vectors that can be created and embedded in HTML5:

Example #1 – Drawing a rectangle via SVG in HTML

Code:

<!DOCTYPE html> <html> <body> <svg width="500" height="600"> <rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #2 – Drawing a Square with rounded corners in SVG

For a square with rounded corners, we will have to define the radius of the corners with the use of rx, ry aside from the size and dimensions of the square.

Code:

<!DOCTYPE html> <html> <body> <svg width="500" height="500"> <rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #3 – Drawing a circle in SVG with outline and color filing inside it

Code:

<!DOCTYPE html> <html> <body> <svg width= "400" height= "400"> <circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #4 – Drawing a straight line with SVG in HTML5

We can use the <line> tag to draw a straight line in HTML5 SVGs; color, the thickness of line, and position can be defined. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

Code:

<html> <body> <svg width= "400" height= "400"> <line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/> </svg> </body> </html>

Output:

Example #5 – Drawing an eclipse via SVG in HTML5

We can use the <eclipse> tag to draw an eclipse in HTML5 SVGs; its color and position can be defined along die with its radius.

Code:

<!DOCTYPE html> <html> <body> <svg height="300" width="300"> <ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" /> Sorry but this browser does not support inline SVG.</svg> </body> </html>

Output:

Example #6 – Creating a polygon with SVG in HTML5

The tag <polygon> can be used in SVGs to create polygons. In the tag, we are required to mention the positions of each point. Filling colors, outline thickness, etc., can be defined in the code too.

Code:

<!DOCTYPE html> <html> <body> <svg height="300" width="600" > <polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #7 – Creating a polyline with SVG in HTML5

Polyline is used to draw a shape that will only consist of a straight line. Keep in mind that these lines must be connected too. Here is an example of a polyline implementation in HTML5.

Code:

<!DOCTYPE html> <html> <body> <svg height="300" width="600"> <polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #8 – Drawing Text with SVG in HTML5

The text could be necessary for any SVG in many situations, such as labeling a chart, etc. Luckily, there exists a <text> tag in SVG which can be used. The text can be set at any position in the SVG, and you can customize its color and other details too.

Code:

<!DOCTYPE html> <html> <body> <svg height="300" width="500"> <text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #9 – Drawing a Star with SVG in HTML5

Now that we are done with the basics let’s create a star that will be made with the help of SVG.

Code:

<!DOCTYPE html> <html> <body> <svg width="400" height="400"> <polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Example #10 – Using Linear Gradient in SVG

You can use linear and radial Gradient in SVG much line HTML Canvas. The gradient has to be nested in the <defs> tag. This tag is then marked in the SVG tag to denote its usage. Let’s take a look at an example that uses Gradient in an eclipse.

Code:

<!DOCTYPE html> <html> <body> <svg height="300" width="400"> <defs> <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%"> <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>

Output:

Conclusion

In the case of sites where diagrams and charts are to be used, SVGs are a lifesaver. Most modern web browsers support SVG, too and aside from being scalable. Another benefit of using SVG is its file size. Because it is just a bit of code, SVGs can have a very small footprint in memory and bandwidth consumed compared to traditional Images.

Introduction to HTML SVG