كيفية إضافة ملفات SVG إلى ووردبريس

SVG ، أو Scalable Vector Graphics ، هو تنسيق ملف يسمح بضغط الصور بدون فقدان البيانات وهو مدعوم على نطاق واسع بواسطة متصفحات الويب الحديثة. على الرغم من أن WordPress لا يدعم ملفات SVG في الأصل ، إلا أن هناك عددًا من الحلول التي تسمح لك بإضافتها إلى مكتبة الوسائط الخاصة بك. الطريقة الأكثر شيوعًا لإضافة ملفات SVG إلى WordPress هي استخدام المكون الإضافي Safe SVG. يتيح لك هذا المكون الإضافي تحميل ملفات SVG إلى موقع WordPress الخاص بك وتعقيمها تلقائيًا من أجل الأمان. بمجرد تثبيت المكون الإضافي وتنشيطه ، يمكنك تحميل ملفات SVG إلى مكتبة الوسائط تمامًا مثل أي ملف صورة آخر. هناك خيار آخر لإضافة ملفات SVG إلى WordPress وهو استخدام المكون الإضافي WP Extra File Types. يضيف هذا المكون الإضافي دعمًا لمجموعة متنوعة من أنواع الملفات إلى مكتبة وسائط WordPress ، بما في ذلك SVG. بمجرد التثبيت ، يمكنك تحميل ملفات SVG إلى مكتبة الوسائط تمامًا مثل أي ملف صورة آخر. إذا كنت تريد إضافة ملفات SVG يدويًا إلى موقع WordPress الخاص بك ، فيمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف function.php الخاص بالقالب: function my_theme_add_svg_support ($ mimes) {$ mimes ['svg'] = 'image / svg + xml '؛ إرجاع التمثيل الصامت بالدولار ؛ } add_filter ('upload_mimes'، 'my_theme_add_svg_support') ؛ سيضيف هذا الرمز دعمًا لملفات SVG إلى مكتبة وسائط WordPress. بمجرد الإضافة ، يمكنك تحميل ملفات SVG إلى مكتبة الوسائط تمامًا مثل أي ملف صورة آخر.

يمكن لمواقع WordPress عرض صور ثنائية الأبعاد مع ملفات Scalable Vector Graphics (SVG). ستتمكن من تحسين بعض شعاراتك ورسوماتك الأخرى نتيجة لإعادة تكوين هذا النوع من الملفات. نظرًا لقابليتها للتوسع ، يمكنك ضبط الحجم حسب الحاجة دون التأثير سلبًا على جودة الصورة. نظرًا لأن WordPress لا يوفر دعمًا لـ SVGs خارج الصندوق ، فسيكون من الصعب عليك تضمينها في موقع الويب الخاص بك. بمساعدة مكون إضافي وعملية يدوية ، سنوضح لك كيفية إضافة SVGs إلى موقع الويب الخاص بك. من المستحسن أن يكون للمسؤولين حق الوصول إلى بيانات تحميل SVG فقط. لإضافة المزيد من الأمان ، يمكن أيضًا استخدام عملية التطهير.

في الخطوة 1 ، يجب عليك أولاً تحرير ملف jobs.php الخاص بموقع الويب الخاص بك لتمكين الطريقة التالية للسماح باستخدام SVGs على موقع WordPress الخاص بك. في الخطوة 2 ، ستحتاج إلى إضافة مقتطف رمز إلى ترميز وظيفتك للسماح لموقع الويب الخاص بك بعرض الصور. تسمح لك الخطوة 3 بتعيين موقع WordPress الخاص بك يدويًا لقبول SVGs إذا كنت تفضل التنظيف. الخطوة 1 هي تمكين وتأمين استخدام ملفات SVG لموقعك على الويب. الخطوة الثالثة هي عرض SVGs والتفاعل معها كما تفعل مع أي نوع آخر من ملفات الصور. يمكن أن تساعدك هذه الخطوات في مراقبة أمان هذه الملفات.

يمكنك استخدام العلامة [svg] / svg [/ html] لإضافة الصور إلى ملفات HTML. يمكن إنجاز هذه الخطوة عن طريق فتح صورة SVG في كود VS أو IDE المفضل لديك ، ونسخ الكود ، ووضعه داخل عنصر النص في مستند HTML الخاص بك. يوضح العرض التوضيحي أدناه ما يحدث عند اتخاذ خيارات تصميم معينة.

