svg图标的简易编辑

Chinese forum
Post Reply
johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

svg图标的简易编辑

Post by johnwang » Wed Apr 29, 2020 11:11 pm

自己写工具台的时候需要一些图标。fc可以使用svg文件。我们可以找到一些例子,简单编辑一下。这里以在C:\FreeCAD_0.19\Mod\TechDraw\TDTest\TestSymbol.svg下的这个文件示范一下。该图标包括一个蓝色矩形,红色圆和一行黑色文字SVG。
svg.jpg
svg.jpg (22.93 KiB) Viewed 1841 times
用文本编辑器打开该文件,在<g和</g>之间,可以看到矩形是<rect.../>, 圆是<path.../>,文字是<text...</text>.
svg2.jpg
svg2.jpg (79.62 KiB) Viewed 1837 times
我们可以试着将文字SVG换掉. 找到这行

Code: Select all

id="tspan3763">SVG</tspan><tspan
比如换成FC,结果如下

Code: Select all

id="tspan3763">FC</tspan><tspan
保存文件,在文件浏览器里双击该文件,网页浏览器就自动打开该文件,你看到变化了么?

johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

Re: svg图标的简易编辑

Post by johnwang » Wed Apr 29, 2020 11:42 pm

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
Posts: 2661
Joined: Wed May 04, 2016 3:58 pm

Re: svg图标的简易编辑

Post by paullee » Wed Apr 29, 2020 11:54 pm

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

johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

Re: svg图标的简易编辑

Post by johnwang » Thu Apr 30, 2020 12:14 am

paullee wrote:
Wed Apr 29, 2020 11:54 pm
:D
可以介紹更簡易的方法嗎? Inkscape 等 ? :lol:
Inkscape对我来说太复杂了,命令太多。比如画个叶片的图标,手画的不好看。

johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

Re: svg图标的简易编辑

Post by johnwang » Thu Apr 30, 2020 12:29 am

这是一个简化的例子。就是一条水平线。但是要画一个矩形,内部被网页浏览器自动填充。画框的大小是(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>
Attachments
line.svg
(139 Bytes) Downloaded 65 times

johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

Re: svg图标的简易编辑

Post by johnwang » Sun Jul 26, 2020 2:27 am

最简单的文字

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 68 times

paullee
Posts: 2661
Joined: Wed May 04, 2016 3:58 pm

Re: svg图标的简易编辑

Post by paullee » Sun Jul 26, 2020 2:40 am

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

felixlee868
Posts: 60
Joined: Wed Jul 03, 2019 8:15 am

Re: svg图标的简易编辑

Post by felixlee868 » Wed Jul 29, 2020 3:14 pm

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

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

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

johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

Re: svg图标的简易编辑

Post by johnwang » Wed Aug 05, 2020 5:26 am

改变字符的颜色,用到了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 47 times

johnwang
Posts: 445
Joined: Sun Jan 27, 2019 12:41 am

Re: svg图标的简易编辑

Post by johnwang » Wed Aug 05, 2020 5:51 am

改变线的颜色,用到了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 46 times

Post Reply