Menu
×
My W3Schools Get Certified Spaces For Teachers Plus Get Certified Spaces For Teachers Plus
   ❮     
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 CYBERSECURITY DATA SCIENCE
     ❯   

SVG in HTML

❮ Previous Next ❯

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>

❮ Previous Next ❯