Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

SVG embedded in HTML

There are several ways to display and SVG image on a web pages.

One way is to embed the svg tag in the HTML file as you can see in the following example. Between the opening and closing svg tags we can add all the instructions to draw the image. In our case there is a rectangle drawn using the rect element, a circle and some text. Each tag has its own attributes.

Having the SVG embedded in the HTML means that the browser does not need an extra request to load it, but on the other hand it cannot reuse the same SVG image between pages.

<html>
    <head>
        <title>SVG Embedded in HTML</title>
    </head>
<body>

<h1>SVG Embedded in HTML</h1>

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="200" cy="120" r="40" fill="rgb(0, 255, 0)" />
  <text x="200" y="50" font-size="30"
     text-anchor="middle" fill="blue">SVG Embedded in HTML</text>
</svg>

</body>
</html>

The above HTML file will render to this image:

SVG rendered