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

סקירה כללית בסיסית על יצירת סמל דפדפן דינמי.

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 ואופטימיזציה שלהם בכלים לעיצוב.

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

צילום מסך של חלונית הרשת מ-DevTools עם מסנן שבו בוצע חיפוש של favicon והמשאב 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>

צילום מסך של DevTools שבו מוצגת שאילתה המדיה של העיצוב הכהה שמחליפת את צבע המילוי של העיניים והאף ב-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), אבל השארתי את הכובע הוורוד.

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

סיכום

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

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

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