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

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

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

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

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

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

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

favicon

最初のタグは link

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

<link>

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

- 网站目录
    index.html
    favicon.ico

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

に限ります) icon <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const link = document.querySelector('link[rel~=&quot;icon&quot;]');</pre><div class="contentsignin">ログイン後にコピー</div></div> を含めるだけです。見つからない場合は、/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
    }
}

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

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

#まず、このようなレイアウトは通常の 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 をファビコン

link.href= favicon;

<link>
<link>

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

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

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