6 فشل SVG شائع (وكيفية إصلاحه)

سألني شخص ما مؤخرًا كيف أتعامل مع تصحيح أخطاء SVGs المضمنة. نظرًا لأنه جزء من DOM ، يمكننا فحص أي SVG مضمّن في أي متصفح DevTools. وبسبب ذلك ، لدينا القدرة على تحديد نطاق الأشياء وكشف أي مشكلات أو فرص محتملة لتحسين SVG.

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

1. ال viewBox القيم

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

العناصر موجودة عندما يتم قصها - إنها فقط في جزء من نظام الإحداثيات لا نراه. إذا أردنا فتح الملف في بعض برامج تحرير الرسومات ، فقد يبدو كالتالي:

أسهل طريقة لإصلاح هذا؟ يضيف overflow="visible" إلى SVG ، سواء كان ذلك في ورقة الأنماط الخاصة بنا ، أو المضمنة في ملف style أو مباشرة كسمة عرض SVG. ولكن إذا طبقنا أيضًا أ background-color إلى SVG أو إذا كان لدينا عناصر أخرى حوله ، فقد تبدو الأشياء متوقفة قليلاً. في هذه الحالة ، سيكون الخيار الأفضل هو تحرير ملف viewBox لإظهار ذلك الجزء من نظام الإحداثيات الذي كان مخفيًا:

هناك بعض الأشياء الإضافية حول viewBox تستحق التغطية أثناء تناولنا للموضوع:

كيف يمكن لل viewBox العمل؟

SVG عبارة عن لوحة غير محدودة ، ولكن يمكننا التحكم في ما نراه وكيف نراه من خلال منفذ العرض و viewBox.

• العرض هو إطار نافذة على القماش اللانهائي. يتم تحديد أبعادها بواسطة width و height سمات ، أو في CSS مع ما يقابلها width و height الخصائص. يمكننا تحديد أي وحدة طول نريدها ، ولكن إذا قدمنا ​​أرقامًا بدون وحدات ، فسيتم تعيينها افتراضيًا على وحدات البكسل.

• viewBox يتم تعريفه بأربع قيم. أول نقطتين هما نقطة البداية في الزاوية العلوية اليسرى (x و y القيم والأرقام السالبة مسموح بها). أنا أقوم بتحريرها لإعادة صياغة الصورة. الأخيران هما عرض وارتفاع نظام الإحداثيات داخل منفذ العرض - وهذا هو المكان الذي يمكننا فيه تعديل مقياس الشبكة (الذي سندخل إليه في القسم الموجود على التكبير).

إليك ترميز مبسط يوضح SVG viewBox و width و height على حد سواء تعيين السمات على <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

إعادة الصياغة

إذا هذا:

<svg viewBox="0 0 700 700">

... خرائط لهذا:

<svg viewBox="start-x-axis start-y-axis width height">

يبدأ منفذ العرض الذي نراه من حيث 0 على المحور السيني و 0 على المحور ص.

بتغيير هذا:

<svg viewBox="0 0 700 700">

…الى هذا:

<svg viewBox="300 200 700 700">

... يظل العرض والارتفاع كما هو (700 كل وحدة) ، ولكن بداية نظام الإحداثيات الآن في 300 أشر على المحور السيني و 200 على المحور ص.

في الفيديو التالي أقوم بإضافة اللون الأحمر <circle> إلى SVG مع مركزه في 300 أشر على المحور السيني و 200 على المحور ص. لاحظ كيف يتم تغيير ملف viewBox تؤدي الإحداثيات إلى نفس القيم أيضًا إلى تغيير موضع الدائرة إلى الزاوية العلوية اليسرى من الإطار بينما يظل الحجم الذي يتم تجسيده لـ SVG كما هو (700×700). كل ما فعلته هو "إعادة صياغة" الأشياء باستخدام viewBox.

التكبير

يمكننا تغيير آخر قيمتين داخل viewBox لتكبير الصورة أو تصغيرها. كلما كانت القيم أكبر ، تمت إضافة المزيد من وحدات SVG لتلائم منفذ العرض ، مما ينتج عنه صورة أصغر. إذا أردنا الاحتفاظ بنسبة 1: 1 ، لدينا viewBox يجب أن يتطابق العرض والارتفاع مع قيم عرض منفذ العرض والارتفاع.

دعونا نرى ما يحدث في Illustrator عندما نغير هذه المعلمات. لوح الرسم هو viewport والذي يمثله مربع أبيض 700 بكسل. كل شيء آخر خارج هذه المنطقة هو لوحة SVG اللانهائية الخاصة بنا ويتم قصها افتراضيًا.

