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" 
  <circle cx="100" 

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" 

In this example, the element defines the beginning and end of the SVG object. The data attribute specifies the location of the SVG file. The type attribute specifies the type of the object. The width and height attributes specify the size of the object.

In summary, SVG can be included in HTML documents using the element or the <object> element. The element is used to insert SVG code directly into the HTML document, while the <object> element is used to include an external SVG file.

Answers (0)