SVGを使用してファビコンにロゴを追加する方法の詳細な説明

SVG を使用してロゴをファビコンに追加するにはどうすればよいですか?以下の記事ではSVGを使ってロゴ入りファビコンを生成する方法をご紹介しますので、ご参考になれば幸いです。

以前、アドレスに応じて異なるアイコンを生成できる Chrome プラグインを作成しました。これにより、異なる開発環境を簡単に区別できます。効果は次のとおりです。

主な実装プロセスは実際には複雑ではなく、まず Web サイトのファビコンを取得し、そのファビコンにロゴを追加し、再描画して生成します。

このうち、ここのアイコンはSVGで生成されているので、具体的な実装を見てみましょう。 [推奨学習: css ビデオ チュートリアル

]

1. ファビコンの取得方法

取得方法を知りたい場合は、まずは設定方法を理解することができます。

通常、Web サイトの

favicon

を設定するには 2 つの方法があります。

最初のタグは link

タグを通じて設定されます (

rel="icon" 属性が必要です)

<link>

2 つ目のタグは直接に設定されますWeb サイトのルート ディレクトリ #favicon.ico

(ブラウザのデフォルトではこの名前でなければなりません) を入力します。html

- 网站目录
    index.html
    favicon.ico

If には何も設定する必要はありません。上記のいずれも設定されていない場合、次のエラーが表示される可能性が高くなります。

これらを理解すると、取得するのは簡単です。まず

を通じて取得します。 link (

rel

に限ります) icon <pre class="brush:php;toolbar:false">const link = document.querySelector('link[rel~=&quot;icon&quot;]');</pre> を含めるだけです。見つからない場合は、/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 は存在することが保証されており、描画されます

2. キャンバスを使用して描画します

画像を合成する必要があるため、最初に元の画像を描画する必要があります。画像描画といえばキャンバス描画が考えられますが、キャンバスに関する基本的な知識が少しあれば十分です。具体的な実装は以下の通りです。

const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
SVGを使用してファビコンにロゴを追加する方法の詳細な説明 = new Image();
SVGを使用してファビコンにロゴを追加する方法の詳細な説明.crossOrigin = 'anonymous';
SVGを使用してファビコンにロゴを追加する方法の詳細な説明.onload = () => {
    canvas.height = SVGを使用してファビコンにロゴを追加する方法の詳細な説明.height;
    canvas.width = SVGを使用してファビコンにロゴを追加する方法の詳細な説明.width;
    ctx.drawImage(SVGを使用してファビコンにロゴを追加する方法の詳細な説明, 0, 0, canvas.width, canvas.height);
    let dataURL = canvas.toDataURL("image/png");
    resolve(dataURL);
    canvas = null;
};
SVGを使用してファビコンにロゴを追加する方法の詳細な説明.src = url;

/favicon.ico

には設定がないため、SVGを使用してファビコンにロゴを追加する方法の詳細な説明の読み込みに失敗した場合にデフォルトの画像を与える必要があります

SVGを使用してファビコンにロゴを追加する方法の詳細な説明.onerror = () => {
    resolve("默认图base64");
}

この方法でファビコンの画像情報を取得します

3. 画像合成にはSVGを使用します

上記を踏まえて、実際にキャンバスに描画を続けて描画していきますラベル それも難しくありません。ただし、ここでの描画には SVG を使用することができ、以下の利点があります。 CSS を介してスタイル制御を行うことができます

#まず、このようなレイアウトは通常の Web 開発と同様に HTML で自由に描画できます。難しいことではないと思います

#

  <strong>local</strong>
  <svg>
</svg>

幅に制限があるため、非表示を超えてテキストを強制的に折り返す必要があります。キーのスタイルは次のとおりです。

• 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
タグforeignObjectの役割については、Zhang Xinxu氏によるSVGの紹介とスクリーンショットの記事を参照してください。ここでは、HTMLタグを含めることができ、SVG自体も同様であることを簡単に理解できます。これで画像合成の目的は達成されました

具体的な実装は以下の通りです

const link = getLink();
const icon = await SVGを使用してファビコンにロゴを追加する方法の詳細な説明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を使用してファビコンにロゴを追加する方法の詳細な説明{
      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></svg>を使用してファビコンにロゴを追加する方法の詳細な説明>
  </foreignobject></svg>`.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23')

ここで注意すべき点がいくつかあります

SVGを使用してファビコンにロゴを追加する方法の詳細な説明 タグ SVG では、閉じた形式

を使用してファビコンにロゴを追加する方法の詳細な説明>

で記述する必要があります。そうしないと、構造エラーとみなされます

SVGを使用してファビコンにロゴを追加する方法の詳細な説明 Base64 などのインライン画像のみを使用できるため、元のファビコンが描画されます

インライン SVG を使用する場合は、文字列内の svg

• をエスケープする必要があります。一重引用符と二重引用符の問題にも注意する必要があります。
  次に、次のように設定します。生成された SVG をファビコン

link.href= favicon;

に直接追加すると、正常に動作します。レンダリングされた ~

完全な実装については、プロジェクトを参照してください: https:// github.com/XboxYan/auto-dev-favicon-chrome-plugin

四、一些局限性

首先是兼容性。

目前只有 Chrome 和 Firefox 是支持的，为了兼容其他浏览器，可以用一个 .ico来兜底

<link>
<link>

另外，在 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>

很简单的一个背景颜色动画。在 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>

但是也是同样的问题，只有 Firefox 下可行，Chrome是静止不动的

总的来说，SVG 在绘制方面提供了无限可能，不仅仅是本文中的案例，觉得 canvas 过于复杂的都可以考虑这一方案

（学习视频分享：web前端）

以上がSVGを使用してファビコンにロゴを追加する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。