W3Schools.com

SVG In HTML Pages

SVG files can be embedded into HTML pages with <embed>, <object>, or <iframe>.

SVG code can also be embedded directly into HTML pages, or you can link directly to the SVG file.

Embed SVG With the <embed> Tag

<embed>:

  • advantage: supported in all major browsers, and allows scripting
  • disadvantage: deprecated in HTML4 and XHTML (but allowed in HTML5)

Syntax:

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

Result:

Embed SVG With the <object> Tag

<object>:

  • advantage: supported in all major browsers and is standard in HTML4, XHTML, and HTML5
  • disadvantage: does not allow scripting

Syntax:

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

Result:

Embed SVG With the <iframe> Tag

<iframe>:

  • advantage: supported in all major browsers
  • disadvantage: generates a window-like border without specific styling, and not allowed in HTML4/XHTML strict DTD

Syntax:

<iframe src="circle1.svg"></iframe>

Result:

Embed SVG code directly into the HTML

In Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari you can also embed the SVG code directly into the HTML code:

Example

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

Try it yourself »

Link to an SVG File

You could also link to an SVG file with the <a> tag:

<a href="circle1.svg">View SVG file<a>

Result:

View SVG file

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE