واجهات المستخدم

كيفية تحويل الأيقونة إلى متجهات

6 دقائق قراءة · نشر في 2 أغسطس 2026 · حُدث في 2 أكتوبر 2026

الأيقونة تعيش في كل الأحجام في آن واحد. الملف نفسه عنصر بحجم 16 بكسل في قائمة، وزر بحجم 24 بكسل، وأيقونة تطبيق بحجم 512 بكسل، وأحيانًا ملصق. لا يتحقق ذلك إلا عندما تكون الهندسة تحته صادقة: عقد قليلة، ومسارات مغلقة، ولا هالة متبقية عن تنعيم حواف الصورة النقطية الأصلية مهما كانت صيغتها.

لذلك فتحويل الأيقونة إلى متجهات يتعلق أقل بالتحويل نفسه وأكثر بما يُطعم به المحرك وما يُنقّح بعده. وهذا الدليل يغطي الاثنين معًا.

الانطلاق من أكبر صورة نقطية متوفرة ثم تسطيحها

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

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

الحكم على النتيجة بعدد العقد لا بمظهرها عند تكبير 100%

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

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

المحاذاة إلى شبكة البكسل بعد التحويل لا قبله

لمجموعات الأيقونات شبكة، عادة 24×24 بهامش أمان بكسلين، أو 16×16 للواجهات الكثيفة. المسار المتتبع يهبط حيث كانت البكسلات، وهو قريب من تلك الشبكة لكنه ليس عليها، وعند أحجام العرض الصغيرة يعني «القريب» أن أيقونة واحدة في الصف تبدو أثقل بنصف بكسل من جيراتها.

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

سماكة واحدة، وأسلوب واحد، وملف واحد

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

التحويل الدفعي يبدأ من خطة Pro التي تقبل 30 ملفًا في المرة. قبل ذلك تُحوَّل الملفات واحدًا تلو الآخر، وهو بالنسبة لمجموعة من عشرين أمر نقرات يمضي في دقائق لا عقبة تمنع التقدم.

خطوة بخطوة

  1. 01

    احصل على أكبر نسخة نقطية

    512 بكسل أو أكثر إن وُجدت. المصدر بحجم 32 بكسل معظمه تنعيم حواف، وتنعيم الحواف هو ما يخطئ فيه محرك التحويل.

  2. 02

    سطّح إلى لون واحد

    أزل الظلال الساقطة والتوهجات الداخلية والتدرجات قبل التحويل. كل واحد منها يصبح أشكالًا زائدة في الناتج.

  3. 03

    حوّل إلى SVG

    ارفع ونزّل النتيجة. صيغة SVG هي التنسيق الأصلي لأيقونات الويب والتطبيقات على حد سواء.

  4. 04

    افحص عدد العقد

    افتح المسار في المحرر. الشكل البسيط ينبغي أن يحمل حفنة نقاط لا عشرات. إن كانت عشرات، فالمصدر كان يحمل ضجيجًا.

  5. 05

    اضبط المحاذاة على شبكة الأيقونات

    حاذِ المسارات إلى إحداثيات صحيحة واجعل viewBox على حجم الشبكة، كي تُعرض الأيقونة بحدة عند 16 و24 بكسل.

مشكلات شائعة

تبدو الأيقونة ضبابية عند 16 بكسل رغم أنها متجه
مساراتها غير محاذاة إلى شبكة البكسل، فيطبّق العارض تنعيم الحواف على كل حافة. اضبط الإحداثيات على أعداد صحيحة واجعل viewBox يطابق الشبكة المعتمدة.
عاد شكل بسيط بعشرات العقد
كان المصدر يحمل تنعيم حواف أو ضجيج JPEG قرأه المحرك بوصفه تفاصيل. استخدم مصدرًا أكبر وأنظف؛ وفي Lite وما فوق اخفض مستوى التفاصيل.
زوايا مستديرة كان ينبغي أن تكون حادة
التنعيم مضبوط مرتفعًا أكثر من اللازم. في Lite وما فوق خفّضه درجة؛ الزوايا الحقيقية تبقى حادة حتى مستوى Strong، وMaximum وحده يُدوّر كل شيء.
تحيط بالأيقونة حافة باهتة بلون مختلف
تلك هالة تنعيم الحواف في الأصل، تُتبعت شكلًا رقيقًا مستقلًا. احذفها في المحرر، وفي المرة القادمة سطّح المصدر أولًا إلى لون واحد حاد الحواف.

الأسئلة المتكررة

ما الحجم المناسب لأيقونة المصدر؟
أكبر ما هو موجود؛ فحجم 512 بكسل أو أكثر مريح. تحت نحو 64 بكسل يشكل تنعيم الحواف جزءًا كبيرًا من الصورة، ولا يستطيع المحرك تمييز الحد الناعم عن الحد الحقيقي، وهو ما ينتج المنحنيات غير المستوية.
هل يمكن تحويل مجموعة أيقونات كاملة دفعة واحدة؟
يبدأ التحويل الدفعي من خطة Pro التي تقبل 30 ملفًا في المرة، وStudio يقبل 50 وAgency يقبل 100. تحويل المجموعة بدفعة واحدة مهم لأكثر من السرعة: كل ملف يمر بالإعدادات نفسها، فتخرج الأيقونات متناسقة مع بعضها.
هل تبقى الشفافية محفوظة؟
نعم، إذا كان المصدر يحملها. المناطق الشفافة في ملف PNG أو WebP تبقى فارغة في ملف SVG. أما JPEG فلا شفافية فيه إطلاقًا، لذا تصل الأيقونة القادمة من JPEG وخلفيتها شكل مصمت يمكن حذفه.
أيهما للأيقونات: SVG أم خط أيقونات؟
SVG. كانت خطوط الأيقونات حلًا بديلًا لحقبة متصفحات انتهت: فهي لا تدعم تعدد الألوان، وتنكسر عند فقدان ملف الخط، وتقرأها قارئات الشاشة نصًا. حوّل إلى SVG واستخدمه مضمّنًا أو في صورة sprite.

أدلة ذات صلة

الكوكيز

نستخدم كوكيز Google Analytics لمعرفة الصفحات التي تُزار وأين يتعثر الزوار، بلا إعلانات ولا ملفات تعريف ولا بيع لأي بيانات. ارفض وسيظل الموقع يعمل بالطريقة نفسها تمامًا. التفاصيل في سياسة الخصوصية.