خطوات إبداعية عملية
خط SVG غير المتأثر بالتحجيم: مقارنة الأيقونات بثلاثة أحجام
قد يصبح محيط أيقونة كوب شبه غير مرئي عند تصغيرها من رسم كبير إلى شريط أدوات. الاحتفاظ بمسار SVG نفسه لا يعني بالضرورة الاحتفاظ بثقل الخط المرئي نفسه.
استخدمنا محيط كوب لعلامة Cedar Cup الخيالية لمقارنة التحجيم الافتراضي مع non-scaling-stroke عند 24 و48 و96 بكسل CSS. أنشأ Ciyo المصدر ومعاينة رسمها المتصفح. تساعد المقارنة على اختيار السلوك، لكنها لا تجعل الأيقونة المفصلة مناسبة تلقائياً للأحجام الصغيرة.
احسب سمك الخط المتوقع أولاً
يستخدم SVG لدينا viewBox بحجم 100×100 وstroke-width=2 لكل واحد من خمسة مسارات. مع تحجيم منتظم ومن دون تحويل إضافي، يكون السمك الافتراضي على الشاشة 2 × الحجم المعروض / 100؛ أي 0.48 و0.96 و1.92 بكسل CSS.
إضافة vector-effect="non-scaling-stroke" إلى المسارات المرسومة تطلب خطاً يقاوم تحجيم الشكل الهندسي. في هذه المقارنة يبقى السمك المستهدف 2 بكسل CSS. تحدد مواصفة نظام إحداثيات SVG هذا السلوك، بينما يصف الجدول أحجام مثالنا تحديداً.
| حجم الأيقونة | الخط الافتراضي | الخط غير المتأثر بالتحجيم |
|---|---|---|
| 24×24 بكسل CSS | 0.48 بكسل CSS | 2 بكسل CSS |
| 48×48 بكسل CSS | 0.96 بكسل CSS | 2 بكسل CSS |
| 96×96 بكسل CSS | 1.92 بكسل CSS | 2 بكسل CSS |
اطلب هندسة متطابقة في الصفين
أنشئ مشروعاً جديداً في Ciyo واطلب صفحة HTML للمقارنة تضم ست أيقونات SVG مضمّنة. أبقِ كل مسار متطابقاً بين النسختين وغيّر vector-effect فقط. إذا أعاد الوكيل رسم الأيقونة الصغيرة، فأنت تقارن قرارين تصميميين في الوقت نفسه.
اطلب SVG القابل للتحرير وشيفرة HTML. في جلستنا بقيت هذه الصيغ في مساحة الوكيل حتى لصقها في المحادثة؛ وقبلت اللوحة معاينة PNG. تحافظ الأمثلة المرتبطة على هندسة الأيقونة المقدمة وقياسات المتصفح.
للعلامة الخيالية Cedar Cup، أنشئ ملف HTML قابلاً للتنزيل يقارن أيقونة كوب بسيطة ذات محيط SVG مضمّن، مع viewBox="0 0 100 100" وstroke-width="2"، بأحجام 24 و48 و96 بكسل CSS. قارن التحجيم الافتراضي مع vector-effect="non-scaling-stroke" على كل مسار مرسوم. استخدم هندسة مسارات متطابقة دون تعبئة. اشرح أن non-scaling-stroke يحافظ على سمك الخط على الشاشة ولا يضمن الجودة البصرية للحجم الصغير. سلّم SVG مستقلاً مصححاً وصفحة المقارنة HTML ومعاينة PNG على اللوحة. استخدم أدوات الشيفرة فقط، دون مولد صور أو فيديو مدفوع. تحقق برمجياً من الهندسة والأحجام. هذا مثال خيالي لأيقونة واجهة.احكم على الأيقونة الصغيرة من المعاينة الفعلية
تُظهر المعاينة الفعلية خطوطاً تزداد وضوحاً في الصف الافتراضي، ومحيطاً أثقل عند 24 بكسل في الصف غير المتأثر بالتحجيم. عند أصغر حجم تتزاحم تفاصيل البخار. قد يكون السمك الثابت ثقيلاً أكثر من اللازم بالنسبة إلى المساحة المتاحة.
رسم Ciyo المقارنة في Chromium وأبلغ عن السماكات المتوقعة على الشاشة. احتفظنا بملف HTML وفحصنا بشكل مستقل صناديق SVG الستة وهندسة المسارات الخمسة. تصف القيم المحسوبة الهندسة؛ أما بكسلات الحواف الملساء فتحتاج إلى تقدير بصري.
استخدم رسماً خاصاً بالحجم الصغير عندما تضيع التفاصيل
في شريط الأدوات، بسّط التفاصيل التي تنغلق وافحص الأيقونة بحجم CSS الفعلي. لا يمنح الاحتفاظ بخط سماكته بكسلان مساحة إضافية بين خطوط البخار. بعد اختيار سلوك التحجيم، فكّر في تقليل المسارات أو إعداد نسخة مخصصة للأحجام الصغيرة.
افحص الثقل البصري عند 24 بكسل
افصل معنى التفاعل عن سمك الخط. وفّر اسماً ميسراً لعنصر التحكم وتبايناً كافياً في السمة الفعلية. المعاينة مقارنة بصرية وليست تدقيقاً لإمكانية الوصول في واجهة مكتملة.
أعد الفحص بعد الموضع والتصدير
ضع الأيقونة في مكوّنها الفعلي بحجم CSS والتحويلات الفعلية. افحص السمتين الفاتحة والداكنة. اختبر احتفاظ المحرر أو أداة التصدير المستقبلة بـvector-effect قبل اعتماد النتيجة كأصل نهائي.
يقارن هذا المثال التحجيم المنتظم داخل صفحة Chromium محفوظة. لا يثبت السلوك في جميع محررات المتجهات أو الطابعات أو المتصفحات. اختر النسخة التي تخدم مكوّنك ثم احتفظ بمصدرها مع تسليم التصميم.
أسئلة عملية
هل يحافظ non-scaling-stroke على وضوح كل التفاصيل؟
لا. فهو يتحكم في سلوك الخط. قد تبقى الفراغات الصغيرة والمسافات الضيقة وتنعيم الحواف صعبة القراءة.
لماذا يبلغ الخط الافتراضي 0.48 بكسل فقط عند حجم 24 بكسل؟
يتحجم الخط ذو الوحدتين بنسبة 24/100 في viewBox المنتظم ذي 100 وحدة المستخدم في هذا المثال.
هل ينبغي لكل أيقونة استخدام خطوط غير متأثرة بالتحجيم؟
اختر بعد فحص الأحجام الفعلية. قد يكون الخط الثابت أثقل مما يناسب أيقونة صغيرة.
قارن الأيقونة في موضع استخدامها
ابدأ بمثال واحد تم التحقق منه في Ciyo. احتفظ بالأصل وافحص الملف المصدّر قبل استخدامه في مشروعك.