SVG در صفحه HTML

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

SVG در صفحه HTML

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

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

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

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

گرامر:

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

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

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

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

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

گرامر:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

نوٹ:codebase کا اثرو لینک لوگ آئی پلگ ان کا ڈاؤن لوڈ کا یورل نکالنا

<iframe> کا نشان کار استعمال کیا جانا

<iframe> کا نشان کار تقریباً تمام براؤزر میں کام کرتا ہے。

گرامر:

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

میں امید کرتا ہوں...

اگر صرف ایس وی جی کی نامشخصیت کی مرادف کا استعمال کیا جائے، تو یہ بہت بہتر ہوگا، یہ طوری ہے:

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