How to use SVG in HTML? -

How to use SVG in HTML?

SVG is an XML-based vector image format, which stands for Scalable Vector Graphics. It defines vector graphics in XML format, making it accessible and understandable to both humans and machines. SVG images are resolution-independent, which means they can be scaled to any size without losing quality. This is particularly useful in responsive web design, where the same image needs to adapt to various screen sizes and resolutions.

In the below PDF we discuss about HTML SVG in detail in simple language, Hope this will help in better understanding.

How to Use SVG In HTML:

Now, let’s dive into how to use SVG in HTML.

1. Inline SVG:
You can embed SVG directly in your HTML code using the <svg> element. Here’s a basic example:

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>

In this example, we create an SVG container with a red circle. The width and height attributes define the dimensions of the SVG canvas.

2. Using the <img> Tag:
You can also use the <img> tag to display an SVG image on your webpage:

<img src="your-image.svg" alt="SVG Image" width="100" height="100">

In this case, replace “your-image.svg” with the path to your SVG file.

3. SVG as a Background:
To use an SVG as a background image, you can apply it to an HTML element using CSS:

<div class="svg-background"></div>
css
Copy code
.svg-background {
background-image: url('your-image.svg');
background-size: cover;
width: 100px;
height: 100px;
}

Why Use SVG in HTML?

There are several compelling reasons to use SVG in HTML:

Scalability: SVG images can be scaled up or down without loss of quality, ensuring they look great on high-resolution screens and various devices.
Small File Size: SVG files are typically smaller than their raster image counterparts (e.g., JPEG, PNG), which reduces page loading times.
Accessibility: SVG images can be easily accessed and modified with assistive technologies, making them more inclusive for all users.
CSS Integration: You can style SVG graphics using CSS, allowing for dynamic changes and animations.
Interactive Elements: SVG supports adding interactive elements, such as hyperlinks and tooltips.