SVG في صفحة HTML

يمكن دمج ملفات SVG في وثيقة HTML باستخدام العلامات التالية: <embed>، <object> أو <iframe>.

SVG في صفحة HTML

فيما يلي، سترى ثلاث طرق مختلفة لدمج ملفات SVG في صفحات HTML.

استخدام علامة <embed>

علامة <embed> مدعومة من جميع المتصفحات الشائعة وتسمح باستخدام السكربت.

نکته:استخدام علامة <embed> لدمج SVG في صفحة HTML هو الطريقة الموصى بها من قبل 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، فإن SVG ملفات لا تعمل عند استخدام علامة <object> (على الأقل لا تعمل في 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، بتوان 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>