Explication détaillée de l'utilisation de SVG pour ajouter un logo au favicon-tutoriel CSS-php.cn

Comment ajouter un logo à un favicon en utilisant SVG ? L'article suivant vous présentera comment utiliser SVG pour générer un favicon avec logo. J'espère qu'il vous sera utile !

J'ai déjà créé un plug-in Chrome, qui peut générer différentes icônes en fonction de différentes adresses. Cela permet de distinguer facilement différents environnements de développement. L'effet est le suivant

Le processus de mise en œuvre principal n'est en fait pas compliqué. . Tout d'abord, obtenez le favicon du site Web, puis ajoutez un logo au favicon, redessinez-le et générez-le

Parmi eux, l'icône ici est générée via SVG. [Apprentissage recommandé : Tutoriel vidéo CSS]

1. Comment obtenir un favicon

Si vous voulez savoir comment l'obtenir, vous pouvez d'abord comprendre la méthode de paramétrage.

Il existe généralement deux façons de définir le favicon du site Web. favicon。

第一种，通过 link 标签设置（需要rel="icon"属性）

<link>

Copier après la connexion

第二种，直接在网站根目录放一张favicon.ico（必须是这个名称，浏览器默认的），html 中什么也不用设置

- 网站目录
    index.html
    favicon.ico

Copier après la connexion

如果以上都没有设置，那么大概率会看到以下错误

了解这些，获取就简单了，先通过link获取，只要rel包含icon就行了

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

Copier après la connexion

如果找不到，可以请求/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
    }
}

Copier après la connexion

这样获取的link就保证存在了，然后就是绘制

二、利用 canvas 进行绘制

由于需要合成图像，所以需要先绘制原有图像。提到图像绘制，可以想到 canvas 绘制，只需要一点点 canvas 基础知识就足够了。具体实现如下

const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon = new Image();
Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon.crossOrigin = 'anonymous';
Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon.onload = () => {
    canvas.height = Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon.height;
    canvas.width = Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon.width;
    ctx.drawImage(Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon, 0, 0, canvas.width, canvas.height);
    let dataURL = canvas.toDataURL("image/png");
    resolve(dataURL);
    canvas = null;
};
Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon.src = url;

Copier après la connexion

由于存在/favicon.ico没有设置的情况，所以需要在 Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon 加载失败的时候给一张默认图

Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon.onerror = () => {
    resolve("默认图base64");
}

Copier après la connexion

这样就能获取到 favicon 的图像信息了

三、利用 SVG 进行图片合成

在上面的基础上，其实可以继续通过 canvas 进行绘制，再绘制一个标签也不是难事。不过这里可以采用 SVG 的方式来进行绘制，有以下一些优点

成本更低，比 canvas 更易理解
灵活性高，可以通过 CSS 进行一些样式控制

首先，我们可以在 HTML 中自由的、像正常网页开发一样，绘制这样一个布局，相信没有什么难度

  <strong>local</strong>
  <explication d de lutilisation svg pour ajouter un logo au favicon>
</explication>

Copier après la connexion

由于宽度有限，所以需要强制文本换行，超出隐藏，关键样式如下

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;
}

Copier après la connexion

接着，将这一段 html 放入 foreignObject标签中，关于 foreignObject 的作用，有兴趣的可以参考张鑫旭老师的这篇文章 SVG 简介与截图等应用，在这里，你可以简单理解为是可以包含 HTML 的标签，而 SVG 本身也是一种图片，这样就达到了合成图像的目的

具体实现如下

const link = getLink();
const icon = await Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon2Base64(link.href);
const favicon = `data:image/svg+xml;charset=utf-8,<svg><foreignobject>
  <style>
    html,body{
      height: 100%;
      margin: 0;
      text-align: center;
    }
    Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon{
      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>
  <explication d de lutilisation svg pour ajouter un logo au favicon></explication>détaillée de lutilisation de SVG pour ajouter un logo au favicon>
  </foreignobject></svg>`.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23')

Copier après la connexion