يوضح الشكل 1 أدناه نقطة زرقاء عند 900 على طول المحور السيني و 900 على طول المحور ص. إذا قمت بتغيير الأخيرين viewBox قيم من 700 إلى 900 مثله:

<svg viewBox="300 200 900 900" width="700" height="700">

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

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

2. مفقود width و height

الشيء الشائع الآخر الذي أراه عند تصحيح أخطاء SVG المضمّن هو ما إذا كانت العلامات تحتوي على الامتداد width or height صفات. هذه ليست مشكلة كبيرة في كثير من الحالات ما لم يكن SVG داخل حاوية ذات وضع مطلق أو حاوية مرنة (حيث يحسب Safari SVG width قيمة مع 0px بدلا من auto). ازالة width or height في هذه الحالات يمنعنا من رؤية الصورة كاملة كما نرى فتح هذا العرض CodePen ومقارنتها في Chrome و Safari و Firefox (انقر فوق الصور لعرض أكبر).

الحل؟ أضف عرضًا أو ارتفاعًا ، سواء كسمة عرض أو مضمنة في سمة النمط أو في CSS. تجنب استخدام الارتفاع في حد ذاته ، لا سيما عند ضبطه على 100% or auto. حل آخر هو ضبط الحق و  القيم اليسرى.

يمكنك اللعب مع القلم التالي واجمع بين الخيارات المختلفة.

3. غير مقصود fill و stroke الألوان

قد يكون أيضًا أننا نطبق اللون على <svg> علامة ، سواء كان نمطًا مضمنًا أو قادمًا من CSS. لا بأس بذلك ، ولكن قد تكون هناك قيم ألوان أخرى في جميع أنحاء العلامة أو الأنماط التي تتعارض مع مجموعة الألوان في ملف <svg>، مما يتسبب في أن تكون الأجزاء غير مرئية.

لهذا السبب أميل إلى البحث عن ملف fill و stroke السمات في ترميز SVG ومحوها. يُظهر الفيديو التالي SVG I على غرار CSS باللون الأحمر fill. هناك بضع حالات يتم فيها ملء أجزاء SVG باللون الأبيض مباشرةً في العلامات التي أزلتها للكشف عن الأجزاء المفقودة.

4. معرفات مفقودة

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

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

في ملفات SVG الكبيرة ، قد نجد صعوبة في العثور على تلك المعرفات. هذا هو الوقت المناسب لفتح DevTools ، وفحص ذلك الجزء من الرسم الذي لا يعمل ، ومعرفة ما إذا كانت هذه المعرفات لا تزال متطابقة.

لذلك ، أود أن أقول أنه من المفيد فتح ملف SVG مُصدَّر في محرر التعليمات البرمجية ومقارنته بالملف الأصلي قبل تبديل الأشياء. تعتبر التطبيقات مثل Illustrator و Figma و Sketch ذكية ، لكن هذا لا يعني أننا لسنا مسؤولين عن فحصها.

5. قائمة تدقيق للقص والإخفاء

إذا تم قطع SVG بشكل غير متوقع وكان ملف viewBox الشيكات ما يرام ، وعادة ما ألقي نظرة على CSS ل clip-path or mask الخصائص التي قد تتداخل مع الصورة. من المغري الاستمرار في النظر إلى العلامات المضمنة ، ولكن من الجيد أن تتذكر أن تصميم SVG قد يحدث في مكان آخر.

قص وإخفاء CSS تسمح لنا "بإخفاء" أجزاء من صورة أو عنصر. في SVG ، <clipPath> هي عملية متجهية تقطع أجزاء من الصورة بدون نتائج في منتصف الطريق. ال <mask> العلامة هي عملية بكسل تسمح بالشفافية وتأثيرات شبه الشفافية والحواف غير الواضحة.

هذه قائمة تحقق صغيرة لحالات تصحيح الأخطاء التي تتضمن القص والإخفاء:

