شيفرة هذه الصفحة لم تبدأ العمل.

فتح index.html مباشرة من مجلد يمنع المتصفح من تحميل وحدات JavaScript، فلا يحدث شيء عند اختيار صورة. قدّم المجلد عبر HTTP بدلا من ذلك:

powershell -ExecutionPolicy Bypass -File serve.ps1

ثم افتح http://localhost:8080/.

صورة إلى SVG — تتبَّع شعاراً أو قالباً أو ظلاً إلى منحنيات

شكل واحد، وخط محيط واحد. أشِر إلى ما لا ينبغي أن يكون هناك.

اللغة: العربية
عرض الشيفرة المصدرية
صورك لا تُرفع أبدا. لا يوجد خادم.

يقرأ متصفحك الصورة من قرصك، ويختزلها src/mask.js إلى بتّ واحد لكل بكسل، ويطوف src/contour.js بحافة الشكل، ويُلبسها src/fit.js منحنيات — نحو ستمئة سطر تستطيع قراءتها، بلا محرّك خلفها ولا شيء يُنزَّل لتشغيلها. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق: لا شيء تجلبه ولا شيء ترسله، ولا يقف خلف هذه الصفحة خادم يُرسَل إليه رسم، حتى لو كان فيها ما يرسله.

فحص حي: جارٍ الفحص…

دون اتصال: جارٍ الفحص…

لا داعي لأن تصدّقنا: افتح أدوات المطوّر، وراقب تبويب «الشبكة»، ثم تتبَّع شيئاً. لن يحمل أي طلب صورة ولا مصغَّرة ولا اسم ملف ولا بايتاً واحداً مما اخترته. أو اقطع الاتصال بالإنترنت وتتبَّع صورة رغم ذلك.

1 اختر الصورة

2 قل ما الشكل

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

3 افحص خط المحيط وأصلح ما أخطأ فيه

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

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

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

الصورة

ملف SVG

كم ينبغي أن يكون الخط ناعماً

رقمان يقرّران كيف يصير سُلَّم البكسلات منحنيات. لا يحتاج أيّ منهما إلى لمس في معظم الصور، وكلاهما جدير بالمعرفة لحين الحاجة.

4 خذ ملف SVG

عرض بصيغة Markdown

كيف تتبَّع صورة إلى SVG دون رفعها

  1. اختر الصورة. شعار، أو قالب، أو توقيع، أو ختم، أو رسم ممسوح ضوئياً، أو ظلّ. كل ما فيه شكل واضح يُتتبَّع جيداً؛ أما صورة غرفة فلا، وفي الأسفل تحذير صريح بدل مفاجأة في النهاية. يُقرأ الملف من قرصك مباشرةً ولا يُرسَل شيء إلى أي مكان في أثناء ذلك.
  2. قل ما الشكل. الرسم على الورق يُفصَل بـالفاتح والداكن، والمستوى يُحسَب لك. أما صورة شيء ما فلا — تمثال أحمر داكن على حجر رمادي داكن هو داكن على داكن، ولا سطوع يفصل بينهما. تلك تريد الموضوع، الذي يتعلّم ما الخلفية من شريط على طول حافة الصورة ويحتفظ بكل ما ليس منها.
  3. انظر إلى الخط الأحمر لا إلى الإعدادات. يُرسَم خط المحيط فوق البكسلات التي جاء منها، لأنه الموضع الوحيد الذي يمكن فيه حسم المسألة: خط المحيط صائب أو خاطئ بالنسبة إلى تلك البكسلات لا غير. اسحب أياً من الصورتين لتحريكهما معاً، وأدر العجلة لتكبّر بما يكفي لترى ما يفعله الخط فعلاً.
  4. أزل بنقرة ما لا ينبغي أن يكون هناك. بقعة، أو دبّوس، أو ختم، أو تعليق، أو ظلّ. النقرة تلتقط رقعة ذلك اللون كلها لا بكسلاً واحداً، فأنت تشير إلى شكل؛ انقره ثانيةً ليعود. أما النقر على قطعة محاطة من الخلفية فيملؤها، وهكذا يُسدّ ثقب لا ينبغي أن يكون ثقباً.
  5. اضبط النعومة عند الحاجة فقط. التفصيل هو مقدار ما يُسمح للخط بالابتعاد عن البكسلات أثناء تبسيطه، ويُحسَب لكل شكل ما لم تقل غير ذلك. وحدّة الزوايا تقرّر كم يجب أن ينعطف خط المحيط ليبقى الانعطاف زاويةً بدل أن يُستدار. معظم الصور لا تحتاج إلى لمس أيّ منهما.
  6. خذ ملف SVG. ملف واحد، و<path> واحد، ولا قاعدة تعبئة تقلق بشأنها: تدور خطوط المحيط في اتجاه والثقوب في الاتجاه المقابل، وهذا ما يجعل شكلاً فيه أربعون ثقباً عنصراً واحداً. يُفتح في Illustrator وInkscape وFigma والمتصفح وآلة القطع.

