Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Web Design
  2. SVG

نصيحة سريعة: عدد صغير من العقد = ملف SVG أخف

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by Rachid Sakara (you can also view the original English article)

في الآونة الأخيرة ، تبين لي أني أمضي الكثير من الوقت على موقع snap.svg (ألق نظرة إذا لم تكن قد استخدمه بنفسك حتى الآن). يتوفر الموقع حقا على خلفية مضلعة رائعة لصورة بصيغة SVG على رأس الصفحة ، والتي تزن حوالي 2.2 كيلوبايت. ولأنني غريب شيئا ما ، قررت أن أحاول جعلها أصغر.

في برنامج Illustrator

هكذا يجب أن يبدو لك ملف SVG حالما يتم فتحه في Illustrator:

بعدها إذا قمت بفحص عرض المخطط التفصيلي عن طريق (View > Outline) سترى جميع مسارات المتجهة المنصوص عليها بألوان التعبئة:

"يا لها من فوضى!" اعتقدت "كنت متأكد من أنه يمكن أن يتم ترتيب ذلك الأمر والتقليل من حجم الملف." لذلك ذهبت حول تنظيف الخطوط لإزالة جميع overlapping المتواجدة بشكل أكثر من اللازم.

الحيرة

باستخدام أداة Pathfinder ، يمكنك استخدام المجسمات  لقطع الأشكال الأخرة المتواجدة تحتها. وبهذه الطريقة ، يمكنك تجنب وجود أي شكل من أشكال اللف (over-lapping) ، بدلا من إنشاء المزيد من تأثيرات "الأحاجي".

from this
من هذا الشكل..
to this
 إلى هذا الشكل

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

كنت مخطئا

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

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

إليك كيف يبدو الكود الخاصة بها، أول واحد من النسخ الأصلية:

و الأن واحد من الأشكال التي قمت "بتحسينها":

مزيد من البيانات. كما ذلك سهل.

قم بتنظيف العقد

يستفاد من هذا الأمر أي في إزالة أي عقدة غير مرغوب فيها من ملفات SVG ، ولكن قبل ذلك لا تقلق بشأن اللف . من جهة أخرى Shedding nodes هي الطريقة الأولى لتقليل التعقيد وبالتالي حجم الملف.

استخدم أداة (-) Delete Anchor Point لإزالة نقطة الإرتساء من على مسار. سوف تتفاجأ كيف أن عدد قليل من المراسي يحتاج إلى مسار ناقلات في حين لا يزال يحتفظ شكله! مرسات واحدة موضوعة بشكل جيد ستؤدي مهمة ثلاثة من تلك الأفكار الغير الجيدة.

النقاط الضالة (Stray Points)

نصيحة واحدة أخيرة هي إزالة النقاط الضالة من ملف SVG الخاص بك. غالبا ما تكون النقاط الضالة غير مرئية لأنه لا يمكن ملؤها ، ولكنها ستكلف بياناتك بنفس الشاكلة. في برنامج Illustrator ، انتقل مباشرة إلى Select> Object> Stray Points لتحديد الكل ، ثم اضغط بعدها على delete لإزالتها.

نقاط مرساة ضالة ومزعجة

أرجو أن تكون قد تتعلم شيئا من هذه النصيحة السريعة! كل ما في الأمر أنها واحدة من تلك الأشياء الواضحة التي لم أفكر بها من قبل. هل فكرت فيها؟

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.