封面图加载中
本文转自THYUU/星度主题
前言
在 THYUU/星度主题里，仅仅对于顶栏的设定就有多种排版，具体可至主题品牌介绍站查看 https://theme.thyuu.com/ 查看顶栏的排版设定。而在顶栏标识区域里，除了引入常见的 IMG 图片外，主题还支持 SVG 格式并引入了变色特性，让标识根据不同的页面展示不同的颜色方案。这是一项很新颖的设计，也是星度主题为大家用心设计的表现之一。
若您不了解 SVG 格式图片，请继续往下看。若您了解，请直接查看本文第四节：点此跳转
什么是 SVG 及其特点
SVG 是一种基于 XML 的矢量图形格式。作为网页设计与前端开发的核心技术之一，SVG 凭借其矢量特性与灵活性，成为构建高清、动态图形的首选方案。SVG 是一种基于 XML 的矢量图形格式，其核心特点包括：
- 无损缩放：无论放大多少倍，图形边缘始终清晰，解决了传统位图（如 PNG、JPG）的像素失真问题。
- 文本可编辑：SVG 代码可直接通过文本编辑器修改，支持 CSS 与 JavaScript 动态控制，便于实现交互效果（如点击事件、动画）。
- 轻量高效：文件体积小，适合网页加载优化，尤其在地图、图标等场景中表现突出。
SVG 核心语法与元素
SVG 本质是 XML 格式的文档，基本语法和结构规则相同，需包裹在标签内。但又有一些专属于 SVG 格式的标签，定义元素及其与属性。
基础结构
这有一个标准的 SVG 格式图：
<svg viewBox="0 0 500 500">
<circle cx="100" cy="100" r="50" fill="#000" stroke="#000"></circle>
</svg>- viewBox 属性：控制可视区域，语法为 viewBox=”x y width height”，实现矢量自适应缩放
- 所有元素存在 SVG 标签内
常用标签
| 属性名称 | 作用描述 |
|---|---|
<defs> | 定义可复用的渐变、模糊等效果 |
<g> | 组合元素 |
<use> | 引用已定义图形 |
元素标签
| 属性名称 | 作用描述 |
|---|---|
矩形 <rect> | x 定位横坐标，y 纵坐标，width height 定义尺寸，rx/ry 设置圆角 |
圆形 <circle> | cx 圆心横坐标，cy 圆心纵坐标，r 为半径 |
路径 <path> | 最强大的元素，通过 d 属性定义贝塞尔曲线、多边形等复杂图形 |
CSS 属性
定义图形轮廓
| 属性名称 | 作用描述 | 常见值 |
|---|---|---|
stroke | 设置图形边框的颜色 | 颜色名称（如 blue）、十六进制颜色代码（如 #0000FF）、rgb() 或 rgba() 等 |
stroke-width | 定义边框的宽度 | 任何长度单位，如像素（px）、点（pt）、厘米（cm）等 |
stroke-opacity | 定义边框颜色的不透明度 | 范围从 0（完全透明）到 1（完全不透明） |
stroke-linecap | 定义线条末端的形状 | butt（平直末端，默认值）、round（圆形末端）、square（正方形末端） |
stroke-linejoin | 定义线条相交处的形状 | miter（尖角连接，默认值）、round（圆角连接）、bevel（斜角连接） |
stroke-dasharray | 定义边框的虚线模式 | 由逗号或空格分隔的数字序列，表示线段和间隙的长度 |
stroke-dashoffset | 定义虚线模式的起始偏移量 | 数值，表示偏移量 |
stroke-miterlimit | 当 stroke-linejoin 为 miter 时，限制斜接角的长度 | 数值，表示斜接角的最大长度 |
定义图形填充
| 属性名称 | 作用描述 | 常见值 |
|---|---|---|
fill | 设置图形内部的填充颜色 | 颜色名称（如 red）、十六进制颜色代码（如 #FF0000）、rgb() 或 rgba() 等 |
fill-opacity | 定义填充颜色的不透明度 | 范围从 0（完全透明）到 1（完全不透明） |
fill-rule | 定义填充区域的算法 | nonzero（非零规则，默认值）和 evenodd（奇偶规则） |
如何适配星度主题变色标识
现在，你已经了解基本 SVG 的知识，当我们看到 SVG 图片的代码时，你可以轻松找到框架中包含颜色的属性 stroke 和 fill，我们就是针对这两个属性进行适配。
单色标识
| 序号 | 风格 | 是否与主题色相同 | fill 或 stroke 属性适配示例 |
|---|---|---|---|
| 1 | 仅 fill | 是 | 直接删除 fill 属性，即可适配 |
| 2 | 仅 stroke | 是 | stroke: var(–logo-color, var(–main-color)) |
| 3 | 仅 fill 或仅 stroke | 否 | fill 或 stroke: var(–logo-color, #000) |
| 4 | fill + stroke | / | 可按上述酌情适配 |
双色标识
| 序号 | 风格 | 是否与主题色相同 | fill 或 stroke 属性适配示例 |
|---|---|---|---|
| 1 | 仅 fill 或仅 stroke | 是 | 主色区域 fill 或 stroke: var(–logo-color, var(–main-color)) 辅色区域 fill 或 stroke: var(–logo-color, var(–subs-color)) |
| 2 | 仅 fill 或仅 stroke | 否 | 主色区域 fill 或 stroke：var(–logo-color, #000) 辅色区域 fill 或 stroke：var(–logo-color, #000) |
| 3 | fill + stroke | / | 可按上述酌情适配 |
多色标识
| 序号 | 风格 | 是否与主题色相同 | fill 或 stroke 属性适配示例 |
|---|---|---|---|
| 1 | 仅 fill 或仅 stroke | / | 对应区域 fill：var(–logo-color, #000) |
| 3 | fill + stroke | / | 可按上述酌情适配 |
#000 输入原 fill 渐变色对应命名 ID
至此，你已经了解 SVG 各种情况下的标识，适配主题特性的属性示例。注意：必须是原生制作的 SVG 格式文件才可以进行适配，位图转制的格式实际上仍然是位图，无法适配。
接下来为大家介绍几种 SVG 编辑工具。
SVG 编辑工具推荐
以下是一些推荐的 SVG 编辑工具，根据不同的需求和使用场景，您可以选择适合自己的工具：
专业设计类
- Adobe Illustrator：功能强大的矢量图形编辑软件，支持创建和编辑 SVG 文件。绘图功能丰富，对文本处理能力强，可创建和编辑文字，调整字符间距、行间距等，还能将文本沿路径呈现。与 Adobe After Effects 配合方便，可实现众多动态效果。
https://www.adobe.com/cn/creativecloud/roc/business.html - CorelDRAW：平面设计领域的知名软件，配备了强大的 SVG 编辑工具，可以帮助用户创建专业的矢量插图。支持多种文件格式，如 Adobe Illustrator、PDF、HTML、JPG、PNG、SVG 和 EPS 等。
https://www.coreldraw.com/cn/product/coreldraw/
在线编辑类
- 即时设计：具有强大的 SVG 编辑功能，支持矢量网格、自动布局、组件、智能选择等精细的 SVG 设计功能。
https://js.design/ - 易点编辑器：具有简单的 SVG 编辑功能，可简单编辑图形。
https://svg.wxeditor.com
结语
本期介绍了自适应标识颜色特性的设定，当在复杂封面图颜色的页面时，就可以轻松调用标识的白色版本，当处于限定主题时又会调用限定主题色。THYUU/星度主题精心地带来丰富的浏览体验，无论是主题拥有者还是站点访问者，都会有着不同角度的解读。
下一期将为大家介绍，THYUU/星度主题中主辅双色的特性设定，如何搭配双色增强体验，以及在面对不同搭配时的效果会是如何。