SVG files can be embedded in HTML documents with the following tags:
<
embed
>
,
<object>
or
<iframe>
.
The code for SVG can be embedded directly into the HTML page, or you can link directly to the SVG file.
1.4.1.
Use
<embed>
label
¶
<embed>
:
-
Advantages: all major browsers support it and allow scripting
-
Cons: not recommended for use in HTML4 and XHTML (but allowed in HTML5)
Syntax:
<embed src="circle1.svg" type="image/svg+xml" />
Results:
1.4.2.
Use
<object>
label
¶
<object>
:
-
Advantages: all major browsers support HTML4,XHTML and HTML5 standards
-
Cons: scripts are not allowed.
Syntax:
<object data="circle1.svg" type="image/svg+xml"></object>
Results:
1.4.3.
Use
<iframe>
label
¶
<iframe>
:
-
Advantages: all major browsers support it and allow scripting
-
Cons: not recommended for use in HTML4 and XHTML (but allowed in HTML5)
Syntax:
<iframe src="circle1.svg"></iframe>
Results:
1.4.4. Embed SVG code directly in HTML ¶
In Firefox, Internet Explorer9, Google Chrome, and Safari, you can embed SVGcode directly in HTML.
Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red"/></svg>
1.4.5. Link to SVG file ¶
You can also use the
<a>
tag link to an SVG file: link to a SVG file
You can also use the
<a>
the tag links to an SVG file:
<a href="circle1.svg">View SVG files</a>
Result: view SVG fil