الرموز

معظم الصور هي جزء من المحتوى، ولكن الرموز هي جزء من واجهة المستخدم. ويجب أن يتم تغيير حجمها وتكييفها بالطريقة نفسها التي يتم بها تغيير حجم نص واجهة المستخدم وتكييفه.

رسومات موجّهة يمكن تغيير حجمها

عندما يتعلق الأمر بالصور الفوتوغرافية، تتوفّر العديد من الخيارات لتنسيق الصورة: JPG وWebP وAVIF. بالنسبة إلى الصور غير الفوتوغرافية، يمكنك الاختيار بين تنسيق رسومات الشبكة المحمولة (PNG) وتنسيق رسومات موجّهة يمكن تغيير حجمها (SVG).

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

ملفات PNG (وJPG وWebP وAVIF) هي صور نقطية. تخزّن صور Bitmap المعلومات على شكل وحدات بكسل. في ملف 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، يمكنك قراءة مقالة Una حول تلوين خلفيات SVG.
• كتبت "سارة سويدان" مقالة حول أزرار الرموز التي يمكن الوصول إليها.
• كتب "سكوت أوهارا" عن ترميز الصور وملفات SVG التي يمكن الوصول إليها حسب السياق.
• إذا كنت تستخدم أداة تصميم رسومات لتصدير ملفات SVG، استخدِم SVGOMG لتحسين الناتج.

تُعدّ الرموز جزءًا مهمًا من العلامة التجارية لموقعك الإلكتروني. بعد ذلك، ستتعرّف على كيفية جعل جوانب أخرى من علامتك التجارية متجاوبة من خلال ميزة تطبيق السمات.

اختبِر معلوماتكَ

اختبِر معلوماتك حول الرموز