يُفتح هذا بمجرّد أن تختار ملفاً في الأعلى.جاهزة — اقطع الاتصال بالإنترنت وستظل تعمل.غير متاحة في هذا المتصفح (كل شيء آخر يظل يعمل).تحتاج إلى https:// أو localhost للتخزين المؤقت دون اتصال.التخزين المؤقت غير متاح هنا، لكن لا شيء يُرفع في الحالتين.ملفاتك لم تذهب إلى أي مكان. {total} ملفاً حُمِّلت، كلها ملفات هذه الصفحة نفسها. {platform}اتصل شيءٌ بـ {hosts}، وهو ما لا تفعله هذه الأداة أبداً. عُدَّ ذلك جديراً بالتحقيق. {platform}نصوصُ الإعلانات والقياس وزرّ التبرّع الخاصة بالصفحة حُمِّلت من مضيفٍ {hosts}؛ ولم يُعطَ واحد منها ملفاً ولا بايتاً منه.نصوصُ الإعلانات والقياس وزرّ التبرّع الخاصة بالصفحة حُمِّلت من {hosts} مضيفاً؛ ولم يُعطَ واحد منها ملفاً ولا بايتاً منه.حدث خطأ ما: {detail}. أعد تحميل الصفحة لتبدأ من جديد.جارٍ قراءة {count} ملف…جارٍ قراءة {count} ملف…جرّب مثالاًجارٍ إنشاء مثال…تعذّر على هذا المتصفّح إنشاء المثال. اختر ملفاً بدلاً من ذلك.
صورة إلى SVG — تتبَّع شعاراً أو قالباً أو ظلاً إلى منحنيات
شكل واحد، وخط محيط واحد. أشِر إلى ما لا ينبغي أن يكون هناك.
يقرأ متصفحك الصورة من قرصك، ويختزلها src/mask.js إلى بتّ واحد لكل بكسل، ويطوف src/contour.js بحافة الشكل، ويُلبسها src/fit.js منحنيات — نحو ستمئة سطر تستطيع قراءتها، بلا محرّك خلفها ولا شيء يُنزَّل لتشغيلها. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق: لا شيء تجلبه ولا شيء ترسله، ولا يقف خلف هذه الصفحة خادم يُرسَل إليه رسم، حتى لو كان فيها ما يرسله.
✗ بلا رفع
✗ بلا حساب
✗ بلا علامة مائية
✓ يعمل دون اتصال
✓ مفتوح المصدر
فحص حي:جارٍ الفحص…
دون اتصال:جارٍ الفحص…
لا داعي لأن تصدّقنا: افتح أدوات المطوّر، وراقب تبويب «الشبكة»، ثم تتبَّع شيئاً. لن يحمل أي طلب صورة ولا مصغَّرة ولا اسم ملف ولا بايتاً واحداً مما اخترته. أو اقطع الاتصال بالإنترنت وتتبَّع صورة رغم ذلك.
كيف يمكن التحقق من وعد الخصوصية
صورتك لا مكان تذهب إليه. تُسمّي Content-Security-Policy كل عنوان يمكن لهذه الصفحة الاتصال به، ولا واحد منها يخصّ هذا الموقع. لا توجد هنا نقطة تُجمَع فيها ملفاتك، ولا شيء في الشيفرة يرسلها إليها لو وُجدت.
لا شيء هنا يجلب شيئاً. لا fetch ولا XMLHttpRequest ولا sendBeacon في أي موضع من src/. الأداة كلها حساب على بكسلات صورة واحدة: عتبة، وطواف بحافة ما وجدته، وشيء من ملاءمة المنحنيات.
لا محرّك يُنزَّل. التتبّع عادةً برنامج شخص آخر، وعلى الويب يعني ذلك عدة ميغابايتات من الشيفرة المصرَّفة تصل قبل النقرة الأولى. لا شيء من ذلك هنا. الأمر كله بضع مئات من أسطر JavaScript العادية تُقدَّم من هذا الأصل، ولهذا أيضاً تعمل الصفحة لحظة فتحها لا بعد انتظار.
ما يحمّله Google، وما لا يُعطاه. تأتي سكربتات الإعلان والقياس من Google، وزرّ التبرّع من Buy Me a Coffee. ولا يُعطى أيّ منها شيئاً عن صورتك. فكل سطر يقرؤها أو يُطبّق عليها العتبة أو يتتبّعها يُقدَّم من هذا الأصل ومدرج في المستودع.
تعمل دون اتصال. اقطع الشبكة فتبقى الأداة كما هي، لأنه لم تكن فيها خطوة شبكية قط. وهذا أبسط دليل على الإطلاق.
تحقّق بنفسك. لا شيء مما سبق عليك تصديقه دون تحقق. تُولَّد هذه الصفحة من القوالب والإعدادات في المستودع بواسطة سكربت بناء يمكنك قراءته وتشغيله بنفسك، والنتيجة موجودة في فرع dist — فقارِن إذن بين ما يُقدَّم فعلا وما ينتجه بناء المصادر:
الملفات الجديرة بالقراءة أولا هي config/site.toml من أجل سياسة أمان المحتوى (Content-Security-Policy)، وsrc/mask.js لكيف تصير الصورة بتّاً واحداً لكل بكسل، وsrc/contour.js للطواف بحافة الشكل، وsrc/fit.js لكيف يصير السُّلَّم منحنيات، وsrc/subject.js لكيف تُستنتج الخلفية حين لا يكون هناك فاتح وداكن يُفصَل بينهما.
إذا حذّرك برنامج الحماية في عملك من رفع ملف. إنه يراقب لحظة اختيار ملف في المتصفّح، ولا يمكنه أن يعرف إن كانت الصفحة تنوي إرساله — فيحذّر عند الاختيار. لا شيء يُرسَل من هنا: افتح أدوات المطوّر في متصفّحك، وانتقل إلى Network، ثم اختر ملفاً. لا يوجد أي طلب يحمله، ولا أي طلب أصلاً عدا المعاينة المحلية للصفحة. وهو الفحص نفسه الذي يستطيع أي شخص في قسم تقنية المعلومات لديك إجراؤه في نصف دقيقة.
1 اختر الصورة
2 قل ما الشكل
يحتاج التتبّع إلى بتّ واحد لكل بكسل — داخل، أو خارج. وهناك طريقتان لتقرير ذلك، وتناسبان صوراً مختلفة. الرسم على ورق أبيض يُفصَل بـالفاتح والداكن. أما صورة شيء ما فلا: تمثال أحمر داكن على حجر رمادي داكن هو داكن على داكن، ولا سطوع يفصل بينهما. تلك تريد الموضوع، الذي يستنتج ما الخلفية من حواف الصورة ويحتفظ بكل ما ليس منها.
3 افحص خط المحيط وأصلح ما أخطأ فيه
الخط الأحمر هو خط المحيط كما هو الآن، مرسوماً فوق البكسلات التي جاء منها — الموضع الوحيد الذي يمكن فيه حسم المسألة، لأن خط المحيط صائب أو خاطئ بالنسبة إلى تلك البكسلات لا غير. اسحب أياً من الصورتين لتحريكهما معاً، وأدر العجلة للتكبير، وانقر أي شيء لا ينبغي أن يكون هناك. النقرة تلتقط رقعة ذلك اللون كلها، فأنت تشير إلى شكل لا إلى بكسل؛ انقره ثانيةً ليعود.
احسبه لكل شكل مقدار ما يُسمح للخط بالابتعاد عن البكسلات. دون نحو واحد لا يفعل شيئاً البتة، لأن درجة السُّلَّم تقع على بُعد بكسل كامل من الخط الذي تنتمي إليه؛ وفوق نحو اثنين يبدأ في التهام منحنيات حقيقية.
حدّة الزوايا كم يجب أن ينعطف خط المحيط ليبقى الانعطاف زاويةً بدل أن يُستدار إلى منحنى. إن انخفض كثيراً صار كل اهتزاز زاوية، وعادت الدائرة مضلَّعاً.
الصورة
ملف SVG
كم ينبغي أن يكون الخط ناعماً
رقمان يقرّران كيف يصير سُلَّم البكسلات منحنيات. لا يحتاج أيّ منهما إلى لمس في معظم الصور، وكلاهما جدير بالمعرفة لحين الحاجة.
لم يستطع هذا المتصفح فكّ ترميز الصورة.تعذّر فتح ذلك الملف: {why}{name} — {width} × {height}الصورة الجاري تتبّعها، {width} في {height} بكسلمحسوب: {level}{level}عُثر على قطعة واحدة، تشكّل {share}% من الصورة.عُثر على {islands} قطعة منفصلة واحتُفظ بالأكبر، وتشكّل {share}% من الصورة.تُستخدم الألوان الـ{count} التي أشرت إليها بوصفها خلفية.تُتعلَّم الخلفية من شريط على طول حافة الصورة.{zoom}×لكل شكل{value}{value}°ذلك اللون بالضبط±{value}غير مستخدم — النقرة تلتقط الشكل المتصل كلهجزء من الشكل: {size} بكسل، {share}% من الصورة. انقر لإخراجه.ليس جزءاً من الشكل: {size} بكسل، {share}% من الصورة. انقر لملئه.أكثر من {size} بكسل — أكبر من أن يُرسَم محيطه أثناء تحرّكك. انقر لالتقاطه رغم ذلك.{size} بكسل. الحافة أطول من أن تُرسَم أثناء تحرّكك.هذا اللون: انقر لإضافته إلى ما يُحسب خلفية.انسَ ذلك اللونانسَ تلك الألوان الـ{count}شكل واحد، {points} نقطة، {bytes}. تُتُبِّع في {ms} م.ث.{loops} شكلاً، {points} نقطة، {bytes}. تُتُبِّعت في {ms} م.ث.{count} تصحيح من عندك.{count} تصحيحات من عندك.خرج هذا {loops} شكلاً منفصلاً و{bytes} من الرسم، وهذا ما تبدو عليه صورة فوتوغرافية حين تُتتبَّع كأنها رسم خطي. الملف لا يزال لك لتنزّله، لكنه سيُفتح ببطء ولن يشبه الصورة. جرّب الموضوع في الأعلى بدلاً من ذلك.{stem}.svg
هل أنجزت المهمة؟
ما الذي حدث خطأ؟
شكرا — هذا يساعد.
يُرسَل الجواب فقط، وفقط عند الضغط على زر. لا يُرسَل ملفك أبدا، ولا اسمه، ولا أي شيء عنه.
# صورة إلى SVG — تتبَّع شعاراً أو قالباً أو ظلاً إلى منحنيات
شكل واحد، وخط محيط واحد. أشِر إلى ما لا ينبغي أن يكون هناك.
> تتبَّع صورة بالأبيض والأسود إلى خط محيط SVG حقيقي، داخل متصفحك. الشعارات والقوالب والتوقيعات والرسوم الخطية والظلال تصير منحنيات تكبّرها إلى أي حجم. وما التقطه التتبّع خطأً تزيله بنقرة. لا يُرفع شيء.
هذه الصفحة أداة تفاعلية تعمل بالكامل داخل متصفحك، على العنوان https://abox.tools/ar/تحويل-صورة-إلى-svg/ — ولا يُرفَع أي شيء تعطيه إياها. وفيما يلي كل ما تقوله الصفحة عن الأداة بالكلمات؛ لاستخدامها، افتح العنوان.
## صورك لا تُرفع **أبدا**. لا يوجد خادم.
يقرأ متصفحك الصورة من قرصك، ويختزلها `src/mask.js` إلى بتّ واحد لكل بكسل، ويطوف `src/contour.js` بحافة الشكل، ويُلبسها `src/fit.js` منحنيات — نحو ستمئة سطر تستطيع قراءتها، بلا محرّك خلفها ولا شيء يُنزَّل لتشغيلها. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق: لا شيء تجلبه ولا شيء ترسله، ولا يقف خلف هذه الصفحة خادم يُرسَل إليه رسم، حتى لو كان فيها ما يرسله.
- ✗ بلا رفع
- ✗ بلا حساب
- ✗ بلا علامة مائية
- ✓ يعمل دون اتصال
- ✓ مفتوح المصدر
## كيف تتبَّع صورة إلى SVG دون رفعها
1. **اختر الصورة.** شعار، أو قالب، أو توقيع، أو ختم، أو رسم ممسوح ضوئياً، أو ظلّ. كل ما فيه شكل واضح يُتتبَّع جيداً؛ أما صورة غرفة فلا، وفي الأسفل تحذير صريح بدل مفاجأة في النهاية. يُقرأ الملف من قرصك مباشرةً ولا يُرسَل شيء إلى أي مكان في أثناء ذلك.
2. **قل ما الشكل.** الرسم على الورق يُفصَل بـ**الفاتح والداكن**، والمستوى يُحسَب لك. أما صورة شيء ما فلا — تمثال أحمر داكن على حجر رمادي داكن هو داكن على داكن، ولا سطوع يفصل بينهما. تلك تريد **الموضوع**، الذي يتعلّم ما الخلفية من شريط على طول حافة الصورة ويحتفظ بكل ما ليس منها.
3. **انظر إلى الخط الأحمر لا إلى الإعدادات.** يُرسَم خط المحيط فوق البكسلات التي جاء منها، لأنه الموضع الوحيد الذي يمكن فيه حسم المسألة: خط المحيط صائب أو خاطئ بالنسبة إلى تلك البكسلات لا غير. اسحب أياً من الصورتين لتحريكهما معاً، وأدر العجلة لتكبّر بما يكفي لترى ما يفعله الخط فعلاً.
4. **أزل بنقرة ما لا ينبغي أن يكون هناك.** بقعة، أو دبّوس، أو ختم، أو تعليق، أو ظلّ. النقرة تلتقط رقعة ذلك اللون كلها لا بكسلاً واحداً، فأنت تشير إلى شكل؛ انقره ثانيةً ليعود. أما النقر على قطعة محاطة من الخلفية فيملؤها، وهكذا يُسدّ ثقب لا ينبغي أن يكون ثقباً.
5. **اضبط النعومة عند الحاجة فقط.** *التفصيل* هو مقدار ما يُسمح للخط بالابتعاد عن البكسلات أثناء تبسيطه، ويُحسَب لكل شكل ما لم تقل غير ذلك. و*حدّة الزوايا* تقرّر كم يجب أن ينعطف خط المحيط ليبقى الانعطاف زاويةً بدل أن يُستدار. معظم الصور لا تحتاج إلى لمس أيّ منهما.
6. **خذ ملف SVG.** ملف واحد، و`<path>` واحد، ولا قاعدة تعبئة تقلق بشأنها: تدور خطوط المحيط في اتجاه والثقوب في الاتجاه المقابل، وهذا ما يجعل شكلاً فيه أربعون ثقباً عنصراً واحداً. يُفتح في Illustrator وInkscape وFigma والمتصفح وآلة القطع.
## النسخة الأطول
[كيف تتبَّع صورة إلى SVG](https://abox.tools/ar/أدلة/تحويل-صورة-إلى-svg/): حوِّل شعاراً أو قالباً أو توقيعاً أو ظلاً إلى خط محيط متجهي حقيقي في متصفحك. أي الصور تُتتبَّع جيداً، وأيها لن تُتتبَّع أبداً، وكيف تصلح الأجزاء التي يخطئ فيها المتتبِّع.
## أيضا في الصندوق
- [رسم مقارنة الأطوال](https://abox.tools/ar/مقارنة-الاطوال/): اكتب الأطوال، وخذ الصورة. ولا يُرسَل شيء لرسمها.
- [ضاغط الصور](https://abox.tools/ar/ضغط-الصور/): حدّد الحجم، ويتكفّل هو بالباقي.
- [تغيير حجم الصور](https://abox.tools/ar/تغيير-حجم-الصورة/): قل الحجم. ارسم الإطار. اختر الصيغة.
- [HEIC إلى JPG](https://abox.tools/ar/تحويل-heic-إلى-jpg/): الصور التي يلتقطها الآيفون، بصيغة يفتحها كل شيء.
## أسئلة
### هل تُرفَع صورتي إلى مكان ما؟
لا. يقرأ الملفَ متصفحُك على عتادك، وتتتبّعه بضع مئات من أسطر JavaScript المقدَّمة من هذا الأصل، ثم يُعاد إليك تنزيلاً. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — لا تجلب شيئاً ولا ترسل شيئاً — وتُسمّي `Content-Security-Policy` الخاصة بالصفحة كل عنوان يمكنها الاتصال به، ولا واحد منها يخصّ هذا الموقع.
### هل تحوّل صورتي الفوتوغرافية إلى SVG؟
ليس على نحو نافع، والصفحة تخبرك بذلك بدل أن تدعك تكتشفه بعد التنزيل. يحوّل التتبّع كل رقعة لون متقارب إلى شكل مستقل، فتعود الصورة الفوتوغرافية آلافاً من البقع المتراكبة وملفاً أكبر بمرات من JPEG، يُفتح ببطء ولا يشبه الصورة. ما يُتتبَّع جيداً هو صورة فيها *شكل*: شعار، أو قالب، أو توقيع، أو رسم خطي، أو ظلّ. أما صورة فوتوغرافية لشيء واحد فيقصّها إعداد *الموضوع* ظلاً مصمتاً واحداً، وذاك أمر مختلف ونافع حقاً.
### ما الفرق بين طريقتَي إيجاد الشكل؟
السؤال الذي تطرحه كل منهما. **الفاتح والداكن** يسأل هل كل بكسل أدكن من مستوى معيّن، وهذا صائب تماماً للحبر على الورق وعديم الجدوى حين يكون الموضوع والخلفية على القدر نفسه من الدُّكنة. أما **الموضوع** فيسأل ما الخلفية — يتعلّمها من شريط على طول حافة الصورة، ويقيس كل بكسل عليها، ويحتفظ بأكبر شيء ليس منها. ينجح ذلك في صورة شيء أمام خلفية متجانسة إلى حدّ ما، ويخفق في صورة مقصوصة بإحكام يخرج فيها الموضوع من ثلاث جهات، لأن الحواف التي يتعلّم منها تكون حينئذ هي الموضوع نفسه. حين يحدث ذلك، يمكنك أن تشير إلى الخلفية بنفسك.
### لماذا في الشكل المتتبَّع ثقوب، أو لماذا يفقد الأجزاء الرفيعة؟
لأنها كانت في الصورة حين صارت بتّاً واحداً لكل بكسل. شغّل *ما تلقّاه المتتبِّع* لتراه: دون نحو اثني عشر بكسلاً تكون عين الحرف قد امتلأت وساقاه قد التحمتا، ولا تتبّع يستعيد ثقباً غير موجود. العلاج في المنبع — حرّك العتبة، أو ابدأ من مسح ضوئي أكبر. وفي وضع *الموضوع*، يسدّ *سدّ الفجوات حتى* الثقوب الصغيرة، ويُغلق *املأه مصمتاً* كل ثقب لا تبلغه الخلفية من حافة الصورة.
### هل يمكنني إصلاح ما أخطأت فيه؟
نعم، ولهذا معظم الخطوة الثالثة. انقر أي شيء لا ينبغي أن يكون في الرسم فيختفي؛ انقره ثانيةً فيعود. النقرة تلتقط رقعة ذلك اللون كلها، فتزيل نقرة واحدة بقعة بأكملها أو ختماً بأكمله لا بكسلاً واحداً. والنقر على قطعة محاطة من الخلفية يملؤها. تُحفظ التصحيحات منفصلةً عن العتبة، فتحريك المنزلق بعدها لا يرميها.
### ما حجم ملف SVG؟
للشكل، أصغر من الصورة: الظلّ المتتبَّع عادةً بين كيلوبايت وخمسة، والشعار بضعة كيلوبايتات أكثر. تخبرك الصفحة بالرقم الدقيق إلى جانب التنزيل. أما للصورة الفوتوغرافية فسيكون هائلاً، وهذه أوضح علامة على أن الأداة ليست الأداة الصحيحة لذلك الملف — وبعد نحو ألف شكل منفصل تتوقف الصفحة عن الرسم وتقول ذلك.
### هل تتتبّع بالألوان؟
لا. هذه تصنع شكلاً واحداً بلون واحد، وهي الحالة التي يخرج فيها رسماً لا نسخة تصوير رديئة. التتبّع بالألوان يعني الاختزال إلى ألوان قليلة وتتبّع كل منها طبقةً مستقلة، والنتيجة تخيّب معظم من يطلبها. إن احتجت إلى اللون، فتتبّع الشكل هنا ولوّنه في برنامج الرسم الذي تستخدمه.
### ماذا أفعل بملف SVG بعدها؟
تكبّره إلى أي حجم دون أن يتشوّش، وتغيّر لونه بخاصية واحدة، وتحرّكه، وتطبعه، أو ترسله إلى آلة قطع أو ليزر. هو `<path>` واحد بلا قاعدة تعبئة يمكن أن تُضبط خطأً، فيقرؤه Illustrator وInkscape وFigma والمتصفح ومعظم برامج CNC على النحو نفسه.
### هل لحجم الصورة حدّ؟
حدّ جهازك لا حدّنا. صفحة A4 ممسوحة بدقة 300 نقطة في البوصة — نحو تسعة ميغابكسل — تُتتبَّع في جزء من الثانية. والصور الأكبر تعمل؛ تستغرق وقتاً أطول فحسب، والعمل يجري على معالجك أنت لا في طابور في مكان ما.
### هل هي مجانية، وهل أحتاج إلى حساب؟
مجانية، ولا حساب ولا تسجيل دخول ولا فترة تجريبية ولا علامة مائية. ولا حدّ لعدد الملفات أو حجمها أيضاً، لأنه لا خادم يدفع ثمنها — فالعمل يجري على جهازك أنت. يحمل الموقع إعلانات وهي التي تموّله؛ ولا تُعطى الإعلانات شيئاً عن ملفاتك.
### هل تعمل دون اتصال؟
نعم. حمّل الصفحة مرة، ثم اقطع الإنترنت، فتستمرّ في العمل. وهذا أيضاً أبسط طريقة لإثبات أن شيئاً لا يُرفع: أداة ترسل صورتك بعيداً لتتبّعها كانت لتتوقف لحظة نزع الكابل.
## كيف يمكن التحقق من وعد الخصوصية
- **صورتك لا مكان تذهب إليه.** تُسمّي Content-Security-Policy كل عنوان يمكن لهذه الصفحة الاتصال به، ولا واحد منها يخصّ هذا الموقع. لا توجد هنا نقطة تُجمَع فيها ملفاتك، ولا شيء في الشيفرة يرسلها إليها لو وُجدت.
- **لا شيء هنا يجلب شيئاً.** لا `fetch` ولا `XMLHttpRequest` ولا `sendBeacon` في أي موضع من `src/`. الأداة كلها حساب على بكسلات صورة واحدة: عتبة، وطواف بحافة ما وجدته، وشيء من ملاءمة المنحنيات.
- **لا محرّك يُنزَّل.** التتبّع عادةً برنامج شخص آخر، وعلى الويب يعني ذلك عدة ميغابايتات من الشيفرة المصرَّفة تصل قبل النقرة الأولى. لا شيء من ذلك هنا. الأمر كله بضع مئات من أسطر JavaScript العادية تُقدَّم من هذا الأصل، ولهذا أيضاً تعمل الصفحة لحظة فتحها لا بعد انتظار.
- **ما يحمّله Google، وما لا يُعطاه.** تأتي سكربتات الإعلان والقياس من Google، وزرّ التبرّع من Buy Me a Coffee. ولا يُعطى أيّ منها شيئاً عن صورتك. فكل سطر يقرؤها أو يُطبّق عليها العتبة أو يتتبّعها يُقدَّم من هذا الأصل ومدرج في المستودع.
- **تعمل دون اتصال.** اقطع الشبكة فتبقى الأداة كما هي، لأنه لم تكن فيها خطوة شبكية قط. وهذا أبسط دليل على الإطلاق.
**تحقّق بنفسك.** لا شيء مما سبق عليك تصديقه دون تحقق. تُولَّد هذه الصفحة من القوالب والإعدادات في المستودع بواسطة سكربت بناء يمكنك قراءته وتشغيله بنفسك، والنتيجة موجودة في فرع `dist` — فقارِن إذن بين ما يُقدَّم فعلا وما ينتجه بناء المصادر: https://github.com/A-Box-of-Tools/website
الملفات الجديرة بالقراءة أولا هي `config/site.toml` من أجل سياسة أمان المحتوى (Content-Security-Policy)، و`src/mask.js` لكيف تصير الصورة بتّاً واحداً لكل بكسل، و`src/contour.js` للطواف بحافة الشكل، و`src/fit.js` لكيف يصير السُّلَّم منحنيات، و`src/subject.js` لكيف تُستنتج الخلفية حين لا يكون هناك فاتح وداكن يُفصَل بينهما.
كيف تتبَّع صورة إلى SVG دون رفعها
اختر الصورة. شعار، أو قالب، أو توقيع، أو ختم، أو رسم ممسوح ضوئياً، أو ظلّ. كل ما فيه شكل واضح يُتتبَّع جيداً؛ أما صورة غرفة فلا، وفي الأسفل تحذير صريح بدل مفاجأة في النهاية. يُقرأ الملف من قرصك مباشرةً ولا يُرسَل شيء إلى أي مكان في أثناء ذلك.
قل ما الشكل. الرسم على الورق يُفصَل بـالفاتح والداكن، والمستوى يُحسَب لك. أما صورة شيء ما فلا — تمثال أحمر داكن على حجر رمادي داكن هو داكن على داكن، ولا سطوع يفصل بينهما. تلك تريد الموضوع، الذي يتعلّم ما الخلفية من شريط على طول حافة الصورة ويحتفظ بكل ما ليس منها.
انظر إلى الخط الأحمر لا إلى الإعدادات. يُرسَم خط المحيط فوق البكسلات التي جاء منها، لأنه الموضع الوحيد الذي يمكن فيه حسم المسألة: خط المحيط صائب أو خاطئ بالنسبة إلى تلك البكسلات لا غير. اسحب أياً من الصورتين لتحريكهما معاً، وأدر العجلة لتكبّر بما يكفي لترى ما يفعله الخط فعلاً.
أزل بنقرة ما لا ينبغي أن يكون هناك. بقعة، أو دبّوس، أو ختم، أو تعليق، أو ظلّ. النقرة تلتقط رقعة ذلك اللون كلها لا بكسلاً واحداً، فأنت تشير إلى شكل؛ انقره ثانيةً ليعود. أما النقر على قطعة محاطة من الخلفية فيملؤها، وهكذا يُسدّ ثقب لا ينبغي أن يكون ثقباً.
اضبط النعومة عند الحاجة فقط.التفصيل هو مقدار ما يُسمح للخط بالابتعاد عن البكسلات أثناء تبسيطه، ويُحسَب لكل شكل ما لم تقل غير ذلك. وحدّة الزوايا تقرّر كم يجب أن ينعطف خط المحيط ليبقى الانعطاف زاويةً بدل أن يُستدار. معظم الصور لا تحتاج إلى لمس أيّ منهما.
خذ ملف SVG. ملف واحد، و<path> واحد، ولا قاعدة تعبئة تقلق بشأنها: تدور خطوط المحيط في اتجاه والثقوب في الاتجاه المقابل، وهذا ما يجعل شكلاً فيه أربعون ثقباً عنصراً واحداً. يُفتح في Illustrator وInkscape وFigma والمتصفح وآلة القطع.
النسخة الأطول
كيف تتبَّع صورة إلى SVGحوِّل شعاراً أو قالباً أو توقيعاً أو ظلاً إلى خط محيط متجهي حقيقي في متصفحك. أي الصور تُتتبَّع جيداً، وأيها لن تُتتبَّع أبداً، وكيف تصلح الأجزاء التي يخطئ فيها المتتبِّع.
لا. يقرأ الملفَ متصفحُك على عتادك، وتتتبّعه بضع مئات من أسطر JavaScript المقدَّمة من هذا الأصل، ثم يُعاد إليك تنزيلاً. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — لا تجلب شيئاً ولا ترسل شيئاً — وتُسمّي Content-Security-Policy الخاصة بالصفحة كل عنوان يمكنها الاتصال به، ولا واحد منها يخصّ هذا الموقع.
هل تحوّل صورتي الفوتوغرافية إلى SVG؟
ليس على نحو نافع، والصفحة تخبرك بذلك بدل أن تدعك تكتشفه بعد التنزيل. يحوّل التتبّع كل رقعة لون متقارب إلى شكل مستقل، فتعود الصورة الفوتوغرافية آلافاً من البقع المتراكبة وملفاً أكبر بمرات من JPEG، يُفتح ببطء ولا يشبه الصورة. ما يُتتبَّع جيداً هو صورة فيها شكل: شعار، أو قالب، أو توقيع، أو رسم خطي، أو ظلّ. أما صورة فوتوغرافية لشيء واحد فيقصّها إعداد الموضوع ظلاً مصمتاً واحداً، وذاك أمر مختلف ونافع حقاً.
ما الفرق بين طريقتَي إيجاد الشكل؟
السؤال الذي تطرحه كل منهما. الفاتح والداكن يسأل هل كل بكسل أدكن من مستوى معيّن، وهذا صائب تماماً للحبر على الورق وعديم الجدوى حين يكون الموضوع والخلفية على القدر نفسه من الدُّكنة. أما الموضوع فيسأل ما الخلفية — يتعلّمها من شريط على طول حافة الصورة، ويقيس كل بكسل عليها، ويحتفظ بأكبر شيء ليس منها. ينجح ذلك في صورة شيء أمام خلفية متجانسة إلى حدّ ما، ويخفق في صورة مقصوصة بإحكام يخرج فيها الموضوع من ثلاث جهات، لأن الحواف التي يتعلّم منها تكون حينئذ هي الموضوع نفسه. حين يحدث ذلك، يمكنك أن تشير إلى الخلفية بنفسك.
لماذا في الشكل المتتبَّع ثقوب، أو لماذا يفقد الأجزاء الرفيعة؟
لأنها كانت في الصورة حين صارت بتّاً واحداً لكل بكسل. شغّل ما تلقّاه المتتبِّع لتراه: دون نحو اثني عشر بكسلاً تكون عين الحرف قد امتلأت وساقاه قد التحمتا، ولا تتبّع يستعيد ثقباً غير موجود. العلاج في المنبع — حرّك العتبة، أو ابدأ من مسح ضوئي أكبر. وفي وضع الموضوع، يسدّ سدّ الفجوات حتى الثقوب الصغيرة، ويُغلق املأه مصمتاً كل ثقب لا تبلغه الخلفية من حافة الصورة.
هل يمكنني إصلاح ما أخطأت فيه؟
نعم، ولهذا معظم الخطوة الثالثة. انقر أي شيء لا ينبغي أن يكون في الرسم فيختفي؛ انقره ثانيةً فيعود. النقرة تلتقط رقعة ذلك اللون كلها، فتزيل نقرة واحدة بقعة بأكملها أو ختماً بأكمله لا بكسلاً واحداً. والنقر على قطعة محاطة من الخلفية يملؤها. تُحفظ التصحيحات منفصلةً عن العتبة، فتحريك المنزلق بعدها لا يرميها.
ما حجم ملف SVG؟
للشكل، أصغر من الصورة: الظلّ المتتبَّع عادةً بين كيلوبايت وخمسة، والشعار بضعة كيلوبايتات أكثر. تخبرك الصفحة بالرقم الدقيق إلى جانب التنزيل. أما للصورة الفوتوغرافية فسيكون هائلاً، وهذه أوضح علامة على أن الأداة ليست الأداة الصحيحة لذلك الملف — وبعد نحو ألف شكل منفصل تتوقف الصفحة عن الرسم وتقول ذلك.
هل تتتبّع بالألوان؟
لا. هذه تصنع شكلاً واحداً بلون واحد، وهي الحالة التي يخرج فيها رسماً لا نسخة تصوير رديئة. التتبّع بالألوان يعني الاختزال إلى ألوان قليلة وتتبّع كل منها طبقةً مستقلة، والنتيجة تخيّب معظم من يطلبها. إن احتجت إلى اللون، فتتبّع الشكل هنا ولوّنه في برنامج الرسم الذي تستخدمه.
ماذا أفعل بملف SVG بعدها؟
تكبّره إلى أي حجم دون أن يتشوّش، وتغيّر لونه بخاصية واحدة، وتحرّكه، وتطبعه، أو ترسله إلى آلة قطع أو ليزر. هو <path> واحد بلا قاعدة تعبئة يمكن أن تُضبط خطأً، فيقرؤه Illustrator وInkscape وFigma والمتصفح ومعظم برامج CNC على النحو نفسه.
هل لحجم الصورة حدّ؟
حدّ جهازك لا حدّنا. صفحة A4 ممسوحة بدقة 300 نقطة في البوصة — نحو تسعة ميغابكسل — تُتتبَّع في جزء من الثانية. والصور الأكبر تعمل؛ تستغرق وقتاً أطول فحسب، والعمل يجري على معالجك أنت لا في طابور في مكان ما.
هل هي مجانية، وهل أحتاج إلى حساب؟
مجانية، ولا حساب ولا تسجيل دخول ولا فترة تجريبية ولا علامة مائية. ولا حدّ لعدد الملفات أو حجمها أيضاً، لأنه لا خادم يدفع ثمنها — فالعمل يجري على جهازك أنت. يحمل الموقع إعلانات وهي التي تموّله؛ ولا تُعطى الإعلانات شيئاً عن ملفاتك.
هل تعمل دون اتصال؟
نعم. حمّل الصفحة مرة، ثم اقطع الإنترنت، فتستمرّ في العمل. وهذا أيضاً أبسط طريقة لإثبات أن شيئاً لا يُرفع: أداة ترسل صورتك بعيداً لتتبّعها كانت لتتوقف لحظة نزع الكابل.