X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

SVG in HTML


In HTML5, you can embed SVG elements directly into your HTML pages.


Embed SVG Directly Into HTML Pages

Here is an example of a simple SVG graphic:

Sorry, your browser does not support inline SVG.

and here is the HTML code:

Example

<!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:

  • An SVG image begins with an <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 center of the circle. If cx and cy are omitted, 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 how the outline of a shape appears. We set the outline of the circle to a 4px green "border"
  • The fill attribute refers to the color inside the circle. We set the fill color to yellow
  • The closing </svg> tag closes the SVG image

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



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook