www أفضل طريقة لوضع محتوى SVG داخل HTML




www mozilla developer network (2)

من خلال بحثي ، أفهم أن هناك ثلاث طرق لوضع ملف svg داخل HTML:

باستخدام تضمين :

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" />


باستخدام الكائن :

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" />


باستخدام iframe :

<iframe src="plot1.svg" width="500" height="320"> </iframe>


لقد جربت كل ثلاثة على منصة اختبار (django dev-built server ، مما يجعل الصفحات في Firefox 3.6). في ظل هذه البيئة العقيمة بشكل واضح ، لم ألاحظ أي فرق بين أداء أو قرار ث / ث / ر / ث.

سؤالي هو ما إذا كان أحدهما أفضل من الاثنين الآخرين ، وإذا كان كذلك ، فما هو السؤال. قد تعتمد الإجابة بالطبع على الحقائق ، التي حاولت أن أقتصر على ما هو ملائم:

نعرض بشكل متكرر البيانات (على سبيل المثال ، السلاسل الزمنية) على موقعنا ، عادة ما يتم إنشاؤها استجابة لبعض إجراءات المستخدم ؛ بناءً على إجراء المستخدم هذا ، يتم إجراء اتصال بقاعدة بيانات ، ويتم تجميع البيانات التي يتم إرجاعها وإرسالها إلى محرك التآمر ، مما يجعل الصورة الثابتة مضمنة في الصفحة - وهي أشياء قياسية جدًا.

هذا يعمل بشكل جيد ، ولكن أود إضافة بعض الميزات التفاعلية لهذه المخططات (على سبيل المثال ، تلميحات الأدوات ، تسميات المحور ذات الارتباط التشعبي ، تسليط الضوء على مجموعة من النقاط w / في مؤامرة). بعض المخططات متطورة إلى حد ما (على سبيل المثال ، أجهزة تكييف متعددة اللوحات) ولم أجد مكتبة مخطط جافا سكريبت تتضمن هذه الميزات. استقرت في النهاية على استخدام مكتبة التخطيط نفسها (Lattice in R) ، ولكن تقديم كل مخطط في svg ثم إضافة ميزات تفاعل المستخدم في خطوة ما بعد المعالجة ، والتي تتكون أساسًا من وظائف javascript التي تتعامل مع XML مباشرة.


<embed> أود أن أتجنب بشكل عام. تم إيقافه في HTML4 ، ولا يسمح بالمحتوى الاحتياطي المناسب ، وكان لديه مجموعة من المشكلات في IE.

سيسمح لك <object> بتضمين محتوى HTML الاحتياطي للمتصفحات دون دعم SVG. سيعود <iframe> إلى مطالبتك بتنزيل ملف .svg. أي من هؤلاء هو أفضل يعتمد على الأرجح على التطبيق.

البديل الآخر ، للمتصفحات الحديثة (بما في ذلك IE من الإصدار 9) هو خدمة صفحة الويب الخاصة بك application/xhtml+html وتضمين عناصر SVG في الصفحة نفسها.






svg