كيفية وضع SVG الرسومات على صفحة الويب الخاصة بك

تتيح لك 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 الخاص بك بشكل صحيح إذا لم تقم بتضمين نوع المحتوى الصحيح (type = "image / svg + xml") ، لذلك لا أوصي بتركه.
  • يمكنك تضمين المعلومات الاحتياطية داخل علامة الكائن للمتصفحات التي لن تعرض ملفات 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 بالشكل التالي: