站点和设计 – 风记星辰

在 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	/	可按上述酌情适配

#000 的位置具体颜色，请输入原 fill 颜色

双色标识

序号	风格	是否与主题色相同	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	/	可按上述酌情适配

#000 的位置具体颜色，请输入原 fill 颜色

多色标识

序号	风格	是否与主题色相同	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/