تتيح لك SVG أو Scalable Vector Graphics رسم صور أكثر تعقيدًا وجعلها تظهر على صفحات الويب. ولكن لا يمكنك ببساطة التقاط علامات SVG و صفها في HTML الخاص بك. لن تظهر وستكون صفحتك غير صالحة. بدلاً من ذلك ، يجب عليك استخدام إحدى الطرق الثلاثة.
استخدم علامة الكائن لتضمين SVG
ستدمج علامة HTML رسم SVG في صفحة الويب الخاصة بك. تكتب علامة الكائن ذات سمة بيانات لتعريف ملف SVG الذي تريد فتحه. يجب أيضًا تضمين سمات العرض والارتفاع لتحديد عرض صورة SVG وارتفاعها (بالبكسل).
بالنسبة إلى التوافق عبر المتصفحات ، يجب تضمين سمة type ، والتي يجب قراءتها:
نوع = "صورة / SVG + أكس"
و codebase للمتصفحات التي لا تدعمها (Internet Explorer 8 والإصدارات الأقل). يشير مصدر برنامجك إلى إضافة SVG للمتصفحات التي لا تدعم SVG. المكوّن الإضافي الأكثر استخدامًا هو Adobe على http://www.adobe.com/svg/viewer/install/. ومع ذلك ، لم تعد Adobe تدعم هذا المكون الإضافي. خيار آخر هو البرنامج المساعد Ssrc SVG من Savarese Software Research على http://www.savarese.com/software/svgplugin/.
سيبدو الكائن كالتالي:
نصائح لاستخدام كائن ل SVG
- تأكد من أن العرض والارتفاع لا يقلان عن حجم الصورة التي تقوم بتضمينها. خلاف ذلك ، قد يتم قص صورتك.
- قد لا يتم عرض SVG الخاص بك بشكل صحيح إذا لم تقم بتضمين نوع المحتوى الصحيح (
نوع = "صورة / SVG + أكس") ، لذلك لا أوصي بتركها. - يمكنك تضمين المعلومات الاحتياطية داخل
موضوعللمتصفحات التي لن تعرض ملفات SVG. - يمكنك أيضًا تعيين مصدر SVG ونوع المحتوى في المعلمات. قد يعمل هذا بشكل أفضل في IE 6 و 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
لاحظ أن هذا يتطلب فصلاً لجعله يعمل.
قم بعرض SVG في مثال لعلامة كائن.
تضمين SVG مع علامة التضمين
خيار آخر لديك بما في ذلك SVG هو استخدام العلامة. أنت تستخدم تقريبًا نفس سمات علامة الكائن ، بما في ذلك العرض <، والطول ، والنوع ، وأسط برمجيات>. والفرق الوحيد هو أنه بدلا من البيانات، يمكنك وضع عنوان URL المستند بتنسيق SVG في السمة src.
سيبدو تضمينك كما يلي:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
نصائح لاستخدام تضمين ل SVG
- إن علامة التضمين ليست HTML4 صالحًا ، ولكنها صالحة بتنسيق HTML5 ، لذا إذا كنت تستخدمها في صفحة HTML4 ، يجب أن تتذكر أن صفحتك لن تتحقق.
- استخدام اسم مجال quoalified بالكامل في السمة src للحصول على أفضل توافق.
- هناك أيضًا بعض التقارير التي تفيد بأن استخدام علامة التضمين مع مكون Adobe الإضافي سيؤدي إلى تعطل إصدارات Mozilla من 1.0 إلى 1.4.
عرض SVG في مثال علامة تضمين.
استخدم iframe لتضمين SVG
تعد إطارات Iframes طريقة أخرى سهلة لتضمين صورة SVG على صفحات الويب الخاصة بك. يتطلب الأمر ثلاثة سمات فقط: العرض والطول كالمعتاد ، وتوجيه src إلى موقع ملف SVG الخاص بك.
سيبدو iframe بالشكل التالي:
نصائح حول استخدام iframe لـ SVG
سيتم عرض iframe مع حدود حول صورتك ما لم تقم بإزالة الحدود بنمط ، مثل
على غرار = "الحدود: لا شيء؛"
لا يحدد iframe موقع مكون إضافي ، لذلك إذا لم يكن متصفح العميل يحتوي على المكوّن الإضافي ، فقد لا يرى أي شيء على الإطلاق ، أو قد يشاهد رسالة خطأ.
يمكنك عرض ملف SVG في مثال علامة iframe.
