SVG in HTML

SVG in HTML stands for Scalable Vector Graphics. It is used to make scalable images and elements. SVG elements are not rasterized like JPG, PNG, and JPEG. This makes SVG elements very convenient and scalable as the resolution does not change if the size of the image is increased. They are usually used to include logos of a company on a website.

Being a web developer myself, I use SVG in HTML for my projects all the time to make my web pages more interactive and interesting.

Types of SVG in HTML

The HTML SVG tag can be used mainly in two ways. In this section of the tutorial, let me discuss the two ways in which SVG for HTML is used.

Inline SVG

We use the <svg> element to embed SVG markup straight into your HTML document. Inline SVG allows you to define and control SVG graphics right within your HTML code. This is used when we want to create some animation directly in our code.

Let me explain with the help of an example.

Code:

In the above example,

• I have made an inline SVG element that draws a circle within a 100x100 pixel canvas.
• The circle is centered at (60,60), has a 40-pixel radius, and is filled with orange. The created circle is filled with the color red
• We have also set the div containing the SVG with a background color of light blue.
  

External SVG

This includes linking to an external SVG file from your HTML document using the <img> tag. The external HTML image SVG file contains the SVG markup, which can be reused in numerous HTML files. 

Let me explain with the help of an example.

Code:

In the above example, 

• The HTML file (index.html) incorporates the external SVG file using the element with the src attribute pointing to example.svg. You can keep an SVG HTML to image file in the same directory. You can change the name of the file given in the src attribute to the name of the SVG file you want to include.
• When you view index.html in a web browser, it will show the SVG graphic from the external file (in this case it is example.svg).

For this example to work, make sure the HTML and SVG files are in the same directory.

SVG HTML Example

Let us look at some examples of SVG HTML code to clear the concept of SVG in HTML better. Here I have discussed some examples that are sure to help you with this concept.

SVG rectangle example in HTML

Let me show you how to create a rectangle in HTML using an example.

Code:

In the above example,

• The <svg> element defines a canvas with a width of 3000 and height of 3000 pixels.
• The <svg> element contains a <rect> element, which draws a rectangle.
• The x attribute contains the x-coordinate of the rectangle's top-left corner (20 pixels from the left side).
• The y attribute specifies the y-coordinate for the rectangle's top-left corner (20 pixels from the top edge).
• The width attribute provides the rectangle's width (250 pixels).
• The height attribute provides the rectangle's height (300 pixels).
• The fill attribute defines the color inside the rectangle (green in this case).
  

SVG polygon example in HTML

Now let me share with you how you can create a polygon in HTML using SVG.

Code:

In the above example,

• The <svg> element creates a canvas with a width and height of 210 and 500 pixels respectively.
• The <svg> element contains a <polygon> element, which draws a polygon.
• The points attribute defines the vertices of the polygon. Each pair of coordinates corresponds to a (x, y) point.
• The fill element defines the polygon's fill color (in this case, blue). We have also added an attribute that adds a border of color red.
  

Advantages of using SVG in HTML

There are numerous advantages to using SVG in HTML. Here, let me discuss some of them with you.

• Scalability: SVG graphics can be enlarged without compromising quality. This is very beneficial for responsive web design because SVGs can adjust to various screen sizes and resolutions.
• Resolution independence: Unlike raster pictures (e.g., JPEG, PNG), which pixelate when expanded, SVGs retain sharpness and clarity at all sizes. This makes them suitable for high-resolution displays.
• Small file sizes: SVG files are often less in size than bitmap images, which improves website loading speeds and reduces bandwidth consumption.
• Vector-based: SVGs are created using mathematical computations to design shapes, lines, and colors. This enables the precise control and modification of graphical elements.
• Interactivity: SVGs can be interactive and animated using CSS, JavaScript, or SVG-specific animation elements. This functionality is useful for developing appealing user experiences and dynamic content.
• Accessibility: SVGs can be made accessible to screen readers and assistive technologies by including semantic information and text descriptions within the SVG elements.
• SEO-Friendly: Search engines can index and comprehend SVG material, which can help improve SEO performance when used correctly.
• Cross-Browser Compatibility: All modern web browsers support SVGs, ensuring consistent rendering across platforms and devices.
  

SVG vs Canvas

It is very easy to get confused between SVG in HTML and the canvas element in HTML. In this section of the tutorial, I will discuss the differences between HTML5 canvas SVG and HTML5 SVG element.

In Conclusion

SVG in HTML added a lot of conveniences and solved a lot of problems. It made images more scalable without losing out on resolution while being relatively small in size. They added a lot of SEO benefits as well. Now feel free to add SVG elements in your future HTML projects to make them more dynamic and eye catchy.

If you want to learn more about web development and HTML, I would suggest doing a course on web development from a reputed platform. One such platform that comes to mind is upGrad. Their courses are in collaboration with some of the best universities around the world. Some of the best teachers have curated their courses thus making its courses one of the best platforms on the market.

Frequently Asked Questions

1. What is SVG in HTML?

SVG in HTML  stands for Scalable Vector Graphics, and it is a method of creating graphics and visual elements directly in HTML using XML-based syntax. Essentially, SVG allows you to use code to draw shapes, lines, text, and other objects that are then scaled without losing quality.

2. What is SVG used for?

SVG in HTML  is used to create scalable images, icons, data visualizations, animations, and responsive HTML designs. It is versatile, scalable, and ideal for generating dynamic web elements.

3. How do I add SVG to HTML?

To add SVG in HTML, use the tag with the src attribute pointing to an SVG file, or inline SVG code using the <svg> element.

4. What is the difference between SVG and canvas?

SVG in HTML is better for static or scalable visuals that need to be styled and edited, but <canvas> is better for dynamic and interactive graphics with complex rendering and animations. 

5. What is SVG with an example?

SVG in HTML stands for Scalable Vector Graphics. It allows you to produce graphics and visual elements directly in HTML using XML-based markup. For instance, here's an easy SVG code that creates a red circle:

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

  <circle cx="50" cy="50" r="40" fill="red" />

</svg>

This creates a red circle.

6. Are SVG files supported by all browsers?

SVG files are compatible with all modern web browsers, including Chrome, Firefox, Safari, Edge, and Opera.

7. Can I animate SVGs?

SVGs can be animated with CSS, JavaScript, or SVG-specific animation elements like <animate> and <animateTransform>.

8. Does SVG need ID?

No, SVG in HTML does not need an ID attribute. However, adding IDs to SVG elements can let you target them with CSS or JavaScript for styling, animation, and interactivity. Using IDs, you can apply custom styles or properties to individual SVG elements in your HTML content.