Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG in HTML


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" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Try it Yourself »

SVG Code explanation:

  • Start with the <svg> root element
  • The width and height of the SVG image is defined with the width and height attributes
  • Since SVG is an XML dialect, always bind the namespace correctly with the xmlns attribute
  • The namespace "http://www.w3.org/2000/svg" identifies SVG elements inside an HTML document
  • 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 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, remember this:

  • All elements must be properly closed
  • XML is case-sensitive, so write all SVG elements and attributes in same case. We prefer lower-case
  • Place all attribute values in SVG inside quotes (even if they are numbers)


Another SVG Example

Here is another example of a simple SVG graphic:

SVG Sorry, your browser does not support inline SVG.

and here is the HTML code:

Example

<!DOCTYPE html>
<html>
<body>

<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="green" />
  <circle cx="75" cy="50" r="40" fill="yellow" />
  <text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>

</body>
</html>
Try it Yourself »

SVG Code explanation:

  • Start with the <svg> root element, define the width and height, and proper namespace
  • The <rect> element is used to draw a rectangle
  • The width and height of the rectangle is set to 100% of the width/height of the <svg> element
  • Set the fill color of the rectangle to green
  • 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
  • The r attribute defines the radius of the circle
  • We set the fill color of the circle to yellow
  • The <text> element is used to draw a text
  • The x and y attributes define the x and y coordinates of the center of the text
  • The font-size attribute defines the font size of the text
  • The text-anchor attribute defines where we want the midpoint (of the text) to be
  • The fill attribute defines the color of the text
  • Write "SVG" as the text to show
  • Close the SVG image with </svg>

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.