网页 favicon 使用 svg 图片

使用 url 编码

sed ':a;N;$!ba;s/\n//g' favicon.svg

把 favicon.svg 文件所有行合并成一行
- :a 定义标签 a
- N 读取下一行并追加到 pattern space 中（带换行符）
- $!ba 如果不是最后一行，跳转到标签 a，不断循环实现全文拼接
- s/\n//g 把所有换行符删除，变成一整行字符串
sed 's/"/'\''/g'

把双引号 " 替换成单引号 '
多个替换

# ➜ %23
< ➜ %3C
> ➜ %3E
➜ %20
= ➜ %3D
& ➜ %26

html 代码替换

/rel="icon"/ 匹配包含字符串 rel="icon" 的所有行
{ ... } 对匹配到的行做一系列操作
s|<link.*>|...| 用后面的字符串替换整行 <link...> 标签

pct ent 119
cd /mnt/storage/files/wwwroot/xxx/zero-nav/
# url 编码
FAVICON_DATA=$(sed ':a;N;$!ba;s/\n//g' favicon.svg | \
  sed 's/"/'\''/g' | \
  sed 's/#/%23/g; s/</%3C/g; s/>/%3E/g; s/ /%20/g; s/=/%3D/g; s/&/%26/g') \
&& echo $FAVICON_DATA
# 简单版
FAVICON_DATA2=$(cat favicon.svg | \
  sed 's/"/'\''/g' | \
  sed 's/#/%23/g;') \
&& echo $FAVICON_DATA2
echo -e '\n<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,'$FAVICON_DATA2'">\n';
# html 代码替换
sed -i '/rel="icon"/{
    s|<link.*>|'"$(echo "<link rel=\"icon\" type=\"image/svg+xml\" href=\"data:image/svg+xml,${FAVICON_DATA}\" />")"'|
}' index.html
sed -i 's/<link rel="alternate icon" href="favicon.ico" \/>//g' index.html

使用 base64 编码

使用 base64 编码生成 Data URI，更稳妥一点（不过体积大一点）

# 使用 base64 编码文件内容
BASE64_DATA=$(base64 -w 0 favicon.svg)
echo -e "\n"$BASE64_DATA."\n"
echo -e '\n<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,'$BASE64_DATA'">\n';