• تأكد من تداخل مسار القطع (أو القناع) والرسم مع بعضهما البعض. يتم عرض الأجزاء المتداخلة.
• إذا كان لديك مسار معقد لا يتقاطع مع الرسم الخاص بك ، فحاول تطبيق التحويلات حتى تتطابق.
• لا يزال بإمكانك فحص الكود الداخلي باستخدام DevTools على الرغم من أن ملف <clipPath> or <mask> لا يتم تقديمها ، لذا استخدمها!
• انسخ الترميز بالداخل <clipPath> و <mask> ولصقه قبل إغلاق ملف </svg> بطاقة شعار. ثم أضف fill لتلك الأشكال وتحقق من إحداثيات SVG وأبعادها. إذا كنت لا تزال لا ترى الصورة ، فحاول الإضافة overflow="hidden" إلى <svg> العلامة.
• تحقق من أن أ فريد من نوعه المعرف يستخدم ل <clipPath> or <mask>، وأن نفس المعرف يتم تطبيقه على الأشكال أو مجموعة الأشكال التي يتم قصها أو تقنيعها. المعرف غير المتطابق سيؤدي إلى كسر المظهر.
• تحقق من وجود أخطاء إملائية في الترميز بين ملفات <clipPath> or <mask> العلامات.
• fill, stroke, opacity، أو بعض الأنماط الأخرى المطبقة على العناصر الموجودة بالداخل <clipPath> غير مجدية - الجزء المفيد الوحيد هو هندسة منطقة التعبئة لتلك العناصر. لهذا السبب إذا كنت تستخدم ملف <polyline> سوف تتصرف مثل ملف <polygon> وإذا كنت تستخدم ملف <line> لن ترى أي تأثير لقطة.
• إذا كنت لا ترى صورتك بعد تطبيق ملف <mask>، تأكد من أن fill محتوى التقنيع ليس أسود بالكامل. يحدد نصوع عنصر التقنيع عتامة الرسم النهائي. ستتمكن من رؤية الأجزاء الأكثر إشراقًا ، وستخفي الأجزاء الداكنة محتوى صورتك.

يمكنك اللعب بالعناصر المقنعة والمقصومة بتنسيق هذا القلم.

6. مساحات الأسماء

هل تعلم أن SVG هي لغة ترميز قائمة على XML؟ حسنا هي كذلك! تم تعيين مساحة الاسم الخاصة بـ SVG على ملف xmlns صفة، عزا:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

هناك الكثير لمعرفته حول المسافات في XML و MDN لديه كتاب تمهيدي رائع عليه. يكفي القول ، أن مساحة الاسم توفر سياقًا للمتصفح ، تخبره أن الترميز خاص بـ SVG. الفكرة هي أن مساحات الأسماء تساعد في منع التعارضات عندما يكون هناك أكثر من نوع واحد من XML في نفس الملف ، مثل SVG و XHTML. هذه مشكلة أقل شيوعًا في المتصفحات الحديثة ولكنها قد تساعد في شرح مشكلات عرض SVG في المتصفحات أو المتصفحات القديمة مثل Gecko والتي تكون صارمة عند تحديد أنواع العقيدة ومساحات الأسماء.

مواصفات SVG 2 لا يتطلب تباعد الأسماء عند استخدام صيغة HTML. لكن إنه أمر بالغ الأهمية إذا كان دعم المتصفحات القديمة يمثل أولوية - بالإضافة إلى أنه لا يضر بأي شيء إضافته. بهذه الطريقة ، عندما <html> عناصر xmlns السمة المحددة ، فلن تتعارض في تلك الحالات النادرة.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

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

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

عندما نزيل مساحة الاسم داخل SVG في خاصية الخلفية ، تختفي الصورة:

بادئة أخرى شائعة لمساحة الاسم هي xlink:href. نستخدمه كثيرًا عند الإشارة إلى أجزاء أخرى من SVG مثل: الأنماط أو المرشحات أو الرسوم المتحركة أو التدرجات. التوصية هي البدء في استبدالها بـ href حيث يتم إهمال الآخر منذ SVG 2 ، ولكن قد تكون هناك مشكلات في التوافق مع المتصفحات القديمة. في هذه الحالة ، يمكننا استخدام كليهما. فقط تذكر تضمين مساحة الاسم xmlns:xlink="http://www.w3.org/1999/xlink" إذا كنت لا تزال تستخدم xlink:href.

ارفع مستوى مهاراتك في SVG!

آمل أن تساعدك هذه النصائح في توفير الكثير من الوقت إذا وجدت نفسك تحرّي الخلل وإصلاحه بشكل غير صحيح في SVGs المضمنة. هذه فقط الأشياء التي أبحث عنها. ربما لديك أعلام حمراء مختلفة تراقبها - إذا كان الأمر كذلك ، أخبرني في التعليقات!

خلاصة القول هي أنه من المفيد أن يكون لديك على الأقل فهم أساسي لـ الطرق المختلفة التي يمكن بها استخدام SVG. تحديات CodePen غالبًا ما تدمج SVG وتقدم ممارسات جيدة. إليك بعض الموارد الأخرى للارتقاء بالمستوى:

هناك عدد قليل من الأشخاص أقترح اتباعهم من أجل الخير المتعلق بـ SVG:

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/