SVG - Naukri Code 360

Q: Ques 4. What is the path in SVG?

Ans 4. The element is the most used element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.

Introduction

The HTML SVG stands for Scalable Vector Graphics.SVG is an image format that is written in Extensible Markup Language (XML). Since SVG is an XML file, you can edit and create it in a text editor.In XML format SVG defines vector-based graphics.Whenever you want to define graphics for the web, then SVG graphics are of great help. A cool thing about SVG graphics is that they don’t lose their quality when zoomed or resized.

HTML <svg> Element

The HTML <svg> element serves like a container for SVG graphics.You can draw paths, boxes, circles, and graphic images using different methods provided by SVG. Let’s see different examples of HTML SVG:-

HTML SVG Circle

Let’s see the code to draw a circle by SVG tag:

In the above code, you must be thinking what these terms cx, r, stroke and cy denote!. So, let’s see these terms:

cx and cy:- The cx and cy attributes define the x and y coordinates of the center of the circle. By default, the center of the circle is assumed to be (0,0).
r attribute:- r attribute defines the radius of the circle.
Stroke and stroke-width:- These attributes will define the outline of the shape.
fill attribute:-This attribute refers to the color inside the shape.

HTML SVG Rectangle

Suppose you want to have a rectangle SVG on your web page, then how will you do it? Think….Okay, let’s see the solution to your problem:

Let’s understand the different terms we have used in this code so that you can draw different shapes without cramming anything.

fill attribute:-This attribute refers to the color inside the shape.
stroke-width property:- This defines the width of the border of the rectangle.
stroke property:- It determines the color of the border of the rectangle.

HTML SVG Star

Everyone loves to have 5 stars on their content. So let’s see the code to draw the start SVG so that you can include stars on your web page.

Here we will see the usage of all the terms we have used in the above code so that you can make some cool images on your web pages.

points attribute:- The points attribute defines the x and y coordinates for each corner of the polygon.
evenodd:-This is a fill rule. Value of evenodd determines the insideness of a point by drawing a line from the area in question through the entire shape in any direction. The path segments that cross this line are then counted. If the final number comes out to be even, then the point will be outside; otherwise, if the final number comes out to be odd then the point will be inside.

HTML SVG logo

Let’s learn to draw the logo SVG in HTML.

Let’s see the explanation to the above code so that with the help of this you can draw some more pretty shapes with some more awesome color effects.

Id Attribute:- The id attribute of the <linearGradient> tag defines a unique name for the gradient.
x, y:-The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient.
offset attribute:- The offset attribute defines the beginning and end of the gradient color.

So till now, we learned to draw many SVG shapes. You can learn more by practising on your own.

Generally, people get confused between canvas and SVG. The canvas element is used to draw graphics using javascript. In order to get a better understanding of canvas, you can read this awesome article on the canvas link.

You can draw different shapes using canvas. Let’s see this table where I have explained the differences between the SVG and Canvas.

Difference Between Canvas and SVG

SVG	Canvas
SVG is vector-based i.e it is made up of shapes.	Canvas is raster-based i.e it is made up of pixels.
You can print high-quality SVG at any resolution because it has better scalability.	Canvas is not suitable for printing on a higher resolution because it has poor scalability.
You can get better performance of SVG with a smaller number of objects or larger surfaces.	You can get better performance from Canvas with a smaller surface or larger number of objects.
You can modify SVG using scripts and CSS.	You can modify Canvas using scripts only.
SVG contains multiple graphical elements, and they become part of the page’s DOM tree.	Canvas contains a single element that behaves just like <img> tag. You can save Canvas diagrams as .png or.jpg

Frequently Asked Questions

Ques 1. How can I use SVG in HTML?

Ans 1.SVG images can be written directly into the HTML document using the <svg> </svg> tag.

Ques 2. What does the term SVG stand for in HTML?

Ans 2. SVG stands for Scalable Vector Graphics.

Ques 3. What are the uses of SVG tags in HTML?

Ans 3. The <svg> tag defines a container for SVG graphics. SVG tag is used to draw several objects like paths, boxes, circles, text, and graphic images.

Ques 4. What is the path in SVG?

Ans 4. The <path> element is the most used element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.

Key Takeaways

In this blog, we learned about SVG Graphics in HTML.SVG graphics are of excellent help whenever you want to add shapes, curves, and logos to your web page. The best thing about SVGs in HTML is that you can modify them according to your requirement. Try adding SVG Graphics by making a sample web page. If you want to make some cool projects and master full-stack web development, then visit this course. If this blog has added something to your knowledge, then please do share it with your friends. Happy Coding!