اختبار دعم SVG عبر محركات متصفح الويب [دراسة حالة]
يتم دعم SVG (Scalable Vector Graphics) رسميًا بواسطة جميع متصفحات الويب الرئيسية ، بما في ذلك Internet Explorer. يمتد الدعم إلى مجموعة واسعة من برامج محرر الصور ، وخاصة Inkscape ، والذي يستخدم SVG كتنسيق أصلي له (إذا كنت تريد تجديد معلومات على SVG ، انقر هنا).
ولكن ما الذي تدعمه متصفحات الويب بالضبط؟ هل تعرض جميع محركات العرض ملفات SVG وميزاتها بنفس الطريقة؟ وماذا عن ميزاتها المتقدمة مثل المرشحات؟ حسنًا ، هذا ما سنكتشفه. أخذنا عينة من المتصفحات الحديثة ، بما في ذلك بعض من أقلها شهرة ، و اختبرها باستخدام ملف SVG لهذا الغرض.
صورة الاختبار
قمنا بإعداد صورة الاختبار الخاصة بنا مع التركيز على العناصر التي من المرجح أن يستخدمها الفنانون. من بين الميزات التي تم اختبارها: مسارات النص وتفاعلاتها ، التدرجات ، مرشح gaussian blur وأخيراً مرشح مركب متقدم مكدس من أنواع أكثر من المرشحات.
محركات متصفح الويب
محرك وميض
لقد بدأنا - إلى حد بعيد ، محرك التقديم الأكثر شيوعًا - Blink. Blink هو المحرك الأصلي لمتصفحات Google Chrome و Chromium و Opera و Android WebView. تعرض جميع المتصفحات المذكورة أعلاه اختبار الصور بنفس الطريقة عبر الأنظمة الأساسية المختبرة.
عند مقارنتها بالصورة الأصلية التي تنتجها Inkscape ، لم تكن هناك أية مشكلات باستثناء اختلاف بسيط في عرض تأثيرات المرشح المكدسة.
| المتصفح | الإصدار | برنامج | نتيجة |
| الكروم | 43.0.2357.125 | لينكس |  |
| دار الأوبرا | 30.0.1835.59 | لينكس | |
| دار الأوبرا | 30.0.1856.93524 | ذكري المظهر | |
| دار الأوبرا | 30.0.1835.88 | شبابيك | |
| كروم | 38.0.2125.114 | ذكري المظهر | |
| كروم | 43.0.2357.130 | شبابيك | |
| شعلة | 39.0.0.9626 | شبابيك |
محرك Webkit
وفقًا لإحصائيات استخدام المتصفح الحديثة ، لا تنتمي المراكز الثلاثة الأولى إلى متصفحات تستند إلى webkit (اعتبارًا من مايو 2015). ومع ذلك ، فإن هذا المحرك واسع الانتشار بين المطورين. علاوة على ذلك ، هناك العديد من التطبيقات والشوك
قدمت جميع المتصفحات التي تم اختبارها ملف SVG الخاص بنا دون مشاكل. ومع ذلك ، فقد لوحظت اختلافات في تقديم الإضاءة المعيارية ، وهي مكون مرشح مركب ، بالمقارنة مع إنكسكيب.
| المتصفح | الإصدار | برنامج | نتيجة |
| رحلات السفاري | 8.0.6 | ماك |  |
| قندس | 0.9.05 | لينكس | |
| QupZilla | 1.8.6 | لينكس | |
| QupZilla | 1.8.6 | شبابيك | |
| دولفين | 10.3.1 | ذكري المظهر | |
| كونكيورر | 15.04.2 | لينكس | |
| متصفح UC | 10.5.0.575 | ذكري المظهر |
محرك ترايدنت
Trident هو محرك خاص تستخدمه إصدارات Internet Explorer 4.0 - 11.0. فسر IE لدينا SVG تماما. علاوة على ذلك ، فإن مظهر المرشح المركب يطابق الصورة الأصلية بشكل أفضل. لقد اختبرنا أيضًا IE 9 ، ثاني IE الأكثر استخدامًا (اعتبارًا من مايو 2015) ووجدنا أن هذا الإصدار واجه مشاكل مع التمويه الغازي والتصفية المركبة.
هذه ليست مفاجأة ، حيث تم إصدار IE 9 في البداية قبل المسودة النهائية لمعيار SVG 1.1 SE ، حيث تمت إضافة تأثيرات المرشح رسميًا.
| المتصفح | الإصدار | برنامج | نتيجة |
| أي | 11.0.9600.17843 | شبابيك |  |
| المتصفح | الإصدار | برنامج | نتيجة |
| أي | 9.0.8112.16421 | شبابيك |  |
محرك أبو بريص
Gecko هو محرك تم تطويره بواسطة شركة Mozilla Corporation وبالتالي يتم استخدامه في متصفح الويب Firefox أو عميل البريد الإلكتروني Thunderbird. كما أنها تستخدم من قبل المتصفحات PaleMoon و Waterfox والعديد من الشوك الأخرى من إصدارات Firefox السابقة. في حالة محرك Gecko ، لم تكن النتائج مماثلة تمامًا عبر منصات مختلفة.
عرضت نسخة ويندوز خلل صغير في تقديم النص على طول الطريق. تمت ملاحظة نفس المشكلة في كل من متصفحي Firefox و PaleMoon. تمامًا مثل Webkit ، يبدو أن Gecko يواجه مشكلة في تقديم مرشح الإضاءة المعيارية بشكل بدائي بشكل صحيح.
| المتصفح | الإصدار | برنامج | نتيجة |
| ثعلب النار | 38.0.5 | لينكس |  |
| ثعلب النار | 38.0.5 | ذكري المظهر | |
| القمر الشاحب | 25.5 | ذكري المظهر |
| المتصفح | الإصدار | برنامج | نتيجة |
| ثعلب النار | 38.0.5 | شبابيك |  |
| القمر الشاحب | 25.5 | شبابيك |
المتصفحات إشكالية
كما هو موضح أعلاه ، اجتازت جميع الإصدارات الحديثة من محركات / متصفحات العرض الرئيسية اختبارنا دون صعوبات كبيرة. دعونا تحقق من تلك التي لم تفعل جيدا.
ملحقات هو متصفح عبر منصة وضعت في الصين. وفقًا لمتصفح Fahad Khan العشرين على الويب ، يستخدم Windows Maxthon كلاً من محركات Trident و Webkit. لم نلاحظ أي مشكلة في تقديم SVG على نظام Linux (الإصدار 1.0.5.3) ونظام Windows (الإصدار 4.4.5.3000) ؛ ومع ذلك ، على جهاز Android ، لم يتم تقديم طمس gaussian أو غيرها من بدائل المرشح.
متصفح CM تم التنفيذ بسرعة على جهاز Samsung galaxy S3 الخاص بنا ، لكنه لا يدعم أيضًا أيًا من تأثيرات المرشح الموصوفة في مواصفات SVG 1.1 SE.
| المتصفح | الإصدار | برنامج | نتيجة |
| ملحقات | 4.4.6.2000 | ذكري المظهر |  |
| متصفح CM | 5.1.94 | ذكري المظهر |
كونكيورر هو متصفح افتراضي لـ KDE ، أحد بيئات سطح مكتب Linux الأكثر شعبية. تعتمد القدرة على تقديم ملفات SVG في Konqueror على محرك التقديم. مع تمكين WebKit ، تم عرض SVG الخاص بنا في الاختبار بشكل صحيح. ومع ذلك ، يبدو أن محرك التقديم الافتراضي لـ Konqueror ، KHTML ، يفتقر إلى دعم العديد من الميزات: لا يتم تطبيق تأثيرات المرشح على علامات الكائنات الأساسية ونهايات الحد ، ولا يتم تقديم النص على طول المسار أو كائنات النمط مطلقًا.
| المتصفح | الإصدار | برنامج | نتيجة |
| Konqueror KHTML | 15.04.2 | لينكس |  |
استنتاج
في اختبارنا ، ركزنا على دعم تنسيق SVG عبر محركات تقديم الويب الحديثة. لقد قمنا باختبار 4 محركات تقديم رئيسية و 15 متصفحات مختلفة بما في ذلك تلك الشائعة مثل Maxthon أو Dolphin. مرت جميع الإصدارات الحالية من المتصفحات تقريبًا باختبارنا ومن الصعب تحديد فائز نهائي.
يبدو أنه الدعم و التراص الصحيح للبدائل المرشحة هو التحدي الأخير المتبقي لمحركات التقديم الحالية. عندما نقارن صورة SVG الأصلية مع جميع النتائج المقدمة ، نقوم بترشيح IE 11 (محرك ترايدنت) بشكل شخصي للمركز الأول.
ومع ذلك ، فمن الواضح أن محرك Blink يتابع عن كثب ، وبالتالي نوصي باستخدام المستعرضات المستندة إلى Blink لعرض ملفات SVG. إذا كنت ترغب في إجراء اختبار سريع لمتصفحك المفضل ، فلا تتردد في استخدام صفحة اختبار SVG renderer الخاصة بنا هنا.
ملحوظة المحرر: كُتب هذا المقال لموقع Hongkiat.com بواسطة Michal Rost. يعمل Michal كمبرمج في شركة طبية حيوية ، لكنه يخصص وقت فراغه لتطوير تطبيقات مفتوحة المصدر وبوابات ويب غير ربحية. وهو مؤسس scalablegfx. يمكنك العثور عليه على تويتر.
