SVG is on the HTML page


Release date:2023-12-05 Update date:2023-12-06 Editor:admin View counts:207

Label:

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

Powered by TorCMS (https://github.com/bukun/TorCMS).