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

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

Adam Argyle

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

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

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

סקירה כללית

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

SVG יכול לגדול ולהתרחב בלי אובדן איכות, וגודלם עשוי להיות קטן מאוד, הם עלולים שירות 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>

שימו לב למזהה הקריא (ID) של בודקים אנושיים סלקטורים #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, כדי לאמת שהיא בשימוש. פותחים את החלונית 'רשת' ב'כלי פיתוח'. סינון לפי תמונות וחיפוש סמל האתר:

צילום מסך של החלונית &#39;רשת&#39; מכלי פיתוח, עם מסנן שמחפשים 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>

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

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

סיכום

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

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

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