SVG در صفحه HTML

فایل SVG می‌تواند با استفاده از برچسب‌های زیر به مستند HTML پیوند داده شود: <embed>، <object> یا <iframe>.

SVG در صفحه HTML

در اینجا، سه روش مختلف برای پیوند دادن فایل SVG به صفحه HTML را مشاهده خواهید کرد.

استفاده از برچسب <embed>

برچسب <embed> توسط تمام مرورگرهای معروف پشتیبانی می‌شود و استفاده از اسکریپت را مجاز می‌کند.

Note:وقتی SVG را در صفحه HTML پیوند می‌دهید از برچسب <embed> استفاده کنید، این روش Adobe SVG Viewer توصیه می‌کند! اما اگر نیاز به ایجاد XHTML قانونی دارید، نمی‌توانید از <embed> استفاده کنید. هیچ برچسب <embed> در هیچ یک از استانداردهای HTML وجود ندارد.

Grammar:

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

Note:ویژگی pluginspage به URL دانلود پلاگین‌ها اشاره دارد.

استفاده از برچسب <object>

برچسب <object> یک برچسب استاندارد HTML 4 است که توسط تمام مرورگرهای جدیدتر پشتیبانی می‌شود. معایب آن این است که استفاده از اسکریپت را مجاز نمی‌کند.

Note:اگر آنچه که شما نصب کردید Adobe SVG Viewer نسخه جدید است، پس وقتی از برچسب <object> استفاده می‌کنید، فایل SVG نمی‌تواند کار کند (حداقل در IE نمی‌تواند کار کند)!

Grammar:

<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.

Grammar:

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

I expect...

If it is possible to add SVG elements to 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>