SVG in HTML

English | French | Portugese | German | Italian

|

|

|

|

|

SVG Tutorial

SVG Introduction

SVG Gussian Blur

SVG Gradient-Linear

SVG Gradients-Radial

SVG Elements Reference

HTML Tutorials

TCP/IP Tutorial

XML Tutorials

Schema Tutorial

XForms Tutorial

XSL-FO Tutorial

XML DOM Tutorial

XQuery Tutorial

XPointer Tutorial

Web Services Tutorial

Browser Scripting

JavaScript Tutorial

VBScript Tutorial

HTML DOM Tutorial

WMLScript Tutorial

Server Scripting

.NET (dotnet)

XML Web Services

Multimedia

Web Building

Java Tutorials

Servlets Tutorial

Struts Tutorial

Programming Langauges

Visual Basic Tutorial

Data Structures Using C

Soft Skills

Communication Skills

Time Management

Project Management

Leadership Skills

Corporate Communication

Negotiation Skills

SVG in HTML

Previous

Next

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

Creating SVG files using HTML

Below you should see three different methods on how to embed SVG file into HTML page.

Using the <embed> Tag

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

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

Syntax:

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

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

Tip: Internet Explorer support 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 browsers. The disadvantage is that it does not allow scripting language.

Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag .

Syntax:

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

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

Using the <iframe> Tag

The <iframe> tag works in almost all browsers.

Syntax:

<iframe src="rectangle.svg" height="100" width="300" type="image/svg+xml" ></iframe>

Adding SVG elements directly into the HTML code

It would be great if we could add SVG elements directly into the HTML file, 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>

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Previous

Next

Keywords: svg viewer, svg file, svg text, svg editor, adobe svg, svg distribution, svg graphics, nbc radio svg, javascript svg, svg antivirus

HTML Quizes

XML Quizes

Web Services Quiz

Browser Scripting Quizes

JavaScript Quiz

Server Scripting Quizes

.NET (dotnet) Quizes

Microsoft.Net Quiz

XML Web Services Quiz

.Net Mobile Quiz

C# : C Sharp Quiz

Multimedia Quizes

Web Building Quizes

Web Browsers Quiz

Web Hosting Quiz

Web Building Quiz

Web Quality Quiz

Web Semantic Quiz

Web Careers Quiz

Java Quizes

Programming Langauges Quizes

Visual Basic Quiz

Data Structures Using C Quiz

Soft Skills Quizes

Communication Skills Quiz

Time Management Quiz

Project Management Quiz

Leadership Skills Quiz

Corporate Communication Quiz

Negotiation Skills Quiz

Copyright � 2003-2008 Vyom Technosoft Pvt. Ltd., All Rights Reserved.