How to insert SVG into html

Learn how to embed SVG images into HTML with an example of a simple SVG graphic.

Inserting SVG in HTML

Including SVG in HTML documents is simple. SVG is an XML-based language used for describing two-dimensional vector graphics. SVG stands for Scalable Vector Graphics. You can insert SVG in HTML documents using the element.

An example of inserting SVG in HTML is shown below:

<svg width="200" 
     height="200">
  <circle cx="100" 
          cy="100" 
          r="50" 
          fill="blue"/>
</svg>

This SVG code will draw a blue circle with radius 50. The element defines the beginning and end of the SVG object. The element defines the circle and its attributes. The cx and cy attributes determine the center of the circle, and the r attribute determines the radius. The fill attribute determines the color of the circle.

You can also include SVG files in HTML documents using the <object> element. The <object> element takes an data attribute which points to the SVG file. An example of including an SVG file is shown below:

<object data="mySvgImage.svg" 
        type="image/svg+xml" 
        width="200" 
        height="200">
</object>

In this example, the