יצירת סמל אתר מותאם

סקירה כללית בסיסית איך ליצור סמל אתר שניתן להתאמה.

Adam Argyle

בפוסט הזה רציתי לשתף איתכם את רעיון הבנייה של סמל אתר מותאם באמצעות SVG. אפשר לנסות את ההדגמה.

כרטיסיות בדפדפן מותאמות לשינויים בעיצוב הבהיר והכהה של מערכת MacOS. להתנסות בגרסת ההדגמה

אם ברצונך ליצור סרטון, הנה גרסת YouTube של הפוסט הזה:

סקירה כללית

סמל אתר בהתאמה אישית הוא דרך מצוינת לשפר פרויקט אינטרנט. הוא מוצג בכרטיסיות של דפדפן המחשב וגם בתוך קוראי 'שמירה למועד מאוחר יותר', פוסטים אחרים בבלוג המקשרים לאתר שלך ועוד. בדרך כלל יש לעשות זאת באמצעות קובץ מסוג .ico, אבל לאחרונה דפדפנים אפשרו להשתמש בפורמט SVG, פורמט וקטורי. באמצעות שיפור מתקדם אפשר להציג סמלי אתרים נתמכים היטב של .ico ולשדרג אותם ל-.svg אם זמין.

SVG יכול להתאים לעומס (scaling) מבלי לפגוע באיכות, ויכול להיות שהגודל שלו יהיה קטן מאוד. יכול להיות שיש בהם גם CSS מוטמע, ואפילו שאילתות מדיה מוטמעות. כלומר, אם נעשה שימוש בסמל SVG של אפליקציית קורא או בסרגלי סימניות, יש סיכוי שהמשתמש יקבל סמל רלוונטי של עיצוב (בהיר או כהה), בגלל סגנונות של העדפות כהות שקיימים בתוך ה-SVG. לאחר מכן, פורמט ה-SVG מתאים את עצמו לפי העיצוב המוטמע שלו, בהתאם להעדפות המשתמש הבהירות והכהות.

דוגמאות של סמלי אתר בהירים וכהים שקל להבחין ביניהם.

כרטיסיות בהירות וכהות בכל דפדפן, שמספקות סקירה כללית של הסמל המותאם מלמעלה למטה: Safari, Firefox, Chrome.
כרטיסיות בהירות וכהות בכל דפדפן שמספקות סקירה כללית של הסמל המותאם מלמעלה למטה: Safari, Firefox, Chrome.

Markup

תגי העיצוב של SVG הם בפורמט XML באמצעות סיומת .svg של סוג הקובץ, שמאפשרת לשמור סוגי קוד דינמיים יותר.

מתחילים ב-favicon.svg

צרו קובץ חדש בשם favicon.svg והוסיפו את הדברים הבאים:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

זה קובץ ה-SVG שלי, בגודל viewBox שרלוונטי לגרפיקה שלי:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

הוספת צורות ונתיבים

בשלב הבא מוסיפים את קוד הנתיב בפורמט SVG. לעיתים קרובות תצטרכו לפתוח את קובץ ה-SVG בעורך קוד, אבל הקוד בדרך כלל לא ידידותי לבני אדם. כאן יש מדריך מעולה לייצוא ולאופטימיזציה של SVG מכלי עיצוב.

הגרפיקה של אתגר GUI הגיעה ממעצב שיצר אותה ב-Adobe Illustrator. ביצעתי אופטימיזציה רבה. העברתי את המסמך ב-SVGOMG ואז ערכתי ידנית את החלקים החסרים.

הנה דוגמה לקבוצה של נתיב הגרפיקה skull משלי, אחרי שניקיתם אותה:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <g id="skull">
    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
  </g>
</svg>

שימו לב לבוררי המזהים הקריאים לאנשים, כמו #eyes-and-nose ומחלקות, כמו .favicon-stroke. קיבלתי את התגובות מהעריכה שלי, בהכנה ל-CSS. אין צורך להוסיף מחלקות ותעודות מזהות כדי שקובץ ה-SVG יהיה סמל אתר שניתן להתאמה.

בתג <head> של ה-HTML, אחרי סמל האתר .ico, מוסיפים את הפרטים הבאים:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

הסמל החדש עשוי להיראות זהה לגרסה של .ico, לכן חשוב לאמת שהוא נמצא בשימוש. פותחים את החלונית 'רשת' של כלי הפיתוח. סינון לפי תמונות וחיפוש סמל אתר:

צילום מסך של החלונית Network מכלי הפיתוח, עם מסנן שבו בוצע חיפוש של סמל האתר והמשאב favicon.svg מודגש.

סגנונות

בדומה ל-HTML, אפשר להוסיף תג <style> לתגי העיצוב לשימוש מול היקף המסמך הזה:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

גרסת העיצוב הבהיר תהיה צבע ברירת המחדל של ה-SVG של סמל האתר. הסגנונות שכתבתי היו בעיקר צבעי קו ומילוי:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    .favicon-stroke {
      stroke-width: 8px;
      stroke: #8929ff;
    }
    #skull-outline { fill: white }
    #eyes-and-nose, #hat-outline { fill: #8929ff }
    #hat-fill, #hat-bill { fill: #e662e6 }
  </style>
  …
</svg>

דוגמה לתצוגה מקדימה של סמל אתר בעיצוב בהיר.

עכשיו החלק הכי כיפי הוא עיצוב גרסת העיצוב הכהה של סמל האתר. הסגנונות האלה ייכנסו לשאילתת מדיה בתוך תג הסגנון:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  …
</svg>

צילום מסך של כלי הפיתוח, שבו מוצגת שאילתת המדיה בעיצוב כהה שמחליפה את צבע העיניים והאף של קובץ ה-SVG.

המכר שלי הגיע כך:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      .favicon-stroke { stroke: #343a40 }
      #skull-outline { fill: #adb5bd }
      #hat-outline { fill: #343a40 }
      #eyes-and-nose { fill: #343a40 }
    }
  </style>
  …
</svg>

דוגמה לתצוגה מקדימה של סמל אתר בעיצוב כהה.

בחרתי להחליף את הגבולות הסגולים הבהירים באפור כהה ונינוח (#343a40), שיניתי את צבע עצמות הגולגולת מלבן לאפור בהיר (#adb5bd), אבל השארתי את הכובע המשני הוורוד.

תצוגה מקדימה של סמלים בהירים וכהים זה לצד זה.

סיכום

עכשיו, אחרי שאת יודעת איך עשיתי את זה, איך היית רוצה ‽ 🙂

בואו נגוון את הגישות שלנו ונלמד את כל הדרכים לבנות באינטרנט. צור הדגמה (דמו), ציוץ לי קישורים ואני אוסיף אותה לקטע 'רמיקסים של הקהילה' למטה!

רמיקסים של הקהילה