svg图标的简易编辑

[johnwang]

自己写工具台的时候需要一些图标。fc可以使用svg文件。我们可以找到一些例子，简单编辑一下。这里以在C:\FreeCAD_0.19\Mod\TechDraw\TDTest\TestSymbol.svg下的这个文件示范一下。该图标包括一个蓝色矩形，红色圆和一行黑色文字SVG。

svg.jpg (22.93 KiB) Viewed 14721 times

用文本编辑器打开该文件，在<g和</g>之间，可以看到矩形是<rect.../>, 圆是<path.../>,文字是<text...</text>.

svg2.jpg (79.62 KiB) Viewed 14717 times

我们可以试着将文字SVG换掉. 找到这行

Code: Select all

id="tspan3763">SVG</tspan><tspan

比如换成FC，结果如下

Code: Select all

id="tspan3763">FC</tspan><tspan

保存文件，在文件浏览器里双击该文件，网页浏览器就自动打开该文件，你看到变化了么？

[johnwang]

Path可以画任何图形，跟绘图仪一样。

Code: Select all

d="m 48.571428,33.57143 a 18.571428,18.571428 0 1 1 -37.142856,0 18.571428,18.571428 0 1 1 37.142856,0 z"

其中的m命令是move移动画笔，后面跟的两个数是x,y坐标。小m是相对移动，从笔的当前位置向右向下移动该数值。大M是移动绝对距离到该坐标点。
L是画线，H画水平线，V'画垂直线。Z是封闭曲线，回到最初M的落笔点。例子中的圆是由画弧命令A完成的。

这里有更多介绍
https://css-tricks.com/svg-path-syntax- ... ted-guide/

[paullee]

可以介紹更簡易的方法嗎? Inkscape 等 ?

[johnwang]

可以介紹更簡易的方法嗎? Inkscape 等 ?

Inkscape对我来说太复杂了，命令太多。比如画个叶片的图标，手画的不好看。

[johnwang]

这是一个简化的例子。就是一条水平线。但是要画一个矩形，内部被网页浏览器自动填充。画框的大小是（0，0）-（1，1）。文件内容就这几句话。

Code: Select all

<svg class="icon  icon--plus" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.2 0.4 h 0.8 v 0.2 h -0.8 Z" />
</svg>

[johnwang]

最简单的文字

Code: Select all

<svg class="icon  icon--plus" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<text x=".25" y=".55" font-size=".32">T</text>	
</svg>

text.svg

(141 Bytes) Downloaded 1045 times

[paullee]

除了Inkscape 外，有其它簡單軟件好用嗎?

[felixlee868]

SVG 中文简称是“可缩放矢量图形”。因此，这种文件格式的内容是一些指令。其本质是格式化文档类描述语言的子集。

如果你对Linux/Unix/Mac OS 环境熟悉，万能的编辑器 vim 或 emacs 都是处理 SVG 文件的神器。inkscape 也就是用图形化用户接口中的图标，包装产生 具有参数的 SVG 指令的函数。通过这些函数，来产生具体的指令，在转换过程中，当然会出现一些“冗余”指令。因此，如果你想使用 inkscape 来产生精确的 SVG 图形，会有些困难。( inkscape 版本差异会对输出结果产生影响)

与SVG图形相关最基础的知识，应在 W3C 的网站上找到英文原版规格说明。但这好对 programmer 来说，好象跨度有点大。
中文简单介绍，你可以从 w3cschool 这个网站找。

[johnwang]

改变字符的颜色，用到了fill="red"

Code: Select all

<svg class="icon  icon--plus" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<text x=".25" y=".55" font-size=".32" fill="red">T</text>	
</svg>

textcolor.svg

(152 Bytes) Downloaded 375 times

[johnwang]

改变线的颜色，用到了stroke="red" stroke-width=".1"，颜色和线宽都有了。只给起终点就可以了，不用画矩形了。

Code: Select all

<svg class="icon  icon--plus" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.2 0.4 h 0.8" stroke="red" stroke-width=".1" fill="none"/>
</svg>

linecolor.svg

(166 Bytes) Downloaded 407 times