svg Tag in HTML


The <svg> tag is an HTML element used to define scalable vector graphics, which are graphics that can be scaled up or down without losing quality. SVG graphics are based on XML and can be created using text editors or specialized software.

To use the <svg> tag, follow these steps:

1. Open your text editor or HTML development tool.
2. Create a new HTML file or open an existing one.
3. Inside the <body> tag, create a <svg> element using the following syntax:

<svg width=”400″ height=”400″>
<!– Your SVG code goes here –>

4. Set the width and height attributes to specify the size of the SVG canvas. You can also set these attributes to percentages or leave them out entirely to let the SVG take up all available space.
5. Inside the <svg> element, add shapes, paths, text, and other SVG elements using XML syntax. Here’s an example that creates a rectangle:

Also Read:  Caption Tag in HTML

<svg width=”400″ height=”400″>
<rect x=”50″ y=”50″ width=”300″ height=”300″ fill=”blue”/>

6. In this example, the <rect> element creates a rectangle with an x and y position of 50 and a width and height of 300. The fill attribute sets the color of the rectangle to blue.
7. Save your HTML file and open it in a web browser to see the SVG graphic.

Some additional tips for working with SVG graphics:

– Use CSS to style SVG elements, just as you would with HTML elements.
– Use JavaScript to add interactivity to SVG graphics, such as hover effects and animations.
– Use SVG icons and graphics to create responsive designs that look great on any device.
– Use online tools or software such as Adobe Illustrator to create complex SVG graphics with ease.

Previous articlesup Tag n HTML
Next articletable in HTML
Namaskaar, Friends main Kapil ka Founder hu. Mere kai English blog bhi hai ,par mera motive yahan par easy language mein Technology se related Gyan ko aap tak pahunchane ka hai .taki aap kuch naya shikh sake. meri koshish hai ki bilkul simple tarike se aap ko nyi updates deta rahu taki aap bhi technology ke is yug mein peeche na rahe aur shikte rahe.Mujhse judne ke liye app mujhe Social Media par follow kar sakte hai.

Leave a Reply