סקירה כללית בסיסית איך ליצור סמל אתר שניתן להתאמה.
בפוסט הזה רציתי לשתף איתכם את רעיון הבנייה של סמל אתר מותאם באמצעות SVG. אפשר לנסות את ההדגמה.
אם ברצונך ליצור סרטון, הנה גרסת YouTube של הפוסט הזה:
סקירה כללית
סמל אתר בהתאמה אישית הוא דרך מצוינת לשפר פרויקט אינטרנט. הוא מוצג בכרטיסיות של דפדפן המחשב וגם בתוך קוראי 'שמירה למועד מאוחר יותר', פוסטים אחרים בבלוג המקשרים לאתר שלך ועוד. בדרך כלל יש לעשות זאת באמצעות קובץ מסוג .ico
, אבל לאחרונה דפדפנים אפשרו להשתמש בפורמט SVG, פורמט וקטורי. באמצעות שיפור מתקדם אפשר להציג סמלי אתרים נתמכים היטב של .ico
ולשדרג אותם ל-.svg
אם זמין.
SVG יכול להתאים לעומס (scaling) מבלי לפגוע באיכות, ויכול להיות שהגודל שלו יהיה קטן מאוד. יכול להיות שיש בהם גם CSS מוטמע, ואפילו שאילתות מדיה מוטמעות. כלומר, אם נעשה שימוש בסמל SVG של אפליקציית קורא או בסרגלי סימניות, יש סיכוי שהמשתמש יקבל סמל רלוונטי של עיצוב (בהיר או כהה), בגלל סגנונות של העדפות כהות שקיימים בתוך ה-SVG. לאחר מכן, פורמט ה-SVG מתאים את עצמו לפי העיצוב המוטמע שלו, בהתאם להעדפות המשתמש הבהירות והכהות.
![כרטיסיות בהירות וכהות בכל דפדפן,
שמספקות סקירה כללית של הסמל המותאם מלמעלה למטה:
Safari, Firefox, Chrome.](https://web.dev/static/articles/building/an-adaptive-favicon/image/light-dark-tabs-each-br-1bd458c8c5743.png?authuser=5&hl=he)
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 יהיה סמל אתר שניתן להתאמה.
קישור ה-SVG של סמל האתר מ-HTML
בתג <head>
של ה-HTML, אחרי סמל האתר .ico
, מוסיפים את הפרטים הבאים:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
הסמל החדש עשוי להיראות זהה לגרסה של .ico
, לכן חשוב לאמת שהוא נמצא בשימוש. פותחים את החלונית 'רשת' של כלי הפיתוח. סינון לפי תמונות וחיפוש סמל אתר:
סגנונות
בדומה ל-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 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
), אבל
השארתי את הכובע המשני הוורוד.
סיכום
עכשיו, אחרי שאת יודעת איך עשיתי את זה, איך היית רוצה ‽ 🙂
בואו נגוון את הגישות שלנו ונלמד את כל הדרכים לבנות באינטרנט. צור הדגמה (דמו), ציוץ לי קישורים ואני אוסיף אותה לקטע 'רמיקסים של הקהילה' למטה!