viewBox في SVG والتحجيم المتجاوب

تحدد الخاصيتان width وheight في SVG الحجم المعروض في DOM. وتحدد الخاصية viewBox فضاء الإحداثيات الداخلي. وهما مستقلتان؛ فعند استخدام viewBox بقيمة "0 0 100 100" مع width="200" وheight="200"، يُكبَّر فضاء الإحداثيات بمقدار الضعف.

viewBox="min-x min-y width height". والأكثر شيوعًا هو: viewBox="0 0 100 100"، إذ يحدد فضاء إحداثيات بأبعاد 100x100 يبدأ من نقطة الأصل. تشير قيم الإحداثيات في SVG إلى هذا الفضاء، وليس إلى وحدات البكسل.

لإنشاء SVG متجاوب، احذف الخاصيتين width وheight (أو اضبطهما على 100%)، واترك viewBox يحدد النسب. أضف CSS: svg { width: 100%; height: auto; }. يتكيف SVG مع حجم الحاوية مع الحفاظ على نسبة العرض إلى الارتفاع.

تتحكم preserveAspectRatio في كيفية ملاءمة viewBox لنافذة عرض SVG عند اختلاف نسب العرض إلى الارتفاع. القيم المتاحة هي: "xMidYMid meet" (القيمة الافتراضية — إضافة أشرطة حول المحتوى)، و"xMidYMid slice" (اقتصاص المحتوى لملء المساحة)، و"none" (تمديد المحتوى لملاءمة المساحة دون الحفاظ على نسبة العرض إلى الارتفاع).

يؤدي تغيير min-x وmin-y إلى تحريك الجزء المرئي من فضاء إحداثيات SVG. تعرض viewBox="50 50 100 100" المنطقة الممتدة من (50,50) إلى (150,150). يتيح ذلك تنفيذ التحريك التفاعلي من خلال تحديث قيم viewBox باستخدام JavaScript.

قلّل أبعاد viewBox للتكبير: تعرض viewBox="25 25 50 50" منطقة أصغر، وتكبّرها لملء عنصر SVG. وزِد الأبعاد للتصغير. حدّث viewBox عند وقوع أحداث عجلة التمرير لتنفيذ تكبير تفاعلي دون تغيير مقياس عنصر SVG.

يتمدد SVG الموجود داخل وسم img بشكل متجاوب باستخدام object-fit، لكن لا يمكن تنسيقه باستخدام CSS أو التحكم فيه باستخدام JavaScript. أما SVG المضمّن، فيمكن التحكم فيه بالكامل باستخدام CSS وJavaScript، لكنه يزيد حجم HTML. اختر الأسلوب وفقًا لاحتياجات التفاعل.

تستخدم SVG الخاصة بالأيقونات viewBox ثابتًا، مثل "0 0 24 24"، ومن دون width وheight، ما يتيح لـ CSS تحديد حجمهما: .icon { width: 1.5rem; height: 1.5rem; }. يضمن viewBox تكبير الأيقونات وتصغيرها بشكل صحيح عند أي حجم مع الحفاظ على وضوح الرسم المتجهي.

عرّف الأيقونات داخل عناصر <symbol viewBox="0 0 24 24"> الموجودة داخل SVG مخفي. وأشِر إليها باستخدام: <use href="#icon-name">. يمكن أن يملك كل عنصر use قيمه الخاصة لـ width وheight وfill وcolor، ما يتيح استخدام ملف sprite واحد لجميع الأيقونات.

ترث SVG التي تستخدم fill="currentColor" خاصية CSS المسماة color من العنصر أو العنصر الأب. اضبط color: red على SVG أو أحد العناصر الأب، وستُملأ الأيقونة باللون الأحمر تلقائيًا. يتيح ذلك للأيقونات أحادية اللون اتباع لون النص دون تنسيق خاص بـ SVG.

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

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

يحدد viewBox في SVG فضاء إحداثيات داخليًا مستقلًا عن الحجم المعروض بالبكسل، ما يتيح التحجيم المتجاوب. يؤدي ضبط width:100% وheight:auto مع استخدام viewBox إلى تكيف SVG مع أي حاوية. ويوفر نمط sprite القائم على symbol+use، وتطبيق السمات باستخدام currentColor، والتحكم عبر preserveAspectRatio مجموعة أدوات متكاملة لاستخدام SVG بمرونة وبسمات قابلة للتغيير.