这里需要注意几点

Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon 标签在 svg 中需要写成<explication d de lutilisation svg pour ajouter un logo au favicon></explication>détaillée de lutilisation de SVG pour ajouter un logo au favicon>
Le premier est défini via la balise link (nécessite l'attribut rel="icon")

link.href= favicon;

Copier après la connexion

Le second consiste à placer une photo directement dans le

répertoire racine du site Web

favicon.ico (doit être ce nom, celui par défaut du navigateur), il n'est pas nécessaire de définir quoi que ce soit en html

<link>
<link>

Copier après la connexion

Si aucun des éléments ci-dessus n'est défini, alors il y a un niveau élevé probabilité que vous voyiez l'erreur suivante

Comprendre ceux-ci, l'obtenir est simple. Obtenez-le d'abord via link, à condition de rel<.> contient une <code>icône et tout ira bien

<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>

Copier après la connexion

Si vous ne le trouvez pas, vous pouvez demander /favicon.ico et ajouter un lien directement ici

<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>

Copier après la connexion

Le lien obtenu de cette manière est garanti d'exister, puis dessinez

Deuxièmement, utilisez la toile pour dessiner

Puisque l'image doit être synthétisée, le l'image originale doit d'abord être dessinée. Lorsqu'il s'agit de dessiner des images, vous pouvez penser au dessin sur toile, et seules quelques connaissances de base en toile suffisent. L'implémentation spécifique est la suivante

rrreee

Puisqu'il existe une situation où /favicon.ico n'est pas défini, il est nécessaire de donner une image par défaut lorsque l'Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon ne parvient pas à se charger

rrreee🎜De cette façon , les informations d'image du favicon peuvent être obtenues 🎜🎜🎜3. Utilisez SVG pour la synthèse d'image🎜🎜🎜Sur la base de ce qui précède, vous pouvez réellement continuer à dessiner sur le canevas, et il n'est pas difficile de dessiner une autre étiquette. Cependant, SVG peut être utilisé pour dessiner ici, ce qui présente les avantages suivants🎜

étrangerObject

<explication d de lutilisation svg pour ajouter un logo au favicon></explication>détaillée de lutilisation de SVG pour ajouter un logo au favicon> code>, sinon elle sera considérée comme ayant une erreur structurelle🎜🎜🎜🎜Explication détaillée de lutilisation de SVG pour ajouter un logo au favicon ne peut utiliser que des images en ligne, comme base64, c'est pourquoi le favicon original est dessiné🎜🎜🎜🎜Si vous utilisez un svg en ligne, vous devez échapper au svg 🎜🎜🎜🎜Vous devez également faire attention aux guillemets simples et doubles dans la chaîne🎜🎜 🎜🎜Ensuite, définissez le SVG généré directement sur le favicon🎜rrreee🎜🎜🎜🎜De cette façon, il peut être rendu normalement~🎜🎜Vous pouvez vous référer au projet d'implémentation complet : https://github.com/XboxYan/auto -dev-favicon-chrome-plugin🎜四、一些局限性
首先是兼容性。
目前只有 Chrome 和 Firefox 是支持的，为了兼容其他浏览器，可以用一个 .ico来兜底
<link>
<link>
Copier après la connexion
Copier après la connexion
另外，在 Chrome 上还有一个限制（不知道是不是Chrome 更新后的限制），当 favicon 使用 svg 格式图片时，此时的 svg 会处于一种secure-static-mode，在这种模式下，所有动画都不会执行，会处于第一帧，比如下面这个例子
<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>
Copier après la connexion
Copier après la connexion
很简单的一个背景颜色动画。在 Firefox 上是用作 favicon 是有动画的

但是，Chrome 上却不行，只有禁止的第一帧

所以之前想实现标识文本滚动的效果可以就此打住了
比较类似的还有媒体查询，之前在网上看到有这样的实现，直接在 SVG 中实现黑暗模式
<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>
Copier après la connexion
Copier après la connexion
但是也是同样的问题，只有 Firefox 下可行，Chrome是静止不动的

总的来说，SVG 在绘制方面提供了无限可能，不仅仅是本文中的案例，觉得 canvas 过于复杂的都可以考虑这一方案
（学习视频分享：web前端）