ما هو ملف SVG (وكيف يمكنك تحميل SVGs إلى وورد بريس)؟

السبب الرئيسي وراء شعبية ملفات SVG بشكل خاص بين المطورين والمصممين هو أنها تنسيق صورة قابل للتطوير ، وعادةً ما يكون أصغر حجمًا (أحيانًا بقليل جدًا) ، ولا تنقسم على شاشات شبكية العين. لا يسمح وورد بريس افتراضيًا بتحميل تنسيق ملف SVG ، ويرجع ذلك أساسًا إلى مخاوف أمنية.

جرب نسخة تجريبية مجانية

اليوم سوف نتعمق في ماهية SVGs ، وكيف يمكن أن تكون مفيدة ، وكيف يمكنك تمكين دعم وورد بريس SVG بأمان. سنناقش أيضًا دعم المتصفح ، بالإضافة إلى بعض التحذيرات إذا قررت أنك تريد التبديل إلى تنسيق صورة المتجه.

نأمل يومًا ما أن يكون لدينا SVG كجزء من نواة وورد بريس ، لكننا لم نصل إلى هناك بعد.

ما هو ملف SVG؟

SVG (Scalable Vector Graphics) هي صورة متجهية تستند إلى XML وتستخدم بشكل شائع من قبل مواقع الويب والعلامات التجارية لعرض الشعارات والأيقونات على مواقع الويب الخاصة بهم. تعرف ويكيبيديا SVG على النحو التالي:

SVG (رسومات متجهة قابلة للتطوير) هو تنسيق صورة متجه مستند إلى XML للرسومات ثنائية الأبعاد مع دعم للتفاعلية والرسوم المتحركة. مواصفات SVG هي معيار مفتوح تم تطويره بواسطة World Wide Web Consortium (W3C) منذ 1999.

يمكنك حتى معالجة ملفات SVG باستخدام كود أو محرر نصوص . يتم استخدام SVGs حاليًا بواسطة 33٪ من جميع مواقع الويب  وكما ترى أدناه ، فإن معدل الانتقال ينمو بسرعة. المواقع الشهيرة مثل Google و Reddit و Dropbox و ESPN وحتى موقع الويب الخاص بنا هنا في Kinsta تستخدم SVGs.

إحصائيات استخدام SVG أبريل 2020 – أبريل 2021

إحصائيات استخدام SVG أبريل 2020 – أبريل 2021

دعم متصفح ملفات SVG

ملفات SVG مدعومة حاليًا من قبل جميع المتصفحات الرئيسية بما في ذلك متصفحات الجوال. المشكلة الوحيدة التي قد تواجهها هي ما إذا كنت لا تزال بحاجة إلى دعم IE8 ، وهو ما نأمل ألا تفعله. يمتلك IE8 حوالي 0.36٪ من حصة سوق المتصفح ولم يعد مدعومًا. إليك مقال رائع كتبه Lubos حول سبب توقف المطورين عن دعم IE8 و IE9 و IE10 . من منظور الأعمال ، قد لا يكون هذا ممكنًا دائمًا ، لكنه يطرح بعض النقاط الجيدة. إذا كنت لا تزال بحاجة إلى دعم IE8 لسبب ما ، فيمكنك تحديد صورة احتياطية (PNG أو JPG) لصور SVG الخاصة بك ، لكننا لن ندخل في ذلك اليوم. فيما يلي قائمة بالمتصفحات المدعومة:

Internet Explorer 9 و 10 و 11+ و Edge

Firefox 2+

Chrome 4+

Safari 3.1+

أوبرا 10+

iOS Safari 3.2+

متصفح Android 3+

Firefox لنظام Android 86+

Opera Mini (الكل)

Opera Mobile 12+

Chrome لنظام Android 89+

متصفح UC لنظام Android 12.12+

Samsung Internet 4+

QQ Browser 10.4.1 تحديث

متصفح بايدو 7.12.0

متصفح KaiOS 2.5.1

دعم متصفح SVG

دعم متصفح SVG

فوائد استخدام ملفات SVG

ملفات SVG هي تنسيق متجه ، مما يعني أنها قابلة للتطوير تلقائيًا في كل من المستعرضات وأدوات تحرير الصور. هذا يجعلها رائعة لكل من مصممي الجرافيك والويب. عادةً عندما تحاول تحرير PNG أو JPG بأداة مثل Photoshop أو Sketch أو Paint ، لا يمكنك ترقيتها بدون بكسل. باستخدام SVGs ، يمكنك ترقيتها إلى كمية لا حصر لها وستبدو مثالية للبكسل (أو ينبغي أن نقول ناقل مثالي) في كل مرة. هذا هو السبب في أنها تنسيق صور رائع لاستخدامه في شاشات شبكية العين.

