Add SVG to HTML

Table Of Contents

Add SVG to HTML

What is SVG?

SVG stands for Scalable Vector Graphics. It usually defines the vector based graphics in XML format.

SVG is an element in HTML (<svg>) that is used to define graphics for the web. It is a great technology that allows you to use vector graphics in HTML. It also allows you to describe images that can be rendered clearly at any size. We can also say SVG is to graphics, what HTML is to text. The <svg> element is a container for many SVG graphics like circles, rectangles, text etc.

<svg> element is supported by almost all major browsers.

Adding SVG to HTML

Now let’s add SVG to HTML and create some graphics.

SVG Circle

In an example below let’s write a code and draw a Circle by using SVG tag.

Example

<!DOCTYPE html>
<html>
<head>
  <title> SVG Graphics </title>
</head>
<body>

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

</body>
</html>

Copy the Code and Run it Here

Here the cx and cy attributes defines the X and Y coordinates of the center of the circle. The attribute r specifies the radius of the circle. By using the fill attribute we can fill the circle with any color we like. In an above example we have fill the circle with red color.

Click here to Learn more about SVG Circle.

SVG Rectangle

Example

<!DOCTYPE html>
<html>
<head>
  <title> SVG Graphics </title>
</head> 
<body>

<svg width="400" height="110">
  <rect width="300" height="100" stroke="green" stroke-width="4" fill="black" /> 
</svg>
 
</body>
</html>

Copy the Code and Run it Here

Here the width and height attribute defines the width and height of the rectangle. We have set the width of the rectangle 300px and height 100px. Stroke attribute defines the border color of the rectangle and stroke-width defines the width of the border. The attribute fill is used to fill the rectangle with any color we want. In an above example we have fill the rectangle with black color.

Learn more about SVG in our SVG Tutorial.

Next

Related Posts

HTML Canvas

Canvas Graphics

HTML Attributes

Add SVG to HTML – crus4