HOME

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 Filters
SVG Intro
SVG Gaussian

SVG Gradients
SVG Linear
SVG Radial

SVG Examples
SVG Examples

SVG Reference
SVG Elements

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

SVG In HTML Pages

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

SVG in HTML Pages

Below you should see three different methods on how to embed SVG files into HTML pages.

Using the <embed> Tag

The <embed> tag is supported in all major browsers, and allows scripting.

Note: The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML pages! However, if you want to create valid XHTML, you cannot use <embed> - The <embed> tag is not listed in any HTML specification.

Syntax:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Note: The pluginspage attribute points to an URL for the plugin download.

Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through.

Using the <object> Tag

The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is that it does not allow scripting.

Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag (at least not in Internet Explorer)!

Syntax:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Note: The codebase attribute points to an URL for the plugin download.

Using the <iframe> Tag

The <iframe> tag works in most browsers.

Syntax:

<iframe src="rect.svg" width="300" height="100">
</iframe>

I Wish....

It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:

<html
xmlns:svg="http://www.w3.org/2000/svg">
<body>

<p>This is an HTML paragraph</p>

<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>

</body>
</html>

Altova® XMLSpy® - The world's best-selling XML editor!

Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web services development needs from start to finish.

XML editor
Graphical XML Schema / DTD editors
XSLT 1.0/2.0 editor, debugger, profiler
XQuery editor, debugger, profiler
Support for Office Open XML (OOXML)
Graphical WSDL editor & SOAP debugger
Java, C#, C++ code generation
And much more!

Download a free 30-day trial today!

Click to see a demo!

Learn what’s new in v2008

Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building.

The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.

The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

W3Schools was converted to XHTML in December 1999

SITE SEARCH
About W3Schools W3Schools Forum

Web based charting
for ASP.NET

WEB HOSTING
$15 Domain Name Registration Save $20 / year!

UK Domain Names
UK Web Hosting
Alojamiento Web

Buy UK Domain Names
Register Domain Names

Cheap Domain Names
Cheap Web Hosting

Best Web Hosting

Domain Name Registration

PHP MySQL Hosting

Top 10 Web Hosting

Web Hosting Providers

Web Hosting Company

UK Reseller Hosting

Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity

Custom Programming

FREE Trial or Demo
Web Content Manager
Forms,Web Alerts,RSS

Ecommerce Software

XMLSpy XML Editor

Azbuz Blog

SHOPPING
UK Wholesalers UK Wholesale UAE Dubai Property

Private Student Loans

UK Dropshippers & Wholesalers Directory

EDUCATION
US Web Design Schools

HTML Exam

YELLOW PAGES
www.nettkatalogen.no www.gulex.dk www.gulex.se www.gelbex.de www.teloos.fi www.teloos.fr www.teloos.co.uk www.teloos.at www.teloos.de