這篇文章主要介紹“怎么用SVG給favicon添加標(biāo)識”，在日常操作中，相信很多人在怎么用SVG給favicon添加標(biāo)識問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用SVG給favicon添加標(biāo)識”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、龍沙網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、favicon 的獲取方式

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

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

第一種，通過 link 標(biāo)簽設(shè)置（需要rel="icon"屬性）

第二種，直接在網(wǎng)站根目錄放一張favicon.ico（必須是這個名稱，瀏覽器默認(rèn)的），html 中什么也不用設(shè)置

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

如果以上都沒有設(shè)置，那么大概率會看到以下錯誤

了解這些，獲取就簡單了，先通過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 進(jìn)行繪制

由于需要合成圖像，所以需要先繪制原有圖像。提到圖像繪制，可以想到 canvas 繪制，只需要一點(diǎn)點(diǎn) canvas 基礎(chǔ)知識就足夠了。具體實(shí)現(xiàn)如下

const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    let dataURL = canvas.toDataURL("image/png");
    resolve(dataURL);
    canvas = null;
};
img.src = url;

由于存在/favicon.ico沒有設(shè)置的情況，所以需要在 img 加載失敗的時候給一張默認(rèn)圖

img.onerror = () => {
    resolve("默認(rèn)圖base64");
}

這樣就能獲取到 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ā)一樣，繪制這樣一個布局，相信沒有什么難度

  local
  

由于寬度有限，所以需要強(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í)現(xiàn)如下

const link = getLink();
const icon = await img2Base64(link.href);
const favicon = `data:image/svg+xml;charset=utf-8,
  
  local
  
  `.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23')

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

• img 標(biāo)簽在 svg 中需要寫成閉合形態(tài)，不然會被認(rèn)為結(jié)構(gòu)錯誤

• img 只能使用內(nèi)聯(lián)圖片，比如 base64，這也是為何繪制原始 favicon 的原因

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

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

然后，將生成的 SVG 直接設(shè)置為 favicon

link.href= favicon;

四、一些局限性

首先是兼容性。

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

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

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

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

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

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

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

到此，關(guān)于“怎么用SVG給favicon添加標(biāo)識”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！