סקירה כללית בסיסית של תהליך היצירה של סמל אתר מותאם.
בפוסט הזה אני רוצה לשתף במחשבה על האופן שבו ניתן ליצור סמל אתר דינמי SVG. אפשר לנסות את ההדגמה.
אם אתם מעדיפים סרטון, הנה גרסה של YouTube לפוסט:
סקירה כללית
סמל אתר מותאם אישית הוא
דרך נהדרת ליטוש פרויקט אינטרנט. הוא מוצג בכרטיסיות בדפדפן במחשב.
גם בתוך 'שמירה למועד מאוחר יותר' קוראים, פוסטים אחרים בבלוגים המקשרים לאתר שלך, וכן
עוד. בדרך כלל זה נעשה באמצעות קובץ מסוג .ico
, אך לאחרונה
דפדפנים אישרו שימוש
SVG, פורמט וקטורי. באמצעות
מתקדם
שיפור
אפשר להציג סמלי אתרים של .ico
שנתמכים היטב, ולשדרג ל-.svg
אם
זמינים.
SVG יכול לגדול ולהתרחב בלי אובדן איכות, וגודלם עשוי להיות קטן מאוד, הם עלולים שירות CSS מוטמע, אפילו לשאילתות מדיה מוטמעות. כלומר, אם נעשה שימוש בסמל אתר מסוג SVG באפליקציית קורא או בסרגלי סימניות, יש סיכוי שהמשתמש יוכל למצוא עיצוב רלוונטי (בהיר או כהה), עקב סגנונות העדפה כהים שמסופקים בתוך SVG. לאחר מכן קובץ ה-SVG מתאים את עצמו באמצעות הסגנון המוטמע שלו למשתמשים עם גוון כהה או בהיר העדפות.
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 יהיה סמל אתר מותאם.
קישור 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
), אבל
משמאל לכובע המשני הוורוד.
סיכום
עכשיו, אחרי שהסברתי איך עשיתי את זה, איך היית? 🙂
בואו לגוון את הגישות שלנו ונלמד את כל הדרכים לבניית אתרים באינטרנט. אפשר ליצור הדגמה, לשלוח לי קישורים של שלחו לי ציוץ ואני אוסיף אותם לקטע 'רמיקסים' של הקהילה שבהמשך.