How to add svg to html

Learn how to easily add scalable vector graphics (SVG) to your HTML with this simple tutorial and example code.

Adding SVG (Scalable Vector Graphics) to HTML is a great way to enhance the visual appeal of your web page. SVG is a vector image format that is supported by all modern web browsers, making it a versatile and powerful tool for creating dynamic and interactive graphics.

To add an SVG image to your HTML, you can use the <img> tag or the <svg> tag. The <img> tag is used to embed a standalone SVG file, while the <svg> tag is used to directly include SVG markup within your HTML document.

Let's start by using the <img> tag to embed an SVG image:

<img src="example.svg" alt="Example SVG" width="200" height="200">

In the code above, we use the <img> tag and specify the path to the SVG file using the src attribute. The alt attribute provides alternative text for the image, and the width and height attributes set the dimensions of the image.

If you want to include SVG markup directly within your HTML document, you can use the <svg> tag:

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

In this example, we use the <svg> tag to create an SVG container with a width and height of 100 units. Inside the <svg> tag, we use the <circle> tag to draw a red circle with a center at (50, 50) and a radius of 40 units.

When adding SVG to HTML, it's important to ensure that the SVG content is accessible and responsive. You can use CSS to style and manipulate the SVG elements, and JavaScript to add interactivity to the graphics.

By using SVG in your HTML, you can create stunning visuals that scale seamlessly across different devices and screen sizes, making your web page more engaging and dynamic.