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

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

Adam Argyle

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

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

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

סקירה כללית

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

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

צילום מסך של החלונית Network מ-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>

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

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

סיכום

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

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

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