تقوم Google بفهرسة SVGs ، وهي أخبار رائعة لأغراض تحسين محركات البحث . ستتم فهرسة محتوى SVG المرتبط بالملف نفسه وسيظهر في بحث الصور من Google. يمكنك رؤية هذا مباشرة من خلال الرسوم التوضيحية لـ SVG التي نستخدمها في Kinsta من خلال إجراء بحث متقدم عن الصور . ملاحظة: لا تتم فهرسة ملفات SVG المضمنة ، أو بالأحرى تلك المؤلفة من رمز فقط.

عادةً ما تكون ملفات SVG أصغر حجمًا من ملفات PNG أو JPG (ليس دائمًا) . باستخدام SVGs ، يمكنك بالفعل تسريع موقع وورد بريس الخاص بك حيث ستقلل من الحجم الإجمالي لصفحتك. كتب Genki مقالًا رائعًا يقارن فيه حجم SVG مقابل PNG مقابل JPEG وإليك مقارنة JPG مقابل JPEG . فيما يلي بعض الوجبات السريعة من اختباره الذي قارن فيه أنواع الصور الثلاثة المختلفة.

JPG (الحجم الأمثل: 81.4 كيلوبايت)

حجم JPG

صورة JPG

PNG (الحجم الأمثل: 85.1 كيلوبايت)

حجم PNG

صورة PNG

SVG (الحجم الأمثل: 6.1 كيلوبايت)

صورة ملف SVG

صورة SVG

كما ترى أعلاه ، فإن SVG هو انخفاض في حجم الملف بنسبة 92.51٪ بالمقارنة مع JPG. وبالمقارنة مع PNG 92.83٪ . هذه اختلافات رائعة في حجم الملف. ومع ذلك ، هناك تحذير واحد ، لأنه اختبر صورًا أكثر تفصيلاً ، أصبحت SVGs في النهاية أكبر حجمًا من JPG أو PNG.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

لقد تم تمكين GZIP على جميع خوادمنا حتى يكونوا جاهزين للتعامل مع SVG الخاص بك. جرب Kinsta مجانًا .

هذا هو السبب في أن العديد من المواقع تستخدم SVGs لصور أقل تفصيلاً مثل الشعارات والرموز وما إلى ذلك حيث ستشهد انخفاضًا كبيرًا في أحجام الملفات. ولكن لمزيد من الصور بتفاصيل رائعة ، مثل منشور المدونة الخاص بك “صور مميزة” ، قد ترغب في التمسك بتنسيق PNG أو JPG ولكن لا يزال بإمكانك تحسينها . تستخدم العديد من مواقع الويب نهجًا مختلطًا ، باستخدام كلا نوعي الملفات معًا حيث يكون ذلك منطقيًا.

أيضًا ، من المهم ملاحظة أن شبكات التواصل الاجتماعي مثل Facebook و Twitter لا تدعم SVGs للمشاركة. لذلك إذا استخدمت SVGs لصورك المميزة ، فسيتعين عليك استخدام ميزة Yoast SEO وتحميل PNG أو JPG لعلامات OG والعلامات الوصفية ، وإلا فقد تخاطر بعدم ظهور صورتك المميزة على الإطلاق.

لماذا أمن SVG مهم

