파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

SVG를 사용하여 파비콘에 로고를 추가하는 방법은 무엇입니까? 다음 기사에서는 SVG를 사용하여 로고가 포함된 파비콘을 생성하는 방법을 소개합니다. 도움이 되길 바랍니다.

예전에 크롬 플러그인을 만들어 봤는데, 주소별로 다른 아이콘을 생성할 수 있어서 다양한 개발 환경을 쉽게 구분할 수 있었습니다. 효과는 다음과 같습니다.

실제로는 주요 구현 과정이 복잡하지 않습니다. .먼저 웹사이트 파비콘을 구한 후 파비콘에 로고를 추가하고 다시 그려 생성합니다

그 중 여기 아이콘은 SVG를 통해 생성됩니다. [추천 학습: css 동영상 튜토리얼]

1. 파비콘 획득 방법

획득 방법을 알고 싶다면 먼저 설정 방법을 이해하면 됩니다.

웹사이트의 파비콘을 설정하는 방법은 일반적으로 두 가지가 있습니다. favicon。

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

<link>

로그인 후 복사

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

- 网站目录
    index.html
    favicon.ico

로그인 후 복사

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

了解这些，获取就简单了，先通过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 进行绘制

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

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

로그인 후 복사

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

三、利用 SVG 进行图片合成

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

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

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

  <strong>local</strong>

로그인 후 복사

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

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 的作用，有兴趣的可以参考张鑫旭老师的这篇文章 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를 사용하는 방법에 대한 자세한 설명>
  </foreignobject></svg>`.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23')

로그인 후 복사

这里需要注意几点

파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명 标签在 svg 中需要写成파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명>
첫 번째는 link 태그를 통해 설정됩니다(rel="icon" 속성 필요).

link.href= favicon;

로그인 후 복사

두 번째는 사진을

에 직접 배치하는 것입니다. 웹 사이트 루트 디렉터리

favicon.ico(이 이름이어야 하며 브라우저 기본값이어야 함), html

<link>
<link>

로그인 후 복사

에서 아무것도 설정할 필요가 없습니다. 위 항목 중 어느 것도 설정되어 있지 않으면 높은 값이 있습니다. 다음 오류가 표시될 확률

이를 이해하면 rellink를 통해 먼저 얻는 것이 간단합니다. /code>에 아이콘이 포함되어 있으니 괜찮을 거예요

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

로그인 후 복사

찾을 수 없다면 /favicon.ico를 요청하고 링크를 바로 여기에

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

로그인 후 복사

이렇게 얻은 링크는 존재가 보장되고, 그리고나서 그려주세요

둘째, 캔버스를 이용해 그려주세요

이미지를 합성해야 하므로, 원본 이미지를 먼저 그려야 합니다. 이미지 드로잉이라고 하면 캔버스 드로잉을 떠올릴 수 있는데, 캔버스에 대한 약간의 기본 지식만으로도 충분합니다. 구체적인 구현은 다음과 같습니다

rrreee

/favicon.ico가 설정되지 않은 상황이 있기 때문에 파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명 로딩 실패 시 기본 이미지를 주어야 합니다

rrreee🎜이런 식으로 , 파비콘의 이미지 정보를 얻을 수 있습니다 🎜🎜🎜3. 그림 합성을 위해 SVG를 사용하세요🎜🎜🎜위 내용을 바탕으로 실제로 캔버스를 통해 계속해서 그릴 수 있으며, 다른 라벨을 그리는 것도 어렵지 않습니다. 하지만 여기서는 SVG를 사용하여 그림을 그릴 수 있는데 다음과 같은 장점이 있습니다🎜

foreignObject

파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명> code> 폐쇄형으로 작성해야 합니다. 그렇지 않으면 구조적 오류가 있는 것으로 간주됩니다.🎜🎜🎜🎜파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명는 인라인 이미지만 사용할 수 있습니다. base64 같은게 원래 파비콘이 그려지는 이유🎜🎜🎜🎜인라인 svg를 사용한다면 svg를 이스케이프 처리해야 합니다🎜🎜🎜🎜문자열의 작은따옴표와 큰따옴표에도 주의해야 합니다🎜🎜 🎜🎜그런 다음 생성된 SVG를 파비콘에 직접 설정하세요🎜rrreee🎜🎜🎜🎜이렇게 하면 정상적으로 렌더링이 가능합니다~🎜🎜전체 구현 프로젝트를 참고하시면 됩니다: https://github.com/XboxYan/auto -dev-favicon-크롬-플러그인🎜四、一些局限性
首先是兼容性。
目前只有 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前端）