Adding an SVG to a webpage

There are four main ways to add an SVG into a webpage.

Inline

Perhaps the easiest method is to paste your SVG element directly into your HTML directly.

<!doctype html>
<html>
  <body>
    <svg width="100" height="50">
      <circle cx="40" cy="20" r="10" />
    </svg>
  </body>
</html>

Although this can be useful if you're generating the HTML somehow, I would generally avoid this method. I think it's much cleaner to have the SVG in a separate file and it make it much easier to add to different pages or email to someone. There can also be issues with interactivity - since the SVG is not separate, mouse events are measured relative to the surrounding HTML and not the SVG, which makes them harder to deal with.

For example, click on the SVG below to see where value of the evt clientX and clientY attributes.

iframe

You can add your SVG using an iframe. This method is generally frowned upon and is not allowed in HTML4. It also creates a weird border around the image.

<iframe src="svgfile.svg" />

object

This is the method I tend to use. I can't see any difference between it and embed.

<object data="svgfile.svg" type="image/svg+xml"></object>

embed

This is pretty much the same as above.

<embed src="svgfile.svg" type="image/svg+xml" />

Post new comment

The content of this field is kept private and will not be shown publicly.