SVG in HTML5

In HTML5, the SVG elements can be embedded directly into your HTML page.

If the SVG is written in XML, all elements should be appropriately closed!

Shape elements in SVG

SVG has some predetermined shape elements. Here they are:

Example of embedding SVG into HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Now let's understand the code:

  • An SVG image always starts with an <svg> tag.
  • The SVG image's width and height are specified by the width and height attributes of the <svg> element.
  • The <circle> element draws a circle.
  • The cx and cy attributes specify the x and y coordinates of the circle's center. If cx and cy are absent, the center of the circle is set to (0, 0).
  • The r attribute is used to specify the radius of the circle.
  • The stroke and stroke-width attributes control the appearance of the outline of a shape. In our code example, we have set the outline of the circle to a 5px purple "border."
  • The fill attribute sets a color within the circle. We set it to pink.
  • The SVG image is closed with the closing </svg> tag.



Do you find this helpful?

Related articles