将博客头像更改为 SVG

发布 2023-04-29
阅读

现在的博客主题 yearn 需要使用头像，我使用的是一张 jpeg logo 图片，大小是 8KB。

在访问首页的时候需要加载它，访问博客文章的时候也需要。

然而我观察到 GitHub pages 有时候访问速度只有 6、7KB，这就难顶了，一秒还没法将 logo 加载出来。看来这是一个急需解决的问题。

那么分析一下，我的头像其实很简单，就是黑色的背景，然后上面是我的昵称 Powersee，这其实可以用 svg 画出来。

我现在用这样的代码把它弄成 svg

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
  <rect width="100%" height="100%" fill="black"></rect> <!-- 黑色背景矩形 -->
  <text x="50%" y="45%" text-anchor="middle" dy=".3em" fill="white" font-size="48" font-family="sans-serif">Power</text> <!-- 文字 "Power"，居中对齐，白色填充，字号 48px，字体 sans-serif -->
    <text x="50%" y="65%" text-anchor="middle" dy=".3em" fill="white" font-size="48" font-family="sans-serif">_see</text>
</svg>

效果如下

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

不要注释的话，它只需要 393 字节，也就是 393Byte，不到 0.4KB，很不错。原本需要加载一张 8KB 的外部图片，现在改为 svg 可以直接写在 HTML 里面，而且需要加载的数据也只需原来的 5%。

那么就开始修改主题吧，需要修改 index.ejs 和 ariticle.ejs 这两个文件。

index.ejs

<!-- <div class="face-img"><img src="<%=theme.avatar%>"></div> -->
<div class="face-img">
  <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
    <rect width="100%" height="100%" fill="black"></rect> <!-- 黑色背景矩形 -->
    <text x="50%" y="45%" text-anchor="middle" dy=".3em" fill="white" font-size="48" font-family="sans-serif">Power</text> <!-- 文字 "Power"，居中对齐，白色填充，字号 48px，字体 sans-serif -->
      <text x="50%" y="65%" text-anchor="middle" dy=".3em" fill="white" font-size="48" font-family="sans-serif">_see</text>
  </svg>
</div>

ariticle.ejs

<!-- <img src="<%=theme.avatar%>"> -->
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
  <rect width="100%" height="100%" fill="black"></rect>
  <text x="50%" y="45%" text-anchor="middle" dy=".3em" fill="white" font-size="48" font-family="sans-serif">Power</text>
    <text x="50%" y="65%" text-anchor="middle" dy=".3em" fill="white" font-size="48" font-family="sans-serif">_see</text>
</svg>

找到里面引入 logo 的 img 位置，将它替换为 svg。

接着修改 css 文件，更改一下样式。就成功使用 svg 作为头像了。

博客链接: https://powersee.github.io/