معظم الصور هي جزء من المحتوى الخاص بك، ولكن الرموز هي جزء من واجهة المستخدم الخاصة بك. يجب أن تتغير وتتكيف بنفس الطريقة التي يتم بها قياس نص واجهة المستخدم الخاص بك ويتكيف معه.
رسومات موجّهة يمكن تغيير حجمها
عندما يتعلق الأمر بالصور الفوتوغرافية، هناك الكثير من الخيارات لتنسيق الصورة: 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؟