怎麼使用SVG為 favicon 新增標(biāo)識？以下這篇文章為大家介紹一下使用 SVG 產(chǎn)生帶有標(biāo)識的 favicon的方法，希望對大家有幫助！

之前做了一個Chrome 插件，可以根據(jù)地址的不同生成不同的圖標(biāo)，這樣可以很方便的區(qū)分不同的開發(fā)環(huán)境，效果如下

主要實(shí)作過程其實(shí)不複雜，先取得網(wǎng)站favicon，然後給favicon 加入標(biāo)識，重新繪製生成就行了

##其中，這裡的圖示就是透過SVG 產(chǎn)生的，下面來看看具體實(shí)現(xiàn)吧。 【推薦學(xué)習(xí)：

css影片教學(xué)】

一、favicon 的取得方式

想知道取得方式，可以先了解設(shè)定方式。

一般有兩種方式可以設(shè)定網(wǎng)站的

favicon。

第一種，透過

link 標(biāo)籤設(shè)定（需要rel="icon"屬性）

<link>

第二種，直接在

網(wǎng)站根目錄放一張favicon.ico（必須是這個名稱，瀏覽器預(yù)設(shè)的），html 中什麼也不用設(shè)定

-?網(wǎng)站目錄
????index.html
????favicon.ico

如果以上都沒有設(shè)置，那麼大機(jī)率會看到以下錯誤

了解這些，獲取就簡單了，先透過

link獲取，只要rel#包含icon就行了

const?link?=?document.querySelector('link[rel~="icon"]');

如果找不到，可以請求

/favicon.ico，這裡直接加入一個link

function?getLink(){
????const?link?=?document.querySelector('link[rel~="icon"]');
????if?(link)?{
????????return?link
????}?else?{
????????const?link?=?document.createElement('link');
????????link.rel?=?"icon";
????????link.href?=?"/favicon.ico"
????????document.head.append(link);
????????return?link
????}
}

這樣取得的

link就保證存在了，然後就是繪製

二、利用canvas 來繪製##因?yàn)樾枰铣捎跋?，所以需要先繪製原有影像。提到影像繪製，可以想到 canvas 繪製，只需要一點(diǎn)點(diǎn) canvas 基礎(chǔ)知識就足夠了。具體實(shí)作如下

const?canvas?=?document.createElement('canvas'),
ctx?=?canvas.getContext('2d'),
詳解用SVG為 favicon 新增標(biāo)識?=?new?Image();
詳解用SVG為 favicon 新增標(biāo)識.crossOrigin?=?'anonymous';
詳解用SVG為 favicon 新增標(biāo)識.onload?=?()?=>?{
????canvas.height?=?詳解用SVG為 favicon 新增標(biāo)識.height;
????canvas.width?=?詳解用SVG為 favicon 新增標(biāo)識.width;
????ctx.drawImage(詳解用SVG為 favicon 新增標(biāo)識,?0,?0,?canvas.width,?canvas.height);
????let?dataURL?=?canvas.toDataURL("image/png");
????resolve(dataURL);
????canvas?=?null;
};
詳解用SVG為 favicon 新增標(biāo)識.src?=?url;

由於存在

/favicon.ico

沒有設(shè)定的情況，所以需要在詳解用SVG為 favicon 新增標(biāo)識 載入失敗的時候給一張預(yù)設(shè)圖<pre class="brush:php;toolbar:false">詳解用SVG為 favicon 新增標(biāo)識.onerror?=?()?=&gt;?{ ????resolve(&quot;默認(rèn)圖base64&quot;); }</pre>這樣就能取得到favicon 的圖像資訊了

三、利用SVG 進(jìn)行圖片合成

在上面的基礎(chǔ)上，其實(shí)可以繼續(xù)透過canvas 進(jìn)行繪製，再繪製一個標(biāo)籤也不是難事。不過這裡可以採用SVG 的方式來進(jìn)行繪製，有以下一些優(yōu)點(diǎn)

成本更低，比canvas 更易理解

• ##彈性高，可以透過CSS 進(jìn)行一些樣式控制

• 首先，我們可以在HTML 中自由的、像正常網(wǎng)頁開發(fā)一樣，繪製這樣一個佈局，相信沒有什麼難度

#

??<strong>local</strong>
??

由於寬度有限，所以需要強(qiáng)製文字換行，超出隱藏，關(guān)鍵樣式如下

