البرامج التعليمية
Claude Opus 5.5: إصلاح حدود أيقونات SVG المقتطعة وغير المتناسقة
اطلب من Claude Opus 5.5 فحص نظام الإحداثيات وحدود الرسم وعرض الحد الفعلي قبل تعديل المسار.
اطلب من Claude Opus 5.5 فحص نظام الإحداثيات وحدود الرسم وعرض الحد الفعلي قبل تعديل المسار. وجود رسم صغير داخل صندوق كبير، واقتطاع الحواف، واختلاف سماكة الخط هي ثلاث مشكلات مختلفة. علاجها كلها بعبارة «كبّر الأيقونة» يخفي السبب غالبًا.
هذا أسلوب مراجعة مع هندسة محسوبة، وليس اختبار أداء لـ Opus. توضح مناقشة مطور عن حجم SVG ومحاذاته الالتباس بين العنصر الخارجي والرسم داخله؛ ولا تثبت هذه الرواية وجود خلل في المتصفح.
حدد الحدود التي تحتاج إصلاحًا
| العَرَض | الدليل المطلوب | أول تصحيح محتمل |
|---|---|---|
| الرسم صغير داخل الصندوق | viewBox وحدود المسار | فحص الفراغ الداخلي الزائد |
| اختفاء الحد عند الحافة | حدود الطلاء والنهايات والوصلات والفيض | توفير مساحة للحد |
| تغير السماكة بين الأحجام | الحجم والتحويل الفعليان | تقرير ما إذا كان التحجيم مقصودًا |
| اختلاف نسخة واحدة | CSS المحسوب والرمز المرجعي | البحث عن تجاوز للنمط قبل المسار |
تشرح مواصفة viewBox في SVG تحويل المستطيل الداخلي إلى منفذ العرض. زيادة عرض CSS تغير الصندوق المرئي، ولا تزيل الفراغ داخل الإحداثيات. سجل الحجمين وحافظ على النسب.
احسب مثالًا بسيطًا
لأيقونة مربعة ذات `viewBox="0 0 24 24"` وحد بعرض 2 وتحجيم منتظم عادي دون تحويلات أخرى:
| حجم المربع | معامل التحجيم | عرض الحد المتوقع |
|---|---|---|
| 18 CSS px | 18 / 24 | 1.5 CSS px |
| 24 CSS px | 24 / 24 | 2 CSS px |
| 48 CSS px | 48 / 24 | 4 CSS px |
هذه عروض هندسية، وليست ضمانًا لشكل تنعيم الحواف على كل شاشة. توثق MDN خاصية `vector-effect="non-scaling-stroke"` لإبقاء عرض الحد مستقلًا عن التحويلات المعنية. استخدمها فقط إذا كانت السماكة الثابتة تناسب مجموعة الأيقونات؛ فقد تحتاج الأيقونة الكبيرة حدًا أثقل. لا تصلح الخاصية تلقائيًا الفراغ أو المحاذاة أو الاقتطاع أو سلوك تكبير المتصفح.
افحص هذا الشكل المبسط عمدًا:
```html
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none"
stroke="currentColor" stroke-width="2" />
</svg>
تمتد حدود الطلاء من 2 إلى 22 على كل محور: المركز 12، ونصف القطر 9، ونصف الحد 1. جعل نصف القطر 12 يعطي حدودًا من −1 إلى 25، خارج viewBox، وقد تُقتطع إذا كان المنفذ يقص الفيض. المثال دائرة؛ أما الوصلات الزاوية والنهايات والمرشحات والتحويلات فتحتاج فحص حدود منفصلًا. هذا المثال زخرفي ومخفي عن التقنيات المساعدة، لكن الزر الذي يحتوي أيقونة فقط يحتاج اسمًا ميسرًا على عنصر التحكم.
## طلب مراجعة كامل
استعن [بدليل Opus 5.5 الرسمي](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5) مع هذا الطلب:
```text
راجع أيقونة SVG والمكوّن الذي يحتويها. المدخلات: SVG كامل أو الرمز المرجعي، وCSS المحسوب، والأحجام المستهدفة، ولقطات بهذه الأحجام، وسياسة سماكة مجموعة الأيقونات.
افصل حجم منفذ العرض وإحداثيات viewBox وحدود الهندسة وحدود الطلاء ومحاذاة التخطيط. احسب تحجيم الحد لكل حجم وفق التحويلات الفعلية. افحص عرض الحد وvector-effect والنهايات والوصلات وoverflow والمرشحات وتجاوزات CSS. حدد المعلومات الناقصة بدل افتراض سلوك افتراضي.
اقترح أصغر فرق يصلح المشكلة المعروضة. حافظ على هوية الشكل ونسبه. لا تضف non-scaling-stroke تلقائيًا لكل الأيقونات. وضح أثر التعديل على النسخ الأخرى للرمز. أعد جدول تشخيص والتعديل ومصفوفة اختبار بأحجام 18 و24 و48 بكسل CSS على خلفيتين فاتحة وداكنة. افصل الحسابات عن ملاحظات المتصفح، ولا تدّع تنفيذ اختبار بصري دون نتائج. حافظ على الأسماء الميسرة لعناصر التحكم التفاعلية.اختبر داخل المكوّن الحقيقي
اعرض النسخة الحالية والمعدلة جنبًا إلى جنب بالأحجام الثلاثة. افحص الحواف الأربع وقارن الرموز المجاورة من المجموعة نفسها. افحص حالات التمرير والتركيز والتعطيل إذا غيرت النمط. احفظ عرض الحد المحسوب وقاعدة CSS المعنية مع اللقطة.
جرّب الرمز المشترك في أكثر من مكوّن؛ فقد يصلح شريط أدوات ويضر آخر. افحص الخلفيتين لأن التباين يؤثر في السماكة الظاهرية. إذا خالفت اللقطة الحساب، فابحث عن تحويلات إضافية وCSS قبل تعديل الهندسة مجددًا.
قرارات شائعة
**هل نمنع تحجيم كل الحدود؟** لا. اختر سياسة مقصودة للمجموعة وتحقق من كل حجم مستهدف.
**هل يصلح تغيير viewBox الاقتطاع؟** أحيانًا، لكنه يغير الحجم والمحاذاة أيضًا. أعد فحص المجموعة المتأثرة.
**هل تكفي لقطة شاشة؟** تحدد العَرَض؛ تفسيره يحتاج SVG والأنماط المحسوبة وأبعاد العرض.
بعد اعتماد أيقونات الواجهة، استخدم Panelly Studio لإنشاء صور ترويجية كاملة بوصف بصري متسق. أما نصوص مخططات SVG فتغطيها مراجعة تسميات المخططات من حيث الموضع والوضوح. لا يدّعي أي من المسارين تكامل Panelly مع Opus.
