파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명
- 青灯夜游앞으로
- 2022-09-07 10:30:161952검색
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를 사용하는 방법에 대한 자세한 설명 로딩 실패 시 기본 이미지를 주어야 합니다
- 🎜🎜캔버스보다 비용이 저렴하고 이해하기 쉽습니다🎜🎜🎜🎜높은 유연성으로 CSS를 통한 스타일 제어🎜🎜🎜🎜우선 HTML에서도 일반적인 웹 개발처럼 자유롭게 이런 레이아웃을 그릴 수 있다고 생각합니다🎜🎜🎜rrre 🎜덕분에 너비가 제한되어 있으므로 텍스트를 숨김 이상으로 강제로 감싸야 합니다. 핵심 스타일은 다음과 같습니다🎜rrreee🎜그 다음 역할에 대해 이 HTML 조각을
foreignObject 태그에 넣습니다. 관심 있는 분들은 Zhang Xinxu 선생님의 글을 참고하시면 됩니다. 이 글에서는 SVG 소개와 스크린샷, 기타 응용 프로그램을 소개하고 있는데 여기서는 HTML을 담을 수 있는 태그이고 SVG 자체도 일종의 그림이라는 점만 이해하시면 됩니다. 이미지 합성 목적 달성🎜🎜🎜🎜 구체적인 구현은 다음과 같습니다🎜rrreee🎜몇 가지 주의할 점이 있습니다🎜- 🎜🎜 svg의 파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명 태그는
파비콘에 로고를 추가하기 위해 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前端）
위 내용은 파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!