النسخة الأطول

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

أسئلة

هل تُرفَع صورتي إلى مكان ما؟

لا. يقرأ الملفَ متصفحُك على عتادك، وتتتبّعه بضع مئات من أسطر JavaScript المقدَّمة من هذا الأصل، ثم يُعاد إليك تنزيلاً. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — لا تجلب شيئاً ولا ترسل شيئاً — وتُسمّي Content-Security-Policy الخاصة بالصفحة كل عنوان يمكنها الاتصال به، ولا واحد منها يخصّ هذا الموقع.

هل تحوّل صورتي الفوتوغرافية إلى SVG؟

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

ما الفرق بين طريقتَي إيجاد الشكل؟

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

لماذا في الشكل المتتبَّع ثقوب، أو لماذا يفقد الأجزاء الرفيعة؟

لأنها كانت في الصورة حين صارت بتّاً واحداً لكل بكسل. شغّل ما تلقّاه المتتبِّع لتراه: دون نحو اثني عشر بكسلاً تكون عين الحرف قد امتلأت وساقاه قد التحمتا، ولا تتبّع يستعيد ثقباً غير موجود. العلاج في المنبع — حرّك العتبة، أو ابدأ من مسح ضوئي أكبر. وفي وضع الموضوع، يسدّ سدّ الفجوات حتى الثقوب الصغيرة، ويُغلق املأه مصمتاً كل ثقب لا تبلغه الخلفية من حافة الصورة.

هل يمكنني إصلاح ما أخطأت فيه؟

نعم، ولهذا معظم الخطوة الثالثة. انقر أي شيء لا ينبغي أن يكون في الرسم فيختفي؛ انقره ثانيةً فيعود. النقرة تلتقط رقعة ذلك اللون كلها، فتزيل نقرة واحدة بقعة بأكملها أو ختماً بأكمله لا بكسلاً واحداً. والنقر على قطعة محاطة من الخلفية يملؤها. تُحفظ التصحيحات منفصلةً عن العتبة، فتحريك المنزلق بعدها لا يرميها.

ما حجم ملف SVG؟

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

هل تتتبّع بالألوان؟

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

ماذا أفعل بملف SVG بعدها؟

تكبّره إلى أي حجم دون أن يتشوّش، وتغيّر لونه بخاصية واحدة، وتحرّكه، وتطبعه، أو ترسله إلى آلة قطع أو ليزر. هو <path> واحد بلا قاعدة تعبئة يمكن أن تُضبط خطأً، فيقرؤه Illustrator وInkscape وFigma والمتصفح ومعظم برامج CNC على النحو نفسه.

هل لحجم الصورة حدّ؟

حدّ جهازك لا حدّنا. صفحة A4 ممسوحة بدقة 300 نقطة في البوصة — نحو تسعة ميغابكسل — تُتتبَّع في جزء من الثانية. والصور الأكبر تعمل؛ تستغرق وقتاً أطول فحسب، والعمل يجري على معالجك أنت لا في طابور في مكان ما.

هل هي مجانية، وهل أحتاج إلى حساب؟

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

هل تعمل دون اتصال؟

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