SVG is on the HTML page
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.
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:
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:
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:
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>
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