strong{
??position:?absolute;
??bottom:?0;
??left:?50%;
??transform:?translateX(-50%);
??text-transform:?uppercase;
??background-color:?orange;
??color:?#fff;
??padding:?0px?2px;
??border-radius:?2px;
??font-size:?12px;
??box-sizing:?border-box;
??max-width:?100%;
??width:?max-content;
??height:?16px;
??line-height:?16px;
??word-break:?break-all;
??overflow:?hidden;
}

接著，將這一段html 放入

foreignObject

#標(biāo)籤中，關(guān)於?foreignObject 的作用，有興趣的可以參考張鑫旭老師的這篇文章SVG 簡介與截圖等應(yīng)用，在這裡，你可以簡單理解為是可以包含HTML 的標(biāo)籤，而SVG 本身也是一種圖片，這樣就達(dá)到了合成圖像的目的

具體實(shí)作如下

const?link?=?getLink();
const?icon?=?await?詳解用SVG為 favicon 新增標(biāo)識2Base64(link.href);
const?favicon?=?`data:image/svg+xml;charset=utf-8,<svg><foreignobject>
??<style>
    html,body{
      height: 100%;
      margin: 0;
      text-align: center;
    }
    詳解用SVG為 favicon 新增標(biāo)識{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    strong{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-transform: uppercase;
      background-color: ${color};
      color: #fff;
      padding: 0px 2px;
      border-radius: 2px;
      font-size: 12px;
      box-sizing: border-box;
      max-width: 100%;
      width: max-content;
      height: 16px;
      line-height: 16px;
      word-break: break-all;
      overflow: hidden;
    }
  </style>
??<strong>local</strong>
??詳解用SVG為 favicon 新增標(biāo)識>
??</foreignobject></svg>`.replace(/\n/g,?'').replace(/\t/g,?'').replace(/#/g,?'%23')

這裡需要注意幾點(diǎn)

##詳解用SVG為 favicon 新增標(biāo)識 標(biāo)籤在svg 中需要寫成

詳解用SVG為 favicon 新增標(biāo)識>

閉合形態(tài)，不然會被認(rèn)為結(jié)構(gòu)錯誤

• 詳解用SVG為 favicon 新增標(biāo)識 只能使用內(nèi)聯(lián)圖片，例如base64，這也是為何繪製原始favicon 的原因

• 如果使用內(nèi)聯(lián)svg，需要對svg 進(jìn)行轉(zhuǎn)義

• 字串中的單雙引號問題也需要注意一下

• 然後，將產(chǎn)生的SVG 直接設(shè)定為favicon

  link.href=?favicon;

這樣就能正常的渲染了~

完整實(shí)作可以參考項(xiàng)目：https://github.com/XboxYan/auto-dev-favicon-chrome-plugin

四、一些局限性

首先是兼容性。

目前只有 Chrome 和 Firefox 是支持的，為了兼容其他瀏覽器，可以用一個 .ico來兜底

<link>
<link>

另外，在 Chrome 上還有一個限制（不知道是不是Chrome 更新后的限制），當(dāng) favicon 使用 svg 格式圖片時，此時的 svg 會處于一種secure-static-mode，在這種模式下，所有動畫都不會執(zhí)行，會處于第一幀，比如下面這個例子

<svg>
??<foreignobject>
??????
????????<style>
        html,body{
            margin: 0;
            height: 100%
        }
        div{
            height: 100%;
            background: pink;
            animation: hue 3s infinite;
        }
        @keyframes hue {
            to {
                filter: hue-rotate(360deg)
            }
        }
        </style>
????????<div></div>
??????
????</foreignobject>
</svg>

很簡單的一個背景顏色動畫。在 Firefox 上是用作 favicon 是有動畫的

但是，Chrome 上卻不行，只有禁止的第一幀

所以之前想實(shí)現(xiàn)標(biāo)識文本滾動的效果可以就此打住了

比較類似的還有媒體查詢，之前在網(wǎng)上看到有這樣的實(shí)現(xiàn)，直接在 SVG 中實(shí)現(xiàn)黑暗模式

<svg>
????<style>
        path {
            fill: #fff;
        }
        rect {
            fill: #B09AFE;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #B09AFE;
            }
            rect {
                fill: #fff;
            }
        }
    </style>
????<rect></rect>
????<path></path>
</svg>

但是也是同樣的問題，只有 Firefox 下可行，Chrome是靜止不動的

總的來說，SVG 在繪制方面提供了無限可能，不僅僅是本文中的案例，覺得 canvas 過于復(fù)雜的都可以考慮這一方案

（學(xué)習(xí)視頻分享：web前端）

以上是詳解用SVG為 favicon 新增標(biāo)識的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！