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

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

Adam Argyle

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

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

אם אתם מעדיפים סרטון, הנה גרסה של הפוסט הזה ב-YouTube:

סקירה כללית

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

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

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

כרטיסיות בהירות וכרטיסיות כהות בכל דפדפן, שמספקות סקירה כללית של הסמל המותאם אישית מלמעלה למטה: 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 יהיה סמל favicon גמיש.

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

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

הסמל החדש עשוי להיראות זהה לגרסת .ico, לכן צריך לוודא שהוא נמצא בשימוש. פותחים את החלונית Network (רשת) ב-DevTools. מסננים לפי תמונות ומחפשים את הסמל של האפליקציה:

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

סגנונות

כמו ב-HTML, אפשר להוסיף תג <style> לתג ה-Markup לשימוש ברמת המסמך:

<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), אבל השארתי את הכובע המשני הוורוד.

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

סיכום

עכשיו, אחרי שהסברתי איך עשיתי את זה, איך היית? 🙂

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

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