SVG in HTML

## SVG Basic

SVG HOME SVG Intro SVG Example SVG in HTML

## SVG Shapes

SVG Rectangle SVG Circle SVG Ellipse SVG Line SVG Polygon SVG Polyline SVG Path SVG Text SVG Stroking

## SVG Filters

SVG Filters Intro SVG Blur Effects SVG Drop Shadows

## SVG Gradients

SVG Linear SVG Radial

## SVG Examples

SVG Examples

## SVG Reference

SVG Reference

# SVG In HTML Pages

« Previous
Next Chapter »

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
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE