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 به URL دانلود پلاگین اشاره دارد.

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

برچسب <iframe> در اکثر مرورگرها کار می‌کند.

قانون‌گذاری:

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

من انتظار دارم...

اگر بتوان SVG به وسیله‌ی نام‌فضای آن به کد HTML اضافه کرد، بسیار عالی خواهد بود، مثل این:

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