دعم SVG: كيفية إضافة رسومات موجهة قابلة للتطوير إلى رأس WordPress الخاص بك

إذا كنت تبحث عن إضافة ملف SVG إلى رأس WordPress الخاص بك ، فيمكنك القيام بذلك باستخدام مكون إضافي مثل دعم SVG. بمجرد التثبيت والتفعيل ، ما عليك سوى الانتقال إلى صفحة الإعدادات> دعم SVG وتحميل ملف SVG الخاص بك. يمكنك بعد ذلك استخدام الرمز القصير [svg] لإدراج ملف SVG أينما تريد على موقعك.

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

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

يسمح لنا استخدام معرّف الموارد المنتظم للبيانات في CSS باستخدام SVG ، ولكن في المتصفحات القائمة على webkit ، يجب علينا ترميزه. سيكون قابلاً للتطبيق في كل مكان إذا قمت بترميز SVG باستخدام encodeURIComponent (). يجب أن يحتوي XPath على السمة التالية: xmlns = 'http: // //www.w3.org/2000/svg'.

كيف أقوم بإضافة ملفات Svg إلى WordPress؟

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

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

لتكوين المكون الإضافي ، انتقل إلى الإعدادات - / Users / Shared / Plugins وانقر على صفحة دعم SVG. يمكنك تقييد المسؤولين عن طريق تحديد "تقييد للمسؤولين" من قائمة الإعدادات. لا توجد طريقة لمدير الموقع لتحميل SVGs في WordPress. يجعل المكون الإضافي SafeSVG من السهل إضافة ملفات SVG وتعديلها في WordPress. يعمل المكون الإضافي بالشكل المتوقع لأنه لا توجد إعدادات مطلوبة لتكوينه. على الرغم من أن هذا المكون الإضافي يمكّن جميع مستخدمي موقع WordPress من التحميلات ، إلا أنه يفعل ذلك على حساب القائم بالتحميل. يوصى بشراء إصدار متميز من المكون الإضافي.

يمكن العثور على مجموعة متنوعة من ملحقات SVG المجانية والاحترافية للمساعدة في إنشاء رسومات أكثر كفاءة. إذا كنت جديدًا على SVG ، فسيكون تعلم كيفية استخدامه أسهل ؛ يمكنك معرفة المزيد عنها من خلال مشاهدة البرامج التعليمية المجانية عبر الإنترنت في SVG Dev Tips and Tricks ، أو تعلم الدورة التدريبية المجانية عبر الإنترنت على Lynda.com ، أو قراءة كتاب Jonathan Snook المجاني عبر الإنترنت Learning SVG: لست بحاجة إلى أي برنامج إضافي لاستخدام SVG في مشروع الويب الخاص بك. ستحتاج إلى متصفح ويب ، وبعض المعرفة بـ HTML و CSS ، وبعض الصبر للبدء. يمكن أيضًا استخدام بعض ملحقات SVG المجانية من مكتبة jQuery.

كيف يمكنني تمكين ملفات Svg في WordPress؟

في محرر المنشورات ، يمكنك تحميل SVG بالإضافة إلى أي ملف صورة آخر. من السهل إضافة كتلة صورة إلى المحرر ثم تحميل ملف SVG. ملفات HTML ، بالإضافة إلى ملفات SVG المضمنة ، متاحة الآن للتحميل والتحرير في WordPress.

لماذا يجب عليك استخدام Svg للرسومات المتجهة

استخدام تنسيق الرسم المتجه بسيط ؛ يمكن عمل الشعارات والأيقونات والرسومات المسطحة الأخرى باستخدام ألوان وأشكال بسيطة. نظرًا لأنه يعتمد على المتجهات ، فهو غير قادر على العمل مع الصور التي تحتوي على الكثير من التفاصيل الدقيقة والقوام مثل تلك الموجودة في الصور الفوتوغرافية. إنه مثالي للشعارات والأيقونات والرسومات المسطحة الأخرى التي تستخدم أشكالًا وألوانًا بسيطة. يجب عليك إجراء الاختبار قبل تثبيت SVG للتأكد من أن المتصفحات القديمة تعمل معها بشكل صحيح. Raphael-Vector Graphics هو ملحق jQuery SVG مجاني . باستخدام هذا المكون الإضافي ، يمكنك إضافة رسومات متجهة بسرعة وسهولة إلى صفحات الويب الخاصة بك. يمكنك أيضًا استخدام ملحقات SVG الممكّنة للتكبير واللمس لتحريك الرسومات وتكبيرها بسهولة. من خلال jQuery المضمن ، يمكنك استخدام رسومات HTML التي تم إنشاؤها مباشرةً بواسطة HTML. إنه امتداد للمكوِّن الإضافي iSVG الذي يسمح لك بتحويل ملفات SVG إلى كائنات JavaScript. يمكنك تحريك مسارات SVG بسهولة باستخدام المكون الإضافي for.V. مسار الرسوم المتحركة.

كيف يمكنني تضمين ملف Svg في موقع الويب الخاص بي؟

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

Svg هو مستقبل رسومات الويب

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

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

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

الطريقة الأكثر شيوعًا لإنشاء رسومات على الويب هي استخدام Scalable Vector Graphics (SVG). عندما يتم تغيير حجم الصورة أو تقليصها ديناميكيًا في المستعرض ، فإنها تظل متجهة ، وتظل الجودة كما هي. في بعض تنسيقات الصور ، قد تكون هناك حاجة إلى أصول / بيانات إضافية لحل المشكلات. تنسيق ملف SVG هو تنسيق ملف قياسي W3C. وهو متوافق مع مجموعة متنوعة من اللغات والتقنيات القياسية المفتوحة ، بما في ذلك HTML و CSS و JavaScript. صور SVG صغيرة الحجم جدًا عند مقارنتها بالتنسيقات الأخرى. يمكن أن تزن رسومات PNG ما يصل إلى 50 ضعف وزن رسم sva.

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

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

فوائد استخدام Svgs للحصول على صور عالية الدقة

هل svgs جيد للصور عالية الدقة؟
يمكنك استخدام صور عالية الدقة مع sva. لا داعي للقلق بشأن شغل مساحة كبيرة على موقع الويب الخاص بك لأنها خفيفة الوزن. بالإضافة إلى ذلك ، تبدو رائعة بأي حجم ويمكن استخدامها مع الصور من أي حجم.