HTML svg Tag

SVG HTML

HTML SVG stands for Scalable Vector Graphics. In this guide, we will delve deeper into the world of SVG in HTML.

What is SVG?

SVG, also known as Scalable Vector Graphics, represents a file type for images. Unlike raster images like .png, .jpg, and .gif that rely on a grid of small pixels to form an image, SVG images are distinct. While enlarging .png and .jpg pictures results in pixel enlargement and blurriness, vector images can be resized indefinitely without compromising clarity due to their geometric foundation rather than pixel-based composition.

HTML SVG serves as a structured language for defining graphical elements using XML syntax. It is specifically tailored for outlining both 2D vector graphics and a combination of vector and raster graphics. The World Wide Web Consortium endorses its usage for web development purposes.

SVG is mostly used for vector-type diagrams, such as pie charts and 2-dimensional graphs in an X and Y coordinate system.

The <svg> tag defines the starting point of an SVG fragment. All elements and attributes within SVG documents are animatable.

We have the option to generate SVG images using software such as Figma or Illustrator, or alternatively, we can opt to manually code them in HTML, which offers a simpler approach.

Demonstrations of SVG HTML

We will explore different SVG HTML illustrations to grasp the utilization of SVG within HTML.

Demonstration 1:

We will create a diagonal line with SVG HTML in this example. In this scenario, we will utilize the "x1", "y1", "x2", and "y2" properties of the <line> element.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Illustration of creating a slanting line using SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of creating a slanting line using SVG HTML</h2>

	<svg height="200" width="200">

		<line x1="9" y1="9" x2="150" y2="150" style="stroke: purple; stroke-width: 4" />

	</svg>

</body>

</html>

Output:

Here, in the result, we observe the diagonal line. Upon closer inspection, this line will maintain its sharpness without any blurring, and its size will stay consistent.

Demonstration 2:

Let's examine the visual representation for rendering a circle with the assistance of the <svg> element. In this scenario, we will be utilizing the "cx", "cy", and "r" properties of the <circle> tag.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Illustration of creating a circle using SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of creating a circle using SVG HTML</h2>

    <svg width="150" height="150">

        <circle cx="75" cy="75" r="60" stroke="purple" stroke-width="5" fill="lightpink"/>

	</svg>

</body>

</html>

Output:

Here, within the outcome, we can observe a circle rendered on the webpage utilizing SVG.

Demonstration 3:

Let's examine the example demonstrating how to create a rectangle using the <svg> element. In this case, we are utilizing the "width" and "height" properties of the <rect> tag.

Code:

Example


and "height" attributes of the <rect> tag.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Illustration of creating a rectangle using SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of creating a rectangle using SVG HTML</h2>

    <svg width="250" height="150">

        <rect width="250" height="150" stroke="purple" stroke-width="9" fill="lightpink" />  

    </svg>      

</body>

</html>

Output:

We can observe a rectangular shape displayed in the output rendered on the web browser through SVG.

Demonstration 4:

Let's observe the presentation of constructing a polygon using the <svg> element. In this case, we are employing the "points" parameter of the <polygon> element.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Demonstration of constructing a polygon by utilizing SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of forming a polygon by utilizing SVG HTML</h2>

    <svg height="250" width="450">

        <polygon points="102, 12 42, 200 192, 80 12, 80 162, 200"  

        style="fill: lightpink; stroke: purple; stroke-width: 4; fill-rule: nonzero;"/>  

    </svg>          

</body>

</html>

Output:

We observe a polygon displayed on the webpage through SVG in the output.

Demonstration 5:

Let's observe the example of generating an ellipse using the <svg> element. In this case, we are making use of the "cx", "cy", "rx", and "ry" properties of the <ellipse> element.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Demonstration of forming an ellipse by utilizing SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of constructing an ellipse by utilizing SVG HTML</h2>

    <svg height="300" width="300">

        <ellipse cx="150" cy="100" rx="120" ry="60" style="fill: lightpink; stroke: purple; stroke-width:5"/>

    </svg>         

</body>

</html>

Output:

We can observe an ellipse displayed in the output rendered on the web browser through SVG.

Demonstration 6:

Let's observe an example of composing content using the <svg> element. We'll create a basic text and a rotated version using the <text> tag.

Here we are utilizing the "x" and "y" properties of the <text> element.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Demonstration of writing a text by utilizing SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of writing a text by utilizing SVG HTML</h2>

    <h3>Simple Text:</h3>

    <svg height="100" width="500">

        <text x="5" y="50" fill="purple" font-size="24px">A text written using SVG</text>

    </svg>

      <h3>Rotated Text:</h3>

    <svg height="200" width="500">

        <text x="5" y="50" fill="purple" font-size="20px" transform="rotate(15 25, 25)">A rotated text written using SVG</text>

    </svg>

</body>

</html>

Output:

We can observe text displayed on the webpage using SVG in the output.

Demonstration 7:

Let's observe the showcase for generating a polyline using the <svg> tag. In this instance, we are employing the "points" property of the <polyline> tag.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Demonstration of constructing a polyline by utilizing SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of forming a polyline by using SVG HTML</h2>

    <svg height="350" width="650">

        <polyline points="9, 11 55, 50 85, 105 90, 112 175, 150 150,175" style="fill: none; stroke: purple; stroke-width: 5"/>

    </svg>

