تحويل SVG إلى ICO Scalable Vector Graphics ↔ Icon مجاناً عبر الإنترنت آمن
ملف SVG ليس صورة، بل تعليمات لرسم واحدة. تُنفَّذ هنا مرة واحدة، بالمقاس الذي تختاره، ويُحفظ الناتج بصيغة ICO. يجري الرسم في حيّز معزول لا يستطيع شيء في الملف أن يُنفَّذ داخله، ولا يُرفع شيء.
حوِّل ملفك
أفلت ملف SVG هنا، أو اختر واحداً.
ملفك لا يغادر هذا الجهاز. كل شيء يعمل داخل متصفحك.
لا رفع لأي ملف
بمَ يختلف المتجه
ملف SVG ليس صورة؛ بل هو جملةُ تعليماتٍ لرسم صورة: دائرةٌ نصف قطرها كذا هنا، وخطٌّ من هنا إلى هناك، وهذا الشكل ممتلئٌ بذلك اللون. وقد صار معياراً للوِب سنة 2001، ولأنه يحفظ الرسم لا النتيجة، فإن الملف نفسه الذي يرسم أيقونةً من ستة عشر بكسلاً يمكن أن تُطبَع منه لوحةُ إعلانٍ كبيرة. أما PNG أو JPEG فيحفظ العكس: شبكةً جاهزة من نقاطٍ ملوَّنة، بلا أي ذاكرةٍ لما رسمها. وهذا اللاتناظر هو الذي يقرر كل شيءٍ في هذه الصفحة. فالذهاب من المتجه إلى النقطي ليس إلا رسمَ التعليمات بالمقاس المختار؛ أما العكس فهو التتبّع — برنامجٌ ينظر في شبكة نقاطٍ ويخمّن أي الأشكال قد أنتجها.
أين تصادفها
الشعاراتُ والأيقوناتُ والخرائطُ والرسومُ التوضيحية والبيانية تعيش بصيغة SVG، لأنها يجب أن تبقى مقروءةً بأي مقاس، وكثيراً ما يلزم تغيير ألوانها. ومنها تُصنَع أيقوناتُ المواقع وأيقوناتُ التطبيقات. وأما الاتجاه العكسي فللحظة التي يجب أن يصير فيها المتجهُ صورةً مسطحة: برنامجُ بريدٍ لا يعرض SVG، ومعاينةٌ في شبكةٍ اجتماعية، ومستندٌ سيطبعه من برمجياتُه أقدم من برمجياتك، ونموذجُ رفعٍ لا يقبل إلا الصور الفوتوغرافية.
أسئلة متكررة
تتبّعتُ صورةً فوتوغرافية فجاءت النتيجة فظيعة. لماذا؟
لأن التتبّع لم يُقصَد به يوماً الصورُ الفوتوغرافية. فهو يعمل بأن يجد مناطق متقاربة اللون ويرسم حول كل واحدةٍ حدّاً، وهذا يناسب الرسم المسطح — شعاراً أو قالباً أو رسماً بالخطوط — ويتعثر في الصورة الفوتوغرافية، حيث تذوب كل منطقةٍ في التي تليها شيئاً فشيئاً. فيضطر المتتبّع إلى اختراع حدٍّ حيث لا حدّ، فيخرج إما لطخاتٌ كالملصقات من مساحاتٍ مسطحة، وإما ملفٌّ فيه عشرات الآلاف من الأشكال الدقيقة. أما الصور الفوتوغرافية فأبقِها نقطية.
لماذا يبدو ملف SVG عندي مختلفاً في برنامجٍ آخر؟
الخطوط في الغالب. فملف SVG الذي فيه نصٌّ يستدعي خطاً باسمه ويفترض أن الجهاز الذي يفتحه يملكه؛ فإن لم يملكه وُضع غيره وانزاح الترتيب. والعلاج أن تحوّل النص إلى مخططاتٍ قبل التصدير، فيصير كل حرفٍ شكلاً ويبدو الملف واحداً في كل مكان — بثمنٍ هو أن النص لم يعد قابلاً للتحرير ولا للتحديد. والمؤثرات المتقدمة كالمرشّحات وأنماط المزج هي المصدر المعتاد الآخر للاختلاف.
أيفقد الملف شيئاً من جودته؟
ذلك بحسب ما يسع الصيغتين أن تحملاه. فالتحويل بين صيغتين تحفظان الشيء نفسه — من PNG إلى BMP، ومن WAV إلى FLAC — لا يفقد شيئاً. أما التحويل إلى صيغةٍ تطرح المعلومات توفيراً للمساحة، كـJPEG أو MP3، فيفقد قليلاً في كل مرة، والعودة لا تردّ ما ذهب. وحيث يوجد خيار، تميل هذه الصفحة إلى حفظ الجودة الأصلية لا إلى إخراج أصغر ملف.
هل يُرفَع ملفي إلى مكانٍ ما؟
لا. يجري التحويل داخل متصفحك، على جهازك أنت؛ فالملف لا يغادره قط، وليس هنا خادمٌ أصلاً يستقبله. ولهذا كان الذي يحدّ الملفَّ الكبير ذاكرتَك أنت لا عمليةَ رفع، ولهذا لا يمكن لشيءٍ تحوّله أن يظهر في سجلات أحد — ولا في سجلاتنا. أما أدوات الصوت والصورة فتجلب محرّك التحويل من هذا الموقع في أول استعمال — نحو ثلاثين ميغابايت، مرةً واحدة؛ وبعدها يبقى العمل كلّه على جهازك.
لماذا يحوّل الناس SVG إلى ICO
ملف ICO هو أيقونة. وهو الصورة الصغيرة التي تظهر في تبويب المتصفح بجانب اسم الصفحة، وفي قائمة الإشارات المرجعية، وعلى الاختصار، وفي زاوية نافذة برنامج على ويندوز. فإن كنت تدير موقعاً إلكترونياً فأنت تريد واحدة تحمل علامتك. وإن كنت تبني برنامجاً فأنت تحتاج إلى واحدة لملفه التنفيذي. وإذا كان لديك شعار فمن المرجح جداً أنه رسم متجهي بصيغة SVG. ولهذا يحوّل الناس SVG إلى ICO: فلديهم رسم العلامة، ويحتاجون إلى ملف الأيقونة الذي ما زالت المتصفحات وأنظمة التشغيل تطلبه بالاسم.
ملف SVG ليس صورة. إنه مجموعة تعليمات لرسم صورة: ارسم دائرة هنا، ومنحنى هناك، واملأ هذا الشكل بذلك اللون. ولأنه تعليمات لا بكسلات، يمكن عرض SVG بأي حجم دون أن يصبح ضبابياً. أما الأيقونة، في المقابل، فهي حفنة من الصور الصغيرة المجمعة في ملف واحد، كل منها مصنوعة لحجم معين. وتتبع هذه الصفحة تعليمات SVG الخاص بك مرة لكل حجم وتحزم النتائج في ملف ICO واحد.
تحوّل هذه الصفحة SVG إلى ICO في متصفحك. يُعرض الرسم في بيئة معزولة لا يمكن لأي شيء في الملف أن يعمل فيها، ولا يُرفع شيء. ستجد في الأسفل كيف يعمل ذلك، وأي الأحجام يحتويها الملف، ولماذا الأيقونات الصغيرة مشكلة خاصة، وماذا تفعل حيالها.
كيف يعمل التحويل
ستة أحجام في ملف واحد
يحتوي ملف ICO الناتج على ستة أحجام في ملف واحد: 16 و32 و48 و64 و128 و256 بكسلاً. وكل منها يُعاد رسمه من SVG بدلاً من أن يُصغَّر من الآخر، فنسخة الـ 16 بكسلاً هي التعليمات متّبعة عند 16 بكسلاً، لا نسخة مصغرة من الكبيرة. وكلها تحتفظ بشفافيتها. ثم يختار نظام التشغيل أو المتصفح أي حجم يناسب المكان الذي تُعرض فيه الأيقونة.
بيئة معزولة لا يعمل فيها شيء
يمكن لملف SVG، من حيث المبدأ، أن يحتوي على سكربتات وإشارات إلى أشياء أخرى. ولكي لا يكون ذلك خطراً أبداً، يُعرض الرسم في بيئة معزولة لا يمكن لأي شيء في الملف أن يعمل فيها. وتُرسم الأشكال وحدها. وهذا آمن حتى للملفات التي نزّلتها من مكان لا تثق به تماماً.
لماذا إعادة الرسم أفضل من التصغير
حين تصغّر صورة كبيرة إلى صغيرة، تذوب التفاصيل بعضها في بعض وتتحول الخطوط إلى رمادية. أما إعادة الرسم من تعليمات المتجه عند الحجم المستهدف فتعطي أحدّ نتيجة يمكن أن يملكها كل حجم، لأن الخطوط توضع على شبكة البكسلات مباشرة.
ما الذي يُحفظ
الأحجام الستة
تحصل على 16 و32 و48 و64 و128 و256 بكسلاً، وهذا يغطي الأماكن التي تُعرض فيها الأيقونات عادة: تبويبات المتصفح وشريط المهام واختصارات سطح المكتب وقوائم الملفات والمعاينات الكبيرة.
الشفافية
تُحفظ الشفافية في الأحجام الستة كلها. والمناطق في SVG التي لا تملأ تبقى شفافة في ICO، فتتخذ الأيقونة لون ما خلفها.
شكل العلامة
يُحفظ الرسم كما هو، بألوانه وأشكاله. وإذا لم يكن SVG مربعاً فإنه يُلائم داخل مربع كل أيقونة دون تمديد.
ما ينبغي أن تعرفه قبل أن تحوّل SVG إلى ICO
الأيقونة رسم مختلف
الأيقونة ليست صورة صغيرة، بل رسم مختلف. فأي شيء بخطوط دقيقة أو نص صغير يتحول إلى هريسة عند 16 بكسلاً، مهما رُسم بعناية. وقد يكون شعار يبدو ممتازاً على ملصق غير مقروء بوصفه favicon. وإذا بدت النتيجة موحلة، فالجواب SVG أبسط لا تحويل أفضل.
صمّم لأصغر حجم
أفضل الأيقونات تُصنع مع وضع أصغر حجم في الاعتبار: شكل واحد جريء، وعدد محدود من الألوان، ولا خطوط شعرية ولا كتابة بعد حرف واحد. وإن استطعت فجهّز نسخة مبسطة من شعارك SVG منفصلاً لهذا الغرض، ثم حوّل SVG إلى ICO بها.
الخطوط والصور من الخارج لا تُحَل
الخطوط والصور التي يسحبها SVG من مكان آخر لا تُحَل في البيئة المعزولة. فالنص المضبوط بخط ويب محمّل من خادم يعود إلى خط نظام، والصورة المرتبطة من خارج الملف ستكون مفقودة. وللحصول على أفضل نتيجة، حوّل النص إلى مخطط وضمّن الصور.
كيف تحوّل SVG إلى ICO هنا
أضف رسمك
أفلت SVG على الصفحة أو اخترْه من جهازك. يُقرأ داخل متصفحك ولا يُرفع.
حوّل
اضغط الزر. تُرسم الأحجام الستة واحداً بعد الآخر، وهذا يستغرق لحظة. أبقِ الصفحة مفتوحة حتى ينتهي.
نزّل واختبر
نزّل ملف ICO وجرّبه حيث سيُستخدم. على موقع إلكتروني، ضعه في المجلد الجذر باسم favicon.ico، أو اربط به في رأس الصفحة، وانظر إلى تبويب المتصفح. وعلى ويندوز، يمكنك تعيينه لاختصار ورؤية مظهره بأحجام مختلفة.
نظرة أقرب إلى SVG وICO
متجه وحزمة
SVG رسم واحد يمكن عرضه بأي حجم. وICO حاوية فيها عدة صور، كل منها بحجم ثابت. والبرنامج الذي يعرض أيقونة يختار الصورة الأقرب إلى الحجم الذي يحتاجه، وهذا يتجنب التحجيم الضبابي. وتحويل SVG إلى ICO هو عرض الرسم بالأحجام التي يُتوقع أن تحتويها الحاوية.
أين تُستخدم الأيقونات
تستخدم المتصفحات الأحجام الأصغر للتبويبات والأكبر للإشارات المرجعية وصفحة التبويب الجديد. ويستخدمها ويندوز لشريط المهام وقائمة ابدأ ومستكشف الملفات. وللأجهزة المحمولة مجموعاتها الخاصة من أحجام الصور للشاشات الرئيسية، وهي عادة ملفات PNG لا ICO. وإذا كنت تجهز أيقونة تطبيق لهاتف، فإن من SVG إلى PNG بالأحجام التي تتطلبها المنصة هو الطريق الأفضل.
الـ favicon اليوم
تقبل المتصفحات الحديثة PNG وحتى SVG أيقونات favicon، لكن ICO تبقى الصيغة التي تعمل في كل مكان، بما فيها المتصفحات القديمة وبعض قارئات الخلاصات وأدوات تبحث عن favicon.ico تلقائياً. وامتلاك واحدة هو الخيار الآمن.
حالات شائعة بالتفصيل
الـ favicon لموقع إلكتروني
حوّل SVG إلى ICO، واحفظ الملف باسم favicon.ico في جذر موقعك واربط به. وسيحمل تبويب كل متصفح علامتك، ما يجعل الصفحة معروفة بين تبويبات كثيرة مفتوحة.
أيقونة برنامج ويندوز
تحمل البرامج على ويندوز أيقونة في ملفها التنفيذي وفي اختصاراتها. ويحتاج المطورون إلى ICO متعدد الأحجام لذلك. والأحجام الستة التي تحصل عليها تغطي المتطلبات المعتادة.
الاختصارات والمجلدات
على ويندوز يمكنك أن تعطي اختصاراً أو مجلداً أيقونتك الخاصة. وICO مصنوع من شعارك يجعل سطح مكتبك أو مجلدات مشاريعك أسهل تعرفاً.
مواقع الأعمال الصغيرة والمدونات
الـ favicon تفصيل صغير يجعل الموقع يبدو مكتملاً. وإذا كان شعارك SVG، فإن هذا التحويل ينتج الملف الذي يطلب منك بُناة المواقع رفعه.
نصائح عملية قبل أن تحوّل SVG إلى ICO
بسّط الرسم
أزل الخطوط الدقيقة، واترك الكتابة أو أبقِ حرفاً واحداً، واستخدم أشكالاً جريئة. اعرض SVG عند 16 بكسلاً في برنامج الرسم قبل أن تحوّل، لترى كيف ستبدو أصغر أيقونة.
اجعل الرسم مربعاً
الأيقونات مربعة. فإذا كان شعارك عريضاً، فضعه على لوحة مربعة مع بعض الهامش، حتى لا يُقطع ولا يكون صغيراً جداً داخل المربع.
افحص التباين
قد تكون تبويبات المتصفح فاتحة أو داكنة. والعلامة ذات التباين القوي مع الخلفيتين أسهل رؤية. وعادة ينجح مخطط أبيض رفيع حول علامة داكنة، أو شكل ملون صلب.
احتفظ بـ SVG
SVG هو الأصل. فإذا قررت تغيير الأيقونة لاحقاً فستحتاج إليه لتحوّل SVG إلى ICO من جديد.
أسئلة يطرحها الناس قبل التحويل
لماذا تبدو أيقونتي ضبابية عند 16 بكسلاً؟
لأن 16 بكسلاً قليلة جداً. فالخطوط الدقيقة والنص الصغير لا يمكن تمثيلها هناك. بسّط الرسم بدلاً من البحث عن تحويل أفضل.
أي الأحجام يحتويها الملف؟
16 و32 و48 و64 و128 و256 بكسلاً، كل منها مُعاد رسمه من SVG، وكلها بشفافية.
هل ستبقى الشفافية؟
نعم. فالخلفية الشفافة في SVG شفافة في الأحجام الستة كلها من ICO.
هل أستطيع استخدام الملف بوصفه favicon؟
نعم. سمّه favicon.ico، وضعه في جذر موقعك، أو اربط به من رأس صفحاتك.
هل يُرفع ملفي؟
لا. يعمل التحويل في متصفحك ولا يغادر الملف جهازك أبداً.
هل أستطيع صنع SVG من أيقونة؟
نعم، إلى حد ما. فـ من ICO إلى SVG يتتبع الأيقونة إلى أشكال، وإن كان الحجم الصغير يحد مما يمكن استرداده.
الاختيار بحكمة حين تحوّل SVG إلى ICO
ICO أم PNG؟
لـ favicon يعمل في كل مكان اختر ICO. ولأيقونات التطبيقات على الهواتف وللصور في صفحات الويب فإن PNG هي الصيغة المعتادة. ومن SVG إلى PNG يعطيك ذلك.
فكّر في المجموعة كاملة
إذا كنت تجهز علامة تجارية، فقد تحتاج إلى شعار بصيغة PNG وfavicon بصيغة ICO ونسخة قابلة للطباعة بصيغة PDF. ومن SVG إلى PDF يحافظ على الرسم رسماً للطباعة.
اختبر على تبويب حقيقي
انظر إلى الأيقونة في تبويب متصفح فعلي، في سمة فاتحة وأخرى داكنة. فذاك هو المكان الذي سيقابلها فيه معظم الناس.
الحصول على نتيجة جيدة بعد التحويل
امسح ذاكرة المتصفح المؤقتة
تحتفظ المتصفحات بأيقونات favicon وقتاً طويلاً. فإذا استبدلت أيقونة وما زلت ترى القديمة، فامسح الذاكرة المؤقتة أو افتح الموقع في نافذة خاصة.
افحص كل الأحجام
إذا كانت لديك أداة تفتح ملفات ICO، فانظر إلى كل حجم. فالعلامة الجيدة عند 256 بكسلاً قد تكون غير مقروءة عند 16، وهذا يخبرك هل ينبغي أن تبسّط.
سمّه بشكل صحيح
تبحث المتصفحات عن favicon.ico في جذر الموقع افتراضياً. أبقِ على هذا الاسم ما لم تربط بالملف صراحة.
تصميم علامة تنجو من أصغر حجم
ابدأ من شبكة الـ 16 بكسلاً
أكثر الطرق موثوقية للحصول على نتيجة جيدة حين تحوّل SVG إلى ICO هي أن تصمم مع وضع أصغر حجم في الاعتبار. تخيل شبكة من ستة عشر في ستة عشر مربعاً واسأل ما الذي تستطيع وضعه عليها. دائرة أو حرف أو رمز بسيط: نعم. توقيع أو شعار نبالة مع شعار: لا. وستبدو الأحجام الأكبر جيدة أياً كان ما ترسمه، فالصغير هو القيد الذي ينبغي التصميم له.
استخدم أشكالاً قوية وألواناً قليلة
لونان أو ثلاثة بتباين واضح تُقرأ أفضل من تدرج من ألوان كثيرة. والأشكال الصلبة التي تملأ معظم المربع أسهل تعرفاً من المخططات الرفيعة، لأن كل بكسل يحمل جزءاً أكبر من العلامة.
اترك مجالاً صغيراً للتنفس
قد تبدو العلامة التي تلامس حافة المربع ضيقة، وتضيف بعض الأنظمة استدارتها الخاصة أو حدّها. وهامش من بكسل أو اثنين عند أصغر حجم يحفظ الشكل سليماً.
انظر إليها بجانب أيقونات أخرى
افتح بضعة تبويبات من مواقع معروفة وقارن. ستلاحظ أن الأيقونات التي تعمل أفضل بسيطة جداً. استعر هذا الانضباط قبل أن تحوّل SVG إلى ICO، وستصمد نتيجتك في زحام التبويبات.
الخصوصية والمعالجة
لماذا يهم التحويل المحلي للرسوم
قد تكون الشعارات والعلامات التجارية سرية قبل نشرها. وكثير من المحوّلات عبر الإنترنت ترفع ملفك إلى خادم وتعالجه وتعيد النتيجة، ولبعض الوقت تعيش نسخة على جهاز لا تتحكم فيه. أما هنا فمتصفحك هو الذي يقوم بالعمل، فيبقى الرسم على جهازك.
ما يحدث عند المغادرة
حين تغلق الصفحة يختفي الملف المحوّل من المتصفح، فنزّله أولاً. ولا يُحتفظ بشيء عن رسمك.
إذا حدث خطأ
الأيقونة تخرج فارغة
قد يفتقر SVG إلى حجم أو مربع عرض. افتحه في محرر نصوص وتحقق من أن فيه عرضاً وارتفاعاً أو مربع عرض، أو أصلحه في برنامج الرسم.
الأيقونة مقطوعة
في بعض ملفات SVG عناصر تمتد خارج منطقتها المعلنة. عدّل مربع العرض في الأصل بحيث يتسع كل شيء داخله.
الصفحة تتجمد
يعمل كل شيء على جهازك. جرّب مرة أخرى على حاسوب، أو برسم أبسط.
أدوات ذات صلة
تغطي عائلة الأدوات نفسها المهام المجاورة. وللصور بالأحجام التي تختارها استخدم من SVG إلى PNG أو من SVG إلى JPG. ولمستند يبقى حاداً عند أي تكبير، يحافظ من SVG إلى PDF على الرسم رسماً. ولتتبع الصور وإعادتها إلى أشكال، تقوم من ICO إلى SVG ومن PNG إلى SVG ومن JPG إلى SVG بالمهمة.
مثال محلول
لنفترض أنك بدأت مدونة صغيرة، وشعارك SVG: ورقة شجر خضراء مع اسم المدونة تحتها. تفلت SVG هنا وتضغط الزر. يصل ملف ICO، وفي تبويب المتصفح تظهر الورقة معروفة، لكن الاسم تحتها غير مقروء. فتفتح برنامج الرسم، وتصنع نسخة بالورقة وحدها، وتحوّل SVG إلى ICO مرة أخرى وترفع الملف الجديد باسم favicon.ico. والآن يُظهر التبويب ورقة خضراء واضحة، ويبقى الشعار الكامل على الصفحة.
قائمة تحقق قصيرة
قبل التحويل
بسّط الرسم. اجعله مربعاً. حوّل النص إلى مخطط وضمّن الصور.
أثناء التحويل
ابقَ في الصفحة حتى يجهز الملف.
بعد التحويل
اختبر ICO في تبويب متصفح وفي اختصار، في سمتين فاتحة وداكنة، واحتفظ بـ SVG.
أخطاء شائعة
استخدام الشعار كاملاً
تختفي الكتابة والتفاصيل الدقيقة عند 16 بكسلاً. استخدم علامة مبسطة.
توقع أن يصلح تحويل أفضل رسماً مزدحماً
العيب في الحجم لا في الأداة. بسّط SVG.
نسيان الذاكرة المؤقتة
قد تبقى أيقونة favicon قديمة في المتصفح. امسح الذاكرة المؤقتة قبل أن تحكم أن الجديدة فشلت.
رسمك يبقى على جهازك
يجري التحويل محلياً. يقرأ متصفحك رسمك ويرسمه هناك ويعيده بصيغة ICO. ولا يُرفع شيء، فلا تنتهي نسخة على خادم ولا يستطيع أحد آخر رؤيته. وللعلامات غير المنشورة، هذه هي الطريقة الآمنة لتحويل SVG إلى ICO.
الخلاصة
لتحويل SVG إلى ICO هنا، أفلت الرسم واضغط الزر. SVG ليس صورة بل تعليمات لرسم صورة، وهنا تُتّبع تلك التعليمات مرة لكل حجم وتُحفظ النتائج بصيغة ICO. ويُعرض الرسم في بيئة معزولة لا يمكن لأي شيء في الملف أن يعمل فيها، ولا يُرفع شيء. ويحتوي الملف ستة أحجام: 16 و32 و48 و64 و128 و256 بكسلاً، كل منها مُعاد رسمه من SVG بدلاً من أن يُصغَّر من الآخر، وكلها بشفافية. والأيقونة ليست صورة صغيرة بل رسم مختلف: فأي شيء بخطوط دقيقة أو نص صغير يتحول إلى هريسة عند 16 بكسلاً مهما رُسم بعناية. وإذا بدت النتيجة موحلة فالجواب SVG أبسط لا تحويل أفضل. والخطوط والصور المسحوبة من الخارج لا تُحَل.