You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
5.4 KiB
151 lines
5.4 KiB
2 years ago
|
= SVG
|
||
|
|
== svg-path-editor
|
||
|
|
该工具可在浏览器中直接创建和编辑 SVG Path。
|
||
|
|
|
||
|
|
=== 安装使用方法
|
||
|
|
[source,bash]
|
||
|
|
----
|
||
|
|
# 下载源码
|
||
|
|
git clone https://github.com/Yqnn/svg-path-editor.git
|
||
|
|
|
||
|
|
# 构建 docker 镜像
|
||
|
|
docker build -t svg-path-editor .
|
||
|
|
|
||
|
|
# 启动 docker 容器
|
||
|
|
docker run \
|
||
|
|
--name svg-path-editor \
|
||
|
|
-d \
|
||
|
|
-p 4200:4200 \
|
||
|
|
svg-path-editor
|
||
|
|
----
|
||
|
|
启动成功后，访问 http://localhost:4200
|
||
|
|
|
||
|
|
== SVGEdit
|
||
|
|
SVGEdit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.
|
||
|
|
SVGEdit is based on a powerful SVG canvas @svgedit/svgcanvas
|
||
|
|
|
||
|
|
源码地址: https://github.com/SVG-Edit/svgedit.git
|
||
|
|
|
||
|
|
== svg-text-to-path
|
||
|
|
Convert svg nodes to vector font-free elements.
|
||
|
|
|
||
|
|
源码地址: https://github.com/paulzi/svg-text-to-path.git
|
||
|
|
|
||
|
|
== 通过 GIMP 提取 svg 中的 path
|
||
|
|
|
||
|
|
打开 svg 文件:
|
||
|
|
|
||
|
|
image::9999-appendix/tools/svg/001.png[,20%]
|
||
|
|
|
||
|
|
调整文件大小，并选择"导入路径"及"合并导入的路径"选项:
|
||
|
|
|
||
|
|
image::9999-appendix/tools/svg/002.png[,80%]
|
||
|
|
|
||
|
|
导出路径文件(导出的文件仍然是 .svg):
|
||
|
|
|
||
|
|
image::9999-appendix/tools/svg/003.png[,80%]
|
||
|
|
|
||
|
|
打开导出的文件，查找其中的 path,对比前后两个文件内容:
|
||
|
|
[cols="1,1"]
|
||
|
|
|===
|
||
|
|
| 原 svg 文件(CN.svg)
|
||
|
|
| 导出的 Path 文件 (CN_PATH.svg)
|
||
|
|
|
||
|
|
a|
|
||
|
|
[source,xml]
|
||
|
|
----
|
||
|
|
<?xml version="1.0" encoding="utf-8"?>
|
||
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
|
||
|
|
<rect fill="#D80027" width="513" height="342"/>
|
||
|
|
<g fill="#FFDA44">
|
||
|
|
<polygon points="226.8,239.2 217.1,223.6 199.2,228 211.1,213.9 201.4,198.3 218.5,205.2 230.3,191.1 229,209.5 246.1,216.4 228.2,220.8"/>
|
||
|
|
<polygon points="290.6,82 280.5,97.4 292.1,111.7 274.4,106.9 264.3,122.4 263.3,104 245.6,99.2 262.8,92.6 261.8,74.2 273.4,88.5"/>
|
||
|
|
<polygon points="236.2,25.4 234.2,43.7 251,51.3 233,55.1 231,73.4 221.8,57.4 203.9,61.2 216.2,47.5 207,31.6 223.8,39.1"/>
|
||
|
|
<polygon points="292.8,161.8 277.9,172.7 283.7,190.2 268.8,179.4 253.9,190.4 259.5,172.8 244.6,162.1 263,162 268.6,144.4 274.4,161.9"/>
|
||
|
|
<polygon points="115,46.3 132.3,99.8 188.5,99.8 143.1,132.7 160.4,186.2 115,153.2 69.5,186.2 86.9,132.7 41.4,99.8 97.7,99.8"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
----
|
||
|
|
a|
|
||
|
|
[source,xml]
|
||
|
|
----
|
||
|
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||
|
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="0.355556in" height="0.233333in"
|
||
|
|
viewBox="0 0 32 21">
|
||
|
|
<path id="导入的路径"
|
||
|
|
fill="none" stroke="black" stroke-width="1"
|
||
|
|
d="M 7.17,2.84
|
||
|
|
C 7.17,2.84 8.25,6.13 8.25,6.13
|
||
|
|
8.25,6.13 11.76,6.13 11.76,6.13
|
||
|
|
11.76,6.13 8.93,8.15 8.93,8.15
|
||
|
|
8.93,8.15 10.01,11.43 10.01,11.43
|
||
|
|
10.01,11.43 7.17,9.41 7.17,9.41
|
||
|
|
7.17,9.41 4.34,11.43 4.34,11.43
|
||
|
|
4.34,11.43 5.42,8.15 5.42,8.15
|
||
|
|
5.42,8.15 2.58,6.13 2.58,6.13
|
||
|
|
2.58,6.13 6.09,6.13 6.09,6.13
|
||
|
|
6.09,6.13 7.17,2.84 7.17,2.84 Z
|
||
|
|
M 18.26,9.94
|
||
|
|
C 18.26,9.94 17.33,10.60 17.33,10.60
|
||
|
|
17.33,10.60 17.70,11.68 17.70,11.68
|
||
|
|
17.70,11.68 16.77,11.02 16.77,11.02
|
||
|
|
16.77,11.02 15.84,11.69 15.84,11.69
|
||
|
|
15.84,11.69 16.19,10.61 16.19,10.61
|
||
|
|
16.19,10.61 15.26,9.95 15.26,9.95
|
||
|
|
15.26,9.95 16.41,9.95 16.41,9.95
|
||
|
|
16.41,9.95 16.75,8.87 16.75,8.87
|
||
|
|
16.75,8.87 17.12,9.94 17.12,9.94
|
||
|
|
17.12,9.94 18.26,9.94 18.26,9.94 Z
|
||
|
|
M 14.73,1.56
|
||
|
|
C 14.73,1.56 14.61,2.68 14.61,2.68
|
||
|
|
14.61,2.68 15.66,3.15 15.66,3.15
|
||
|
|
15.66,3.15 14.53,3.38 14.53,3.38
|
||
|
|
14.53,3.38 14.41,4.51 14.41,4.51
|
||
|
|
14.41,4.51 13.84,3.52 13.84,3.52
|
||
|
|
13.84,3.52 12.72,3.76 12.72,3.76
|
||
|
|
12.72,3.76 13.49,2.92 13.49,2.92
|
||
|
|
13.49,2.92 12.91,1.94 12.91,1.94
|
||
|
|
12.91,1.94 13.96,2.40 13.96,2.40
|
||
|
|
13.96,2.40 14.73,1.56 14.73,1.56 Z
|
||
|
|
M 18.13,5.04
|
||
|
|
C 18.13,5.04 17.50,5.98 17.50,5.98
|
||
|
|
17.50,5.98 18.22,6.86 18.22,6.86
|
||
|
|
18.22,6.86 17.12,6.56 17.12,6.56
|
||
|
|
17.12,6.56 16.49,7.52 16.49,7.52
|
||
|
|
16.49,7.52 16.42,6.39 16.42,6.39
|
||
|
|
16.42,6.39 15.32,6.09 15.32,6.09
|
||
|
|
15.32,6.09 16.39,5.69 16.39,5.69
|
||
|
|
16.39,5.69 16.33,4.56 16.33,4.56
|
||
|
|
16.33,4.56 17.05,5.43 17.05,5.43
|
||
|
|
17.05,5.43 18.13,5.04 18.13,5.04 Z
|
||
|
|
M 14.15,14.69
|
||
|
|
C 14.15,14.69 13.54,13.73 13.54,13.73
|
||
|
|
13.54,13.73 12.43,14.00 12.43,14.00
|
||
|
|
12.43,14.00 13.17,13.13 13.17,13.13
|
||
|
|
13.17,13.13 12.56,12.18 12.56,12.18
|
||
|
|
12.56,12.18 13.63,12.60 13.63,12.60
|
||
|
|
13.63,12.60 14.37,11.73 14.37,11.73
|
||
|
|
14.37,11.73 14.28,12.86 14.28,12.86
|
||
|
|
14.28,12.86 15.35,13.29 15.35,13.29
|
||
|
|
15.35,13.29 14.23,13.56 14.23,13.56
|
||
|
|
14.23,13.56 14.15,14.69 14.15,14.69 Z
|
||
|
|
M 32.00,0.00
|
||
|
|
C 32.00,0.00 32.00,21.00 32.00,21.00
|
||
|
|
32.00,21.00 0.00,21.00 0.00,21.00
|
||
|
|
0.00,21.00 0.00,0.00 0.00,0.00
|
||
|
|
0.00,0.00 32.00,0.00 32.00,0.00 Z" />
|
||
|
|
</svg>
|
||
|
|
----
|
||
|
|
|===
|
||
|
|
|
||
|
|
== country-flag-icons
|
||
|
|
该图标集包含各个国家的图标 svg 文件, 包含长宽 1:1 和 3:2 两种比例的图标。
|
||
|
|
|
||
|
|
源码地址: https://gitlab.com/catamphetamine/country-flag-icons
|
||
|
|
|
||
|
|
npm 包地址: https://www.npmjs.com/package/country-flag-icons
|