SVG in HTML

You can embed the SVG element directly into an HTML page.

Embed SVG directly into HTML page

Below is a simple SVG graphic example:

Sorry, your browser does not support inline SVG.

This is the HTML code:

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Try it yourself

SVG code explanation:

  • SVG images start with the '<svg>' element.
  • The 'width' and 'height' attributes of the '<svg>' element define the width and height of the SVG image.
  • The '<circle>' element is used to draw a circle.
  • The 'cx' and 'cy' attributes define the x and y coordinates of the circle's center. If 'cx' and 'cy' are not set, the circle's center is set to (0, 0).
  • The 'r' attribute defines the radius of the circle.
  • The 'stroke' and 'stroke-width' attributes control the display of the shape outline. We set the outline of the circle to a 4-pixel green 'border'.
  • The 'fill' attribute sets the color inside the circle. We set the fill color to yellow.
  • Close SVG image with </svg> tag

Note: Since SVG is written in XML, all elements must be properly closed!