SVG sa HTML page

Maaaring mailagay ang SVG file sa HTML document gamit ang mga sumusunod na tag: <embed>, <object> o <iframe>.

SVG sa HTML page

Sa susunod, makikita mo ang tatlong iba't ibang paraan ng pag-embed ng SVG file sa HTML page.

Gamit ang <embed> tag

Ang <embed> tag ay suportado ng lahat ng pangunahing browser, at pinapayagan ang paggamit ng script.

Note:Kung magagamit ka ng <embed> tag sa pag-embed ng SVG sa HTML page, ito ay inirerekomendang paraan ng Adobe SVG Viewer! Gayunpaman, kung kailangan mo ng legal na XHTML, hindi mo dapat gamitin ang <embed>. Walang <embed> tag sa anumang HTML specification.

Syntax:

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

Note:Ang attribute na pluginspage ay tumutukoy sa URL ng pagdownload ng plugin.

Gamit ang <object> tag

<object> tag ay standard na tag sa HTML 4, na suportado ng lahat ng bagong browser. Ang kanyang kahinaan ay hindi pinapayagan ang paggamit ng script.

Note:Kung iyong nag-install ng pinakabagong bersyon ng Adobe SVG Viewer, kung magamit ka ng <object> tag, ang SVG file ay hindi gumagana (hindi man sa IE)!

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 the URL for downloading the plugin.

Using the <iframe> tag

The <iframe> tag works in most browsers.

Syntax:

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

I expect...

If it is possible to add SVG elements between HTML code simply by referencing the SVG namespace, that would be great, 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>