SVG动效Logo一键生成

1. 运行方式

这是一个纯静态网页项目，源码包含三个核心文件：

• index.html：页面结构
• styles.css：页面样式和交互动效
• script.js：Logo SVG 生成、动画、下载逻辑

在项目目录中启动一个静态服务器即可预览。

# 进入源码目录
cd qinghe-svg-logo-generator

# 使用 Python 启动本地静态服务器
python3 -m http.server 8000

浏览器打开：

http://127.0.0.1:8000/

也可以直接双击 index.html 打开，但推荐使用本地服务器，字体和资源加载更稳定。

2. 基础使用

1. 在“工作室名称”输入完整名称，例如 九玖屋。
2. 在“前缀字母”输入英文前缀，例如 JJW。
3. 调整字号、名称颜色、前缀颜色和画布尺寸。
4. 选择“字母字体”和“字母特效”。
5. 点击“一键生成”刷新演示画布。
6. 点击“下载 SVG”导出带动画的 4K SVG 文件。

3. 画布尺寸

内置尺寸包括：

• 1400 x 460：横版 Logo，适合网页页头和品牌展示
• 1920 x 630：高清横版，适合海报和大屏
• 1200 x 1200：方形，适合头像和社交平台
• 1080 x 1920：竖版，适合手机海报和短视频封面
• 自定义尺寸：宽度 320-4000，高度 240-4000

4. 透明模式

选择“透明模式”后，下载的 SVG 不会写入背景矩形，是真透明背景。

页面预览区会显示棋盘格，用于提示当前背景是透明的。

透明模式会额外启用更强的文字描边、光晕和辅助高亮，方便叠加到海报、视频或深浅不同的背景上。

5. 动效说明

Logo SVG 内置以下动效：

• 工作室名称逐字出现
• 前缀字母逐帧显现
• 字母特效光晕、描边、电光、镜影等动画
• 全局向右流动光带
• 下载后的 SVG 保留动画效果，并按当前画布比例导出为 4K 尺寸

6. 修改默认值

默认工作室名称和前缀在 index.html 中修改：

<input id="studioName" value="九玖屋">
<input id="markText" value="JJW">

修改后刷新页面即可生效。

7. 修改字体和特效

字体配置在 script.js 的 markFontPresets 中。

字母特效由 script.js 中的模板函数生成，包括：

• buildFrameEffect
• buildThunderEffect
• buildMirrorEffect
• buildBusinessEffect
• buildFontMark

新增按钮时，需要在 index.html 中添加对应 data-font 或 data-template，并在 script.js 中补充对应逻辑。

8. 部署上线

这是纯静态站点，可以部署到任意静态托管服务。

常见方式：

• Nginx 静态目录
• GitHub Pages
• Netlify
• Vercel
• 对象存储静态网站

只需要上传以下文件：

• index.html
• styles.css
• script.js

9. 注意事项

• SVG 动效依赖浏览器对 SVG <style> 和 CSS animation 的支持。
• Google Fonts 需要网络可访问，离线环境会回退到系统字体。
• 透明模式导出的是透明 SVG，部分图片查看器可能显示白底，这取决于查看器背景。