自定義網(wǎng)站圖標(biāo)是完善
網(wǎng)站建設(shè)項(xiàng)目的好方法。它顯示在桌面瀏覽器選項(xiàng)卡上，也顯示在鏈接到您網(wǎng)站的其他博客文章等中。傳統(tǒng)上這是通過.ico文件類型完成的，但最近瀏覽器允許使用SVG，一種矢量格式。使用漸進(jìn)式增強(qiáng)，您可以提供支持良好.ico的網(wǎng)站圖標(biāo)，并升級(jí)到SVG可用的網(wǎng)站。在這篇文章中，深圳尼高網(wǎng)站設(shè)計(jì)公司想分享有關(guān)如何使用 SVG 構(gòu)建自適應(yīng)網(wǎng)站圖標(biāo)的想法。
SVG 能夠在不損失質(zhì)量的情況下放大和縮小，并且尺寸可能非常小，它們還可以嵌入 CSS，甚至嵌入媒體查詢。這意味著如果在閱讀器應(yīng)用程序或書簽欄中使用 SVG 圖標(biāo)，由于 SVG 內(nèi)部提供的深色偏好樣式，用戶有可能獲得與主題相關(guān)的（淺色或深色）圖標(biāo)。然后，SVG 使用其嵌入式樣式適應(yīng)淺色和深色用戶偏好。
SVG 標(biāo)記是使用文件類型擴(kuò)展名的XML.svg，允許它保存更多動(dòng)態(tài)類型的代碼。創(chuàng)建一個(gè)名為的新文件favicon.svg并添加以下內(nèi)容：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>這個(gè)包裝標(biāo)簽與標(biāo)簽相似，<html>你不覺得嗎？這是我的 SVG 文件，我已經(jīng)調(diào)整了viewBox與我的作品相關(guān)的大?。?br />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
接下來，添加 SVG 路徑代碼。這通常意味著在代碼編輯器中打開 SVG，但該代碼通常對(duì)人類不友好。這是一個(gè)很好的指南，可指導(dǎo)您從設(shè)計(jì)工具導(dǎo)出和優(yōu)化 SVG。這個(gè)GUI 挑戰(zhàn)的藝術(shù)作品來自一位在Adobe Illustrator中制作的設(shè)計(jì)師。我對(duì)其進(jìn)行了大量?jī)?yōu)化。我通過SVGOMG運(yùn)行它，然后手動(dòng)編輯掉這個(gè)雜物。
skull這是我清理后的藝術(shù)品路徑組的示例：
<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>
請(qǐng)注意人類可讀的ID 選擇器和#eyes-and-nose類，如.favicon-stroke. 這些來自我的手工編輯，為 CSS 做準(zhǔn)備。SVG 不需要添加類和 ID 即可成為自適應(yīng)圖標(biāo)。
讓我們多樣化我們的方法并學(xué)習(xí)在網(wǎng)絡(luò)上構(gòu)建的所有方法。
