自定义 SVG 图标使用教程

地图帮

自定义 SVG 图标使用教程

地图帮支持在地图制作中使用你自己的 SVG 矢量图标，替代系统预设图标。你可以用品牌 Logo、行业图标或任何你喜欢的矢量图形来标注地图网点。

一、准备 SVG 图标文件

1.1 什么是 SVG？

SVG（Scalable Vector Graphics）是一种矢量图形格式，放大缩小都不会模糊，非常适合做地图图标。

地图帮 仅支持 SVG 格式，不支持 PNG、JPG 等位图。

1.2 图标文件要求

要求项	说明
文件格式	`.svg` 后缀
文件大小	单个文件不超过 50 KB
建议尺寸	`viewBox="0 0 24 24"` 或 `viewBox="0 0 48 48"` 等正方形比例
颜色建议	不要在 SVG 中写死颜色（即不要固定 `fill="#FF0000"` 之类），系统会自动根据分类配色注入颜色
文件名	支持中文和英文，文件名会直接显示在图标选择下拉框中

1.3 关于颜色的特别说明

地图帮会自动为你的图标注入颜色。如果你的 SVG 文件中已经写死了 fill 颜色，系统会尝试移除并替换为当前分类配色。

最佳做法：SVG 中不指定 fill 属性，或使用 fill="currentColor"
可接受：SVG 中有固定 fill，系统会自动替换
不推荐：多层嵌套且每层都有不同 fill 的复杂 SVG（替换效果可能不理想）

二、将图标放入指定目录

2.1 打开自定义图标目录

有两种方式打开目录：

方式一：通过软件界面（推荐）

打开地图帮 → 进入「地图制作」功能
在右侧「网点样式设置」卡片中，找到「自定义图标」区域
点击 「打开图标目录」 按钮
系统会自动用文件管理器打开目标目录

方式二：手动定位

地图帮安装目录/static/icons/custom/

如果该目录不存在，点击「打开图标目录」按钮后系统会自动创建。

2.2 复制图标文件

将你准备好的 .svg 文件直接复制粘贴到这个目录中即可。

示例目录结构：

static/icons/custom/
├── 品牌Logo.svg
├── 咖啡店.svg
├── 加油站.svg
├── 便利店.svg
└── README.md（说明文件，请勿删除）

三、在地图制作中使用自定义图标

3.1 开启自定义图标

进入「地图制作」→ 导入数据后进入「网点样式设置」
找到 「自定义图标」 设置行
将右侧开关打开（切换为 ON）

3.2 系统自动扫描

开关打开后，系统会自动扫描 static/icons/custom/ 目录：

扫描成功：顶部会弹出绿色提示 "已加载 N 个自定义图标"，图标下拉框会切换为你的自定义图标列表
目录为空或无有效文件：弹出黄色警告提示，开关会自动回退为关闭状态

3.3 选择图标

在「网点图标」下拉框中选择你想要的自定义图标。下拉框中的名称就是你的 SVG 文件名（不含 .svg 后缀）。

3.4 生成地图

选好图标后，正常点击「生成地图」即可。地图上的每个网点都会使用你选择的自定义图标，并且颜色会自动匹配你设置的分类配色方案。

3.5 关闭自定义图标

将开关切换回 OFF，图标下拉框会自动恢复为系统预设图标，默认选中「圆点-小」。

四、刷新图标列表

如果你在开关已打开的状态下，往目录中新增或删除了 SVG 文件：

点击开关旁边的 刷新按钮（🔄 图标）
系统会重新扫描目录并更新下拉框
如果之前选中的图标仍然存在，会保持选中状态

五、常见问题

Q1：开关打开后提示"未检测到自定义图标"

原因：static/icons/custom/ 目录中没有合法的 SVG 文件。

解决方法：

确认文件后缀是 .svg（注意不是 .SVG 大写）
确认文件大小不超过 50 KB
确认文件确实放在了正确的目录中

Q2：图标在地图上显示为水滴形状而不是我的图标

原因：SVG 文件在地图生成时可能被删除或无法读取。

解决方法：

确认 SVG 文件仍然在目录中
尝试用浏览器打开该 SVG 文件，确认它是有效的 SVG 格式
检查文件是否被其他程序占用

Q3：图标颜色没有按分类变化

原因：SVG 文件中可能有多层嵌套的固定颜色定义。

解决方法：

用文本编辑器打开 SVG 文件
删除所有 fill="..." 属性（保留 fill="none" 除外，none 表示透明）
或者在下载图标时选择单色版本

Q4：支持 PNG 或 JPG 图标吗？

不支持。地图帮仅支持 SVG 矢量格式，因为：

SVG 可以任意缩放不模糊
SVG 支持动态注入颜色，与分类配色体系兼容
SVG 文件体积更小

六、推荐图标资源

iconfont — 阿里巴巴矢量图标库

推荐使用 iconfont（阿里巴巴矢量图标库）下载免费的 SVG 矢量图标：

🔗 https://www.iconfont.cn/

这是国内最大的矢量图标平台，拥有海量免费图标，涵盖商业、餐饮、交通、医疗、教育等各行各业。

下载步骤

打开 https://www.iconfont.cn/ 并注册登录
在搜索框输入你需要的图标关键词（如"咖啡"、"加油站"、"超市"）
找到合适的图标后，点击图标进入详情页
选择 SVG 下载
将下载的 .svg 文件复制到 static/icons/custom/ 目录即可

使用建议

优先选择单色、线条简洁的图标，在地图小尺寸下辨识度更高
建议选择正方形比例的图标（宽高一致），避免变形
如果图标带有固定颜色，下载后可以用文本编辑器手动删除 fill 属性

版权提醒：iconfont 上的图标虽然可以免费下载使用，但请务必注意各图标的版权协议说明。部分图标可能仅限个人使用，商业使用前请确认图标作者的授权范围，尊重设计师的劳动成果。

自定义 SVG 图标使用教程

内容目录