معظم الصور هي جزء من المحتوى الخاص بك، لكن الأيقونات جزء من واجهة المستخدم الخاصة بك. يجب أن يتغير حجمها وتتكيف بنفس الطريقة التي يتم بها تغيير وتكيف نص واجهة المستخدم.
رسومات موجّهة يمكن تغيير حجمها
تتوفّر خيارات متعددة لتنسيق الصور: JPG وWebP وAVIF. بالنسبة إلى الصور غير الفوتوغرافية، يمكنك الاختيار بين تنسيق رسومات الشبكة المحمولة (PNG) وتنسيق الرسومات الموجّهة التي يمكن تغيير حجمها (SVG).
يمكن استخدام كل من ملفات PNG وSVG بشكل جيد في التعامل مع المناطق ذات الألوان المسطحة، وكلاهما يتيح إضافة خلفيات شفافة لصورك.
إذا كنت تستخدم ملفًا بتنسيق PNG، ستحتاج على الأرجح إلى إنشاء نُسخ متعددة من الصورة بأحجام مختلفة واستخدام السمة srcset على العنصر img لجعل الصورة متجاوبة. إذا كنت تستخدم رسومات SVG، سيكون مستجيبًا بشكل افتراضي.
ملفات PNG (وJPG وWebP وAVIF) هي صور نقطية. تخزن صور الصور النقطية المعلومات على شكل وحدات بكسل. في رسومات SVG، يتم تخزين المعلومات كتعليمات رسم. عندما يقرأ المتصفّح ملف SVG، يتم تحويل التعليمات إلى وحدات بكسل. وأفضل ما في الأمر أن هذه التعليمات نسبية. وبغض النظر عن الأبعاد التي تستخدمها لوصف الخطوط والأشكال، يتم عرض كل شيء بالدرجة المناسبة تمامًا. وبدلاً من إنشاء رسومات SVG متعددة بأحجام مختلفة، يمكنك إنشاء ملف SVG واحد يعمل بجميع الأحجام. ليس من الضروري استخدام السمة srcset.
<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">
يُستخدم ملف XML لكتابة التعليمات في ملف SVG. هذه لغة ترميزية، مثل HTML.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
ويمكنك أيضًا وضع رسومات موجّهة يمكن تغيير حجمها (SVG) في HTML.
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
<figcaption>
A description of the image.
</figcaption>
</figure>
وفي حال تضمين رسومات SVG مماثلة، لن يحتاج المتصفّح إلى تقديم طلب إضافي. وسيصبح تنزيل الصورة متوفّرًا بتنسيق HTML ...ضمن ترميز HTML. كما ستكتشف قريبًا، يمنحك تضمين رسومات SVG مثل هذه مزيدًا من التحكم في نمطها أيضًا.
الأيقونات والنصوص
غالبًا ما تتميز صور الأيقونات بأشكال بسيطة على خلفية شفافة. يعد تنسيق SVG مثاليًا للأيقونات.
إذا كان لديك زر أو رابط به نص وأيقونة بداخله، فإن الأيقونة تكون عرضًا تقديميًا. إنه النص المهم. عند استخدام عنصر img، تشير السمة alt الفارغة إلى أنّ الصورة عرضية.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
نظرًا لأن CSS مخصصة للعرض التقديمي، يمكنك وضع الرمز في CSS كصورة خلفية.
<button class="menu">
Menu
</button>
.menu {
background-image: url(hamburger.svg);
background-position: 0.5em;
background-repeat: no-repeat;
background-size: 1em;
padding-inline-start: 2em;
}
إذا وضعت رسومات SVG داخل رمز HTML، استخدِم السمة aria-hidden لإخفائه من التكنولوجيا المساعِدة.
<button class="menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
Menu
</button>
الرموز المستقلة
استخدم النص داخل الأزرار والروابط الخاصة بك إذا كنت تريد أن يكون الغرض منها واضحًا. يمكنك استخدام أيقونة بدون أي نص، ولكن لا تفترض أن الجميع يفهمون معنى أيقونة معين. إذا كانت لديك شكوك، يمكنك إجراء اختبار مع مستخدمين حقيقيين.
إذا قررت استخدام أيقونة بدون أي نص مصاحب، فلن يعد الرمز عرضًا تقديميًا. لا تُعد صورة الخلفية في CSS طريقة مناسبة لعرض الرمز. يجب إعطاء الرمز اسمًا يسهل الوصول إليه في HTML.
إذا استخدمت عنصر img، سيحصل الرمز على اسم يمكن الوصول إليه من السمة alt.
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
يتوفر خيار آخر وهو وضع الاسم الذي يمكن الوصول إليه على الرابط أو الزر نفسه وإعلان أن الصورة هي عرضية. استخدِم السمة aria-label لتوفير اسم يمكن الوصول إليه.
<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>
إذا وضعت SVG داخل رمز HTML، استخدِم السمة aria-label على الرابط أو الزر لمنحه اسمًا يمكن الوصول إليه واستخدِم السمة aria-hidden على الرمز.
<button aria-label="Menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
</button>
أنماط الرموز
إذا ضمّنت رموز SVG مباشرةً في رمز HTML، يمكنك تصميم أجزاء منها مثل أي عنصر آخر في صفحتك. لا يمكنك تنفيذ ذلك إذا استخدمت عنصر img لعرض الرموز الخاصة بك.
في المثال التالي، تتضمّن عناصر rect داخل الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) القيمة fill التي تبلغ blue لمطابقة الأنماط لنص الزر.
button {
color: blue;
}
button rect {
fill: blue;
}
يمكنك تطبيق نمطَي hover وfocus أيضًا.
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
المراجِع
- إذا كنت بحاجة إلى تصميم ملفات SVG على شكل صور خلفية في CSS، فاقرأ مقالة "أونا" حول تلوين خلفيات SVG.
- كتبت سارة سويدان عن أزرار الرموز التي يمكن الوصول إليها.
- كتب "سكوت أوهارا" مقالة حول ترميز الصور وملفات SVG التي يمكن الوصول إليها من حيث السياق.
- إذا كنت تستخدم أداة تصميم الرسومات لتصدير ملفات الرسومات الموجّهة التي يمكن تغيير حجمها (SVG)، استخدِم SVGOMG لتحسين الناتج.
تُعد الأيقونات جزءًا مهمًا من العلامة التجارية لموقعك. ستتعرف في الخطوة التالية على كيفية جعل جوانب أخرى من علامتك التجارية متجاوبة مع مختلف الأجهزة بفضل فعالية التصميم.
التحقّق من استيعابك
اختبر معلوماتك حول الأيقونات
يمكن أن يعالج الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) أي كثافة وحدات بكسل باستخدام ملف واحد أو كتلة رموز <svg>.
.png أو .jpg، لا يحتاج رسومات SVG إلى srcset أو عنصر <picture>.ما مزايا كود SVG الموجودة مباشرة في HTML؟