محوّل الحد الخارجي SVG إلى تعبئة — حوّل الخطوط إلى مسارات مملوءة

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

ما هي هذه الأداة؟

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

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

لماذا تستخدمها؟

تعمل مع عناصر path وline وpolyline وpolygon وrect وcircle وellipse — وليس فقط <path> — باستخدام طريقة أخذ عينات موحدة واحدة.
تحافظ على التعبئة الأصلية للشكل (إن وُجدت) كطبقة منفصلة أسفل تعبئة الحد الخارجي الجديدة، لذا تُحوَّل الأشكال المملوءة والمحددة بحد خارجي في آن واحد بشكل صحيح.
معاينة جنبًا إلى جنب قبل/بعد لتأكيد التحويل بصريًا قبل نسخ النتيجة.
يعمل بالكامل داخل متصفحك — الـSVG الذي تلصقه لا يُرفع إلى أي مكان أبدًا.
مجاني وفوري، دون حد لحجم الملف عدا ما يستطيع متصفحك عرضه.

كيفية الاستخدام

الصق كود SVG الخاص بك في مربع النص (مثال جاهز معبأ مسبقًا).
انقر على "Convert strokes to fills".
قارن المعاينة قبل/بعد للتأكد من أن النتيجة تبدو صحيحة.
انقر على "Copy SVG" لنسخ الكود المحوَّل الخالي من الحدود الخارجية.

مثال

الإدخال

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

الناتج

عنصر <path fill="#3B82F6"> واحد يتتبع محيطه جانبي المنحنى الأصلي، بفاصل 12 وحدة، بلا أي سمة stroke على الإطلاق.

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

الأسئلة الشائعة

لماذا تظهر الزوايا الحادة مستديرة بدلًا من مدببة (miter)؟

هذا تبسيط معروف ومقصود في طريقة أخذ العينات: أخذ عينات كثيفة من النقاط على طول المسار ينتج بشكل طبيعي وصلات ونهايات مستديرة، بغض النظر عن قيمة stroke-linejoin أو stroke-linecap الأصلية. إعادة بناء وصلات miter أو bevel دقيقة يتطلب خوارزمية مختلفة وأكثر تعقيدًا (تقاطع أجزاء الخط عند كل رأس) لا تنفذها هذه الأداة. بالنسبة لمعظم استخدامات الأيقونات والرسوم التوضيحية يكون الفرق البصري طفيفًا، لكن إذا احتجت وصلات miter دقيقة، فإن ميزة "تحويل الحد الخارجي إلى محيط" في محرر متجهات مخصص ستكون أدق.

هل تتعامل الأداة مع الحدود الخارجية المتقطعة (stroke-dasharray)؟

لا — تعامل الأداة كل حد خارجي على أنه متصل، وتتجاهل stroke-dasharray/stroke-dashoffset. سيُحوَّل الحد الخارجي المتقطع وكأنه متصل، ما يغيّر مظهره. إذا كان SVG الخاص بك يستخدم حدودًا خارجية متقطعة، فهذه الأداة ليست الخيار المناسب لتلك الأشكال تحديدًا.

لماذا لم يتم تحويل أي شيء؟

تحوّل الأداة فقط العناصر التي تملك في آن واحد لون حد خارجي (غير "none") وقيمة stroke-width موجبة، سواء كانت مضبوطة كسمات أو ضمن style الخاص بالعنصر نفسه. إذا كان SVG الخاص بك يضبط الحد الخارجي عبر فئة CSS خارجية لا يستطيع المتصفح حلّها داخل المعاينة المعزولة لهذه الأداة، أو عبر كتلة <style> تشير إلى فئات، فقد لا يُحل النمط المحسوب بشكل صحيح — جرّب ضبط stroke وstroke-width كسمات مباشرة على الشكل بدلًا من ذلك.

متى يجب تحويل الحدود الخارجية إلى تعبئات، ومتى يجب الإبقاء عليها؟

إذا كنت لا تزال في مرحلة التصميم، أبقِ الحدود الخارجية — تبقى stroke-width رقمًا واحدًا قابلًا للتعديل، وهو ما تفقده بعد التحويل. إذا كنت تصدّر إلى مسار معالجة يتعامل بشكل سيئ مع الحدود الخارجية (مولدات خطوط الأيقونات، بعض محركات الألعاب أو مصدّرات PDF)، حوّل كخطوة تصدير أخيرة واحتفظ بالملف الأصلي ذي الحد الخارجي كمصدر قابل للتعديل، لأن التحويل باتجاه واحد فقط.

هل يجعل التحويل ملف SVG أكبر حجمًا؟

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

هل يُنقل stroke-opacity إلى التعبئة المحوَّلة؟

لا — يأخذ المسار المحوَّل لون الحد الخارجي كتعبئة له لكن بشفافية كاملة (بلا شفافية)؛ تُهمَل قيمة stroke-opacity الموجودة على الشكل الأصلي. إذا احتجت الحفاظ على الشفافية، أضف fill-opacity يدويًا بنفس القيمة إلى المسار المحوَّل بعد نسخ النتيجة.