كود PHP لدعم SVG في صورة مصغرة لـ WordPress هو 100٪ من العرض. ارتفاع الإكمال التلقائي. يمكن أيضًا إدخال رمز PHP من خلال البرنامج المساعد لإدارة التعليمات البرمجية مثل Code Snippets ؛ أ) مهم ؛ ب) add_action ('admin_head'، 'fix_svg')؛ ج) add_color ('افتراضي

هناك العديد من المكونات الإضافية المجانية لـ jQuery SVG ، بما في ذلك Raphael-Vector Graphics و Touch و Zoom و jQuery inline و iSVG و Silverlight path Animation.

متى يجب ألا تستخدم Svg؟

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

إنه الشكل الأكثر شيوعًا لرسومات الويب ، وفقًا للخبراء. الصور المتجهة ، على عكس الصور القياسية ، لا تفقد الجودة عند تغيير حجمها أو تقليصها في المتصفح. قد تتطلب تنسيقات الصور الأخرى أيضًا أصولًا / بيانات إضافية لحل المشكلات بناءً على الدقة ، اعتمادًا على جهازك. في W3C ، يتم تصنيف الملف إلى ثلاثة أنواع: SVG ،. NET و. NETX. يدعمها كل من CSS و JavaScript و CSS و HTML ، بالإضافة إلى اللغات والتقنيات القياسية المفتوحة الأخرى.

نظرًا لصغر حجمها ، فإن صور SVG أصغر بكثير من التنسيقات الأخرى. يمكن أن يصل وزن رسم PNG إلى 50 ضعف حجم ملف. رسم VG. يتكون SVG من XML و CSS ، مما يعني أنه لا يتطلب صورة من الخادم. تعد الرسومات ذات العناصر ثنائية وثلاثية الأبعاد فعالة للغاية في التنسيق ، لكن الصور الأقل تفصيلاً لا تفعل ذلك. لا شك أنه يمكن استخدامه في المتصفحات الحديثة ، لكنه قد لا يعمل على الإصدارات القديمة من IE.

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

هل يجب علي استخدام Svgs في موقع الويب الخاص بي؟

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

بابوا نيو غينيا مقابل. Svg: ما تنسيق الصورة الأفضل للويب؟

يعد كل من PNG و .VNG تنسيقات صور ممتازة للاستخدام على الويب ، لكن لهما بعض الخصائص المميزة. ستبدو الصور والأيقونات والرسومات التي يمكن أن تكون متوافقة بسهولة مع PNG رائعة. هو الأنسب للصور ذات الجودة العالية ويمكن تغيير حجمها إلى أي حجم. يستخدم JPEG ، كتنسيق صورة نقطية ، خوارزمية ضغط مع فقد البيانات ، مما قد يؤدي إلى فقد البيانات.

هل يجب علي استخدام Svg للصور؟

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

JPEGs مقابل. Pngs: ما هو الفرق؟

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

كيف يمكنني تضمين ملف Svg؟

لتضمين ملف SVG ، ستحتاج إلى استخدام الامتداد بطاقة شعار. تسمح لك هذه العلامة بتضمين ملف في مستند HTML. ال العلامة لها سمتان ، src والنوع. يتم استخدام السمة src لتحديد عنوان URL للملف المراد تضمينه. يتم استخدام سمة النوع لتحديد نوع الملف المراد تضمينه. يمكن تعيين سمة النوع على "image / svg + xml" لملف SVG.

ما الذي يجب أن نستخدمه مع أحدث المستعرضات والتحديثات التقنية ، هل ما زلنا بحاجة إلى علامة <object>؟ ما هي إيجابيات وسلبيات كل منها؟ ضع علامة على الخطوط التي تريدها وقم بتضمينها باستخدام علامة Nano. باستخدام الضغط الثابت و Brotli ، يمكنك ضغط SVG. نظرًا لوجود العديد من الصور على مواقع الويب الخاصة بنا ، فستكون هناك مشكلات في العرض يصعب اكتشافها. نتيجة لذلك ، كنتيجة لطريقتنا المضمنة ، ستتمكن محركات البحث من عرض صورنا. أفضل وأبسط طريقة لتضمين SVG هي استخدام علامة> img>.

إذا كنت تحتاج إلى تفاعل في ملفات الصور الخاصة بك ، فإن استخدام علامة "> كائن" يعد خيارًا جيدًا. ما لم تقم بتخزين صورك مؤقتًا ، فإن استخدام علامة * img * بدلاً من التراجع سيؤدي إلى تحميل مزدوج. نظرًا لأن SVG هو أساسًا DOM ، يمكنك إدارة التبعيات باستخدام CSS الخارجية والخطوط والبرامج النصية. يمكن الاحتفاظ بصور ScalableVGL باستخدام علامات الكائنات لأن المعرفات والفئات لا تزال مخزنة في الملف. في التضمين المضمن ، ستحتاج إلى التأكد من أن جميع المعرفات والفئات لها معرّفات وفئات فريدة. الاستثناء الوحيد هو إذا طلبت تغييرات ديناميكية على SVG نتيجة لتفاعلات المستخدم. هناك حالات قليلة يُوصى فيها باستخدام SVG المضمّن ، باستثناء تحميل الصفحات. سيو يعاني نتيجة الإطارات التي لا يتم فهرستها بواسطة محركات البحث ويصعب صيانتها.

svg aria- الموصوفة بواسطة SVGMyTitle المثال التالي هو ملف SVG بسيط. الشيء الوحيد المفقود هو علامة svg . من المسلم به أنه سيتم إضافة * العنوان * تلقائيًا إلى حسابك.

كيفية تضمين ملف Svg في Html

لتضمين عنصر img> ، فقط تأكد من الرجوع إليه في سمة HTML كالمعتاد. إذا لم يكن لديك SVG نسبة عرض إلى ارتفاع محددة ، فستحتاج إلى سمة ارتفاع أو عرض. إذا لم تكن قد قمت بذلك بالفعل ، فانتقل إلى جانب HTML من الصفحة واكتب الصور. هل يمكنك تضمين svg مباشرة في html؟ عندما تقوم بتضمين عناصر SVG مباشرة في صفحات HTML ، يمكنك تقليل وقت عرض الصفحة. يتم الحصول على أفضل النتائج باستخدام عنصر * img> مع تعيين السمة src على عنوان URL المطلق أو النسبي لملف SVG. عند استخدام عنصر img> في مستند أكبر ، فمن الأفضل تضمين ارتباط إلى ملف SVG بالحجم الكامل في توصيفك. لماذا لا تظهر issvg؟ عندما تحاول استخدام SVG ، مثل * img src = ”image.svg”> ، أو صور خلفية CSS ، وكان الملف مرتبطًا بشكل صحيح ويبدو أنه صحيح ، فلن يعرضه المتصفح ، وقد يكون ذلك بسبب قضايا الخادم. تحقق لمعرفة ما إذا كان يتم تقديم الملف بشكل صحيح عن طريق التحقق من نوع MIME.

دعم Svg

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

في WordPress ، يمكنك الاختيار من بين مجموعة متنوعة من تنسيقات الصور ، بما في ذلك JPG و PNG و GIF. توجد طرق لتعديل ملفات Vector Graphics (SVG) لتجنب هذه المشكلة ، ولكنها ليست أكثر أنواع الملفات أمانًا. منذ عام 1999 ، كان نوع الملف مفتوحًا بشكل قياسي ويمثل 19 من كل 20 موقعًا. عندما يتعلق الأمر بالرسومات المتجهة (SVG) ، فإن البيكسلات هي التي تشكل الرسومات. تستهلك هذه الخوادم مساحة أقل على موقع الويب الخاص بك ، مما يؤدي إلى وقت تحميل أسرع. فهي ليست دائمًا سهلة الاستخدام ، كما هو الحال عند إنشاء تفاصيل معقدة وعند استخدامها في التصميم. نظرًا لأنها ملفات XML ، يمكن اختراقها بواسطة البرامج الضارة.

يحتوي WordPress على عدد كبير من مقتطفات التعليمات البرمجية التي تسمح لك بإضافة دعم SVG إليها. للتأكد من أن كلمة واحدة على موقع الويب الخاص بك لا تضر بأمان موقعك ، انسخها والصقها فقط إذا كنت متأكدًا من أنها لن تفعل الشيء نفسه. من المعروف أن الترميز صعب ، ولكن هناك دروس عبر الإنترنت لتعلم كيفية تعقيم الكود. تتوفر العديد من المكونات الإضافية في دليل WordPress والتي تتيح لك استخدام ملفات SVG الآمنة على موقع الويب الخاص بك. سنستخدم مكتبة sVGSafe ، وهي مكتبة معقمات SVG ، لتحميل الصور لهذا البرنامج التعليمي. في WordPress ، يتطلب نظام إدارة المحتوى منهم تضمين علامة الكلمة <xml>. عندما تفتح ملف jobs.html الخاص بالثيم الخاص بك وتدخل الرمز التالي: ، ستتمكن من استخدام هذا النوع من الملفات على موقع الويب الخاص بك.

اسمح لـ WordPress بدعم SVG من خلال تكوين دعمه يدويًا. لم يتم تعقيم الملفات نتيجة لنقص التعقيم ، لذا فإنك تخاطر بحدوث مشكلات أمنية. لتنفيذ حل يدوي ، يجب أيضًا تعقيم أي ملفات تم تحميلها على موقعك. يعد SVG-Sanitizer ، الذي طوره نفس الشخص الذي أنشأ المكون الإضافي الذي استخدمناه أعلاه ، مكانًا جيدًا للبدء. إذا كنت تستخدم ضغط Gzip لتسريع موقع الويب الخاص بك ، فتأكد من تضمين نوع ملف image / svg XML . يمكنك الآن البدء في استخدام SVGs على موقع WordPress الخاص بك. الشيء الوحيد الذي يجب عليك فعله هو التأكد من أنه يتم بطريقة آمنة ومسؤولة. تتعرض سلامة وجودك على الويب للخطر إذا كنت تستخدم رمزًا أو شعارًا.

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

متصفحات الويب ودعم Svg

يدعم كل من Internet Explorer 9 و 10 الآن Silverlight بالكامل. في الإصدارات 3-59 ، يوجد مكون دعم جزئي لـ SVG ، بينما في الإصدارات 60 وما بعده ، يوجد دعم كامل لـ SVG. في Opera ، يمكنك دعم جزء صغير من SVG.