</body>

</html>

Output:

We can observe a polyline being generated in the web browser through SVG HTML.

Demonstration 8:

Let us witness the demonstration for drawing a Christmas decoration ball by using the <svg> tag. Here, we are going to utilize <circle> and <rect> tags to draw a Christmas decoration ball.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Demonstration of forming a Christmas decoration ball on the web browser by utilizing SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of creating a Christmas decoration ball by using SVG HTML</h2>

    <svg width="500" height="500" viewBox="-120 -120 250 250">

        

        <circle cx="6" cy="-25" r="45" fill="#9e067d"/>

    

        <circle cx="6" cy="-90" r="8" fill="none" stroke="#ffc859" stroke-width="2"/>



        <rect x="-8" y="-83" width="28" height="15" fill="#6e0d59"/>

    </svg>

</body>

</html>

Output:

Here, we can see the Christmas ornament ball displayed on the webpage designed using SVG within HTML.

Demonstration 9:

Let us see the illustration to draw a Christmas tree by using the <svg> tag. Here, we are going to use <polygon> and <rect> tags to draw a Christmas tree.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Illustration of creating a Christmas tree using SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of creating a Christmas tree using SVG HTML</h2>

    <svg width="175" height="350" viewBox="-120 -120 220 450">

        <polygon points="5, 5 75, 125 -75, 125" fill="#0b4d34"/>

        <polygon points="5,-42 62, 62 -62, 62" fill="#055c3b"/>

        <polygon points="5,-75 45, 5 -42, 5" fill="#097d50"/>

        <rect x="-19" y="125" width="35" height="45" fill="#733408"/>

    </svg>

</body>

</html>

Output:

Here, we can view the holiday tree on the webpage crafted using SVG HTML.

Demonstration 10:

Let's refer to the diagram to understand the functionality of the <path > SVG element. The <path> tag is employed to specify a shape, and in this case, we will be outlining a heart shape.

Code:

Example


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Example of creating a heart shape using SVG HTML</title>

</head>

<body>

    <h1>Welcome to our tutorial</h1>

    <h2>Example of creating a heart shape using SVG HTML</h2>

    <svg viewBox="120 120">

        <path

          d="M 10,30

                 A 20,20 0,0,1 50,30

                 A 20,20 0,0,1 90,30

                 Q 90,60 50,90

                 Q 10,60 10,30 z"

                 stroke="red" fill="yellow"/>

    </svg>

</body>

</html>

Output:

Here, we can observe a heart-shaped design on the webpage crafted using SVG in HTML.

Why is SVG Preferred over Other Image Formats?

✅ Images with formats like JPEG , GIF, and PNG are called bitmap images . These images are made with pixels, so their height and width are predefined. If bitmap images are zoomed in, then the pixels become blurred, and their picture quality is degraded. On the other hand, SVG images are vector images that do not have fixed height and width, so when SVG images are zoomed in, then SVG images do not become blurry, which means SVG images can be zoomed to a certain level without degrading the picture quality. So, it is also easy to print with high quality at any resolution.
✅ Bitmap images are not scalable, whereas SVG images are scalable.
✅ Bitmap images have big file sizes, whereas SVG images have small file sizes.
✅ SVG images can be saved in the smallest size possible. Unlike bitmap image formats like JPG or PNG, it does not contain a fixed set of dots.
✅ SVG images and their behaviors are defined in XML text files so that they can be created and edited with any text editor.

Browser Support

Here are the browsers that support the SVG HTML:

✅ Firefox
✅ Safari
✅ Microsoft Edge
✅ Google Chrome
✅ Opera

Conclusion

We have understood the SVG HTML in this article. Some points to remember are given below:

✅ Various tags are used within the <svg> tag for forming different kinds of shapes, such as a circle, a rectangle, a star, etc.
✅ The tags used to create different shapes are as follows: <line> tag: It creates a line on the web browser. <circle> tag: It creates a circle on the web browser. <rectangle> tag: It draws a rectangle on the web browser. <polygon> tag: It creates a polygon on the web page. <ellipse> tag: It forms an ellipse on the web page. <polyline> tag: It constructs a polyline on the web page. <path> tag: It is used to create different shapes on the web browser.
✅ We can use a mixture of different tags to create SVG images, such as a Christmas decoration ball or a Christmas tree.
✅ SVG is preferred over other image formats because it is scalable, can be zoomed in without degrading the quality of the image, and can be saved in small file sizes.
✅ <line> tag: It creates a line on the web browser.
✅ <circle> tag: It creates a circle on the web browser.
✅ <rectangle> tag: It draws a rectangle on the web browser.
✅ <polygon> tag: It creates a polygon on the web page.
✅ <ellipse> tag: It forms an ellipse on the web page.
✅ <polyline> tag: It constructs a polyline on the web page.
✅ <path> tag: It is used to create different shapes on the web browser.

SVG HTML

What is SVG?

Demonstrations of SVG HTML

Demonstration 1:

Demonstration 2:

Demonstration 3:

Demonstration 4:

Demonstration 5:

Demonstration 6:

Demonstration 7:

Demonstration 8:

Demonstration 9:

Demonstration 10:

Why is SVG Preferred over Other Image Formats?

Browser Support

Conclusion

Input Required