实用创作流程
SVG 标志适配深色模式：实测 currentColor
咖啡馆的标志在浅色账单上很清楚，放进深色网站页头却消失了。首先要确认网站如何插入 SVG：内联标记与外部图片接收页面颜色的方式并不相同。
我们在 Ciyo 的文件工作区制作虚构的 Cedar Cup 标志，并保留可打开的 HTML 示例。唯一的杯子路径不变。本例测试的是明确的颜色编辑与浏览器行为，不是品牌重设计或整个网站审计。
保留未经修改的 SVG 母版
编辑前先检查源文件，记录 viewBox、路径数据和固定填色。多种硬编码填色、描边或嵌入样式可能需要分别决定；替换一个属性不能证明整个主题系统已经完成。
原图的 viewBox 为 0 0 120 100，唯一的路径填色是 #303036。Ciyo 在代码旁渲染了预览，用来辨认标志；可靠编辑所需的信息仍来自 SVG 源码。
只改填色，保留几何
对这个单色标志，Ciyo 只把 fill="#303036" 换成 fill="currentColor"。独立文件比较确认路径和 viewBox 完全相同。原文件为 266 字节，编辑版为 271 字节，这些数字只描述保留的两份文件。
currentColor 使用元素的 color 值。SVG 内联时，CSS 可以从所在页面环境提供该值。应明确选定浅色与深色版本的颜色，而不是依赖未说明的默认值。
保持这份 SVG 的 viewBox 和每条路径不变，另存一份把唯一固定填色替换为 currentColor 的副本。制作真实 HTML，在浅色和深色区域分别展示固定填色与 currentColor 标志，再加一个外部 img 对照。渲染并检查 HTML，报告计算填色，返回可编辑的 SVG 与 HTML 文件。在真实 HTML 中测试两种背景
保留的页面在两种对比背景上展示固定填色和 currentColor。浅色区域都使用 #303036；深色区域的 currentColor 使用 #FAF6ED，原版仍是炭灰色，因此问题很容易看出。
我们在 Chrome 打开实际保存的 HTML，核对内联 SVG 的计算填色。这能验证当前浏览器里的这份标记和样式，不能证明所有品牌色的对比度或所有发布工具的兼容性。
| 区域 | 固定填色标志 | currentColor 标志 |
|---|---|---|
| 浅色 | #303036 | #303036 |
| 深色 | #303036 | #FAF6ED |
保留外部图片作为对照
通过 img 加载的 SVG 是独立图片文档。父页面声明 color，并不等于指示其中的路径改色。我们的外部图片对照有意展示这一边界。若网站需要带主题色的外部文件，可以明确导出颜色版本，或采用合适的内联实现。
第一次生成的 HTML 在数据 URI 中有错误的引号，Ciyo 在最终浏览器核对前修正了编码。这说明应该查看实际渲染的文件，而不是仅凭看似合理的代码块验收。
集成前查看保存的页面
打开下面的示例，检查两种背景，再以目标尺寸核对实际页头标志。颜色修改在技术上正确，小细节仍可能看不清。若标志可交互，还应分别检查焦点、链接名称和可访问文本。
HTML 自包含，源码没有脚本。其中的 CSS 与内联标记是供开发者检查的示例，不会自动更新线上网站。
随文件交付颜色规则
把未经修改的母版、编辑后的 SVG 和核对过的 HTML 一起交付，写清测试过的插入方式与每种背景对应颜色，避免同事把正确文件放进无法继承预期颜色的环境。
多色品牌应先约定哪些区域保留固定颜色。先从受控的单色标志开始，保留刻意设计的品牌色关系，不要把所有填色都一律改为 currentColor。
实用问答
currentColor 会改变外部 img 的颜色吗？
父页面的 color 不会自动进入独立 SVG 图片文档。请测试插入方式，按需使用明确的颜色版本。
本例重画标志了吗？
没有。只改了一个 fill 值，路径数据与 viewBox 和母版一致。
深色模式颜色正确就足够无障碍了吗？
还不够。请在最终界面检查对比度、尺寸、名称和链接行为。
在两种背景上测试一个标志
把已确认的 SVG 放进 Ciyo，要求保留浏览器示例，再把编辑文件交给网站开发者。