السبب في أن SVG ليس جزءًا من نواة وورد بريس حتى الآن هو أن هناك مخاوف أمنية يجب معالجتها. يمكنك متابعة المناقشة النشطة حول SVGs في نواة وورد بريس (# 24251) والتي بدأت في عام 2013. SVG هو ملف XML ، والذي يفتح بحد ذاته أمام نقاط ضعف مختلفة لا تتأثر تنسيقات الصور العادية. وتشمل هذه  الهجمات كيانات XML الخارجية (XXE) والكيانات المتداخلة للقنابل وهجمات XSS.

نشر Mario Heiderich عرضًا تقديميًا ثاقبًا حول مخاطر الأمان بسبب  حقن المحتوى النشط بملفات SVG . أحد الأمثلة المقدمة هو أن JavaScript تم تضمينه في SVG وتمكن بالفعل من استدعاء Mario على Skype. هذا نوع من المخيف! SecuPress ، مؤلفو مكون إضافي للأمان في وورد بريس ، تطرقوا أيضًا إلى موضوع توخي الحذر عند إضافة SVGs إلى وورد بريس ، وأهمية القيام بذلك بالطريقة الصحيحة.

تستخدم العديد من مكونات SVG الإضافية في المستودع الكود التالي ، والذي يمكّن ببساطة نوع MIME من السماح بتحميل ملفات SVG إلى مكتبة وسائط وورد بريس. هذه ليست الطريقة الآمنة للقيام بذلك! لذلك لا تذهب وتنزيل أول مكون إضافي مجاني من SVG تراه أو تنسخ هذا الرمز وتعتقد أنك على ما يرام.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

الحل هو أن SVGs بحاجة إلى التعقيم . التعقيم هو في الأساس تنظيف الكود أو الإدخال لتجنب مشكلات الأمان (مثل إدخال الكود) وتعارضات الكود والأخطاء. قد يستلزم ذلك أشياء مثل تشفير البيانات ، والتصفية والتحقق من صحة السلاسل ، وما إلى ذلك. وهنا يأتي دور مكتبة Daryll Doyle’s SVG-Sanitizer ، والتي يشير إليها على أنها “محاولته لبناء معقم SVG لائق في PHP.” تحقق من العرض التوضيحي لمطهر SVG الخاص  به لرؤيته أثناء العمل.

المطهر svg

عرض معقم SVG

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

كيفية تمكين دعم وورد بريس SVG بأمان

قام Daryll بتطوير مكون إضافي ، WP SVG (المعروف أيضًا باسم Safe SVG) ، والذي يستخدم مكتبة SVG-Sanitizer عند تحميل صور SVG إلى مكتبة وسائط وورد بريس الخاصة بك. يمكّنك المكون الإضافي أيضًا من عرض SVGs مثل الصور العادية في مكتبة الوسائط.

شعار WP SVG

ملحق WP SVG

يمكنك تنزيل Safe SVG مجانًا من مستودع وورد بريس أو من خلال البحث عنه في لوحة معلومات وورد بريس ضمن الإضافات “إضافة جديدة”. يمكنك النهوض والذهاب ببضع نقرات بسيطة.

معلومات

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

هناك أيضًا إصدار متميز ، متاح على wpsvg.com ، والذي يسمح لك بتقييد بعض المستخدمين من تحميل SVGs وتحسين SVG إضافي. في المثال أدناه ، سنستخدم الإصدار المجاني ببساطة.

كمكوِّن إضافي بديل ، قد ترغب في التحقق من دعم SVG .

لقد تم تمكين GZIP على جميع خوادمنا حتى يكونوا جاهزين للتعامل مع SVG الخاص بك. جرب Kinsta مجانًا .

قبل تحميل ملف SVG ، من المهم أن تفهم أنها تتصرف بشكل مختلف قليلاً عن الصور. عند تصدير SVG من أداة تحرير الصور الخاصة بك ، ستحتاج إلى تصدير النص كمنحنيات (أو إنشاء مخطط تفصيلي) ، وإلا فقد يختلف قليلاً في المتصفحات المختلفة.

تصدير النص كمنحنيات

؛ Affinity Designer – تصدير النص كمنحنيات SVG

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

svg في مكتبة الوسائط

SVG في مكتبة وسائط وورد بريس

سمح لنا هذا بعد ذلك أيضًا باستخدام لوحة تحكم السمة الخاصة بنا لتغيير الشعار في رأس وورد بريس الخاص بنا إلى ملف SVG الخاص بنا. يمكنك أن ترى أدناه أنه يخدم بالفعل ملف .svg. وتبدو جميلة الآن على شاشات شبكية العين.

SVG في رأس وورد

SVG في رأس وورد بريس

هناك تعديل إضافي واحد كان علينا القيام به. في IE9-11 سطح المكتب والهاتف المحمول لا تقوم بتوسيع نطاق ملفات SVG بشكل صحيح حتى الآن. تؤدي إضافة الارتفاع والعرض إلى  إصلاح هذه المشكلة. قد يختلف هذا حسب الموضوع ، ولكن في موقع الاختبار الخاص بنا ، قمنا ببساطة بتعديل ملف header.php الخاص بنا وأضفنا هذه الأبعاد المخصصة. تستخدم بعض سمات وورد بريس CSS لتعديل القياس ، وهو ليس جيدًا لأسباب تتعلق بالأداء ، ولكن بسبب ذلك قد يتطلب منك إضافة كود إضافي لإصلاح مشكلة IE.

رأس معدل لـ SVG

ملف header.php معدل لمشكلة تحجيم SVG IE

وهذا كل شيء! لقد قمت الآن بتمكين دعم وورد بريس SVG بأمان. لم يتم اعتماد هذا المكون الإضافي و / أو الطريقة أو دعمهما بواسطة نواة وورد بريس ، لذلك بالطبع ، استخدمها على مسؤوليتك الخاصة. ومع ذلك ، إذا كنت تقوم بالفعل بتحميل SVGs باستخدام مقتطف من نوع MIME فقط ، فبكل الوسائل ، يرجى القيام بذلك بهذه الطريقة.

أيضًا ، إذا لم تستخدم SVGs من قبل ، فتأكد من تمكين GZIP على خادمك لنوع الملف “image / svg + xml”. سيضمن ذلك ضغطها وتحميلها بأسرع ما يمكن. أحيانًا يقوم مسؤول النظام بتمكين أنواع الملفات القياسية فقط. ملاحظة: تم تمكين GZIP على جميع خوادم Kinsta بالفعل لـ SVGs.

ملخص

تعد SVGs طريقة رائعة لتحسين مظهر موقعك! نوصي باستخدام SVGs و PNG و JPG معًا لتحقيق أفضل أداء ، حيث لن تعمل الصور التفصيلية جيدًا في تنسيق SVG. تعد SVGs رائعة لشعارك ، لضمان ظهوره بشكل مثالي على كل شاشة ، إلى جانب الرموز.

ما رأيك؟ هل استخدمت SVGs حتى الآن على موقع وورد بريس الخاص بك؟

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.