كيفية إنشاء وإدارة SVG Sprites

يفوز SVG بالسباق عندما يتعلق الأمر بالرسومات التي يتم قياسها على الويب. يختار المصممون والمطوّرون SVG بدلاً من خطوط الرموز والصور النقطية والنقرات النقطية.

فوائد استخدام SVG عديدة ولكن بالنسبة لي ، تتلخص في التدرجية.

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

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

لماذا استخدام Sprites على الإطلاق؟

تساعد Sprites على زيادة السرعة والحفاظ على سير عمل التطوير المتسق وجعل إنشاء الرموز أسرع بكثير. عادة ما يتم إنشاء SVG sprites باستخدام أيقونات ذات شكل أو شكل مماثل في حين أن الرسومات ذات الحجم الأكبر هي تطبيقات لمرة واحدة.

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

تصدير كود SVG

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

تحسين SVG للويب

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

إذا كنت تستخدم Sketch على وجه الخصوص ، فيمكنك الاطلاع على SVGO Compressor plugin . أثناء تصدير SVGs ، يعمل المكون الإضافي تلقائيًا على تحسينها قبل حفظ الملف.

إذا كنت لا تستخدم Sketch ، فراجع نفس الوظيفة في شكل التطبيق أو إذا كنت تفضل تطبيقات الويب ، جيك أرشيبالد وضعت واحدة لك .

خلق SVG Sprites يدويا

يمكن إنشاء sprag SVG يدوياً. ستحتاج إلى برنامج تصميم موجه يمكنه إنشاء رمز SVG. لهذا ، سأستفيد من Sketch وتصدير بعض الرموز مثل SVG.

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

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

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

ببساطة بما في ذلك رمز من الرموز لن يكفي في هذه المرحلة. نحن بحاجة للاستفادة من العنصر الذي سيسمح لك بتضمين كود SVG بالإضافة إلى توفير خاصية viewBox الخاصة به والتي تعد مهمة للرموز التي قد تعرض عند عرض وارتفاع مختلف.

العناصر المحددة داخل لا يمكن تقديم العنصر إلى المتصفح إلا عند الإشارة إليه بواسطة جزء.

يشبه النقوش النهائية المقتطف التالي:

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

بما في ذلك أيقونة على الصفحة

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

في صفحتك ، يجب أن ترى الرمز يظهر وهذا كل ما في الأمر!

أتمتة SVG Sprites

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

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

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

بعض الإضافات المتاحة بنكهات مختلفة: نخر-svgstore ، بلع-SVG-العفاريت ، SVG-العفريت .

استنتاج

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