svg 这玩意儿- -应该不是程序员写的吧- -。。。用代码写是不是会疯掉。。。

secondwtq

2017-09-02 16:35:17 +08:00

我觉得对于前端来讲，SVG 最重要的作用就是允许以声明式的形式实现较为复杂的视效。
前端视觉效果栈，从高层到底层大体是：CSS3 -> SVG -> Canvas -> Platform-specific Graphics Library
另外一条线是 Three.js (加进来是因为干活很多时候都用，相当于 jQuery 了) -> WebGL -> OpenGL/Direct3D -> GPU
这个的意思是，用 CSS3 能实现的，基本用 SVG 都能实现，用 SVG 能实现的，基本用 Canvas 都能实现，就好象说 Rust 能实现的，汇编也能实现一样
实践中很多用 Canvas 实现的效果其实完全可以用 SVG 实现，一定程度上也更有利于维护和调试

至于 SVG 单纯作为一个矢量图格式来讲，我觉得是定义了一种属于 Web 的开放统一的标准，这个和 HTML，UTF-8，XML 和 JSON 之类的是一样的道理，虽然存在其他的解决方案，但是 Web 这个东西会把这一套东西往 state of art 的方向推

很多东西事实上还差的很远，但是影响力确实是立竿见影的，比如 nanovg 这个库，显式地说有意地向 HTML5 Canvas API 靠拢，但是作为一个 gamedev 出的东西，你并看不出这货和 Web 有什么卵关系，至于 libRocket 更是臭不要脸

所以作为一个非专业人士的你也会发现硬盘里放的大多数矢量图都是 SVG 的 ...

nannanziyu

2017-09-02 18:45:55 +08:00

@bombless
从你的话里，明显你对于 xaml svg path 三个名词都不了解
我稍微给你科普一下，可以直接跳转到总结部分

首先假设你明白 xaml 是什么
然后 Path 是 WPF 里用来绘制曲线和复杂图形的一个类，可以直接写在 xaml 里
Path 有多种写法，最基础的就是一堆路径点，通过描述各个点和点之间的轨迹（直线，曲线比如贝塞尔曲线）等来完成一个矢量图的描述

和 SVG 不同，但是很接近

举个例子，齿轮（如下图）

SVG 是
<svg width="76px" height="76px"><path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 27.5314,21.8628L 33.0126,19.4224L 34.7616,23.3507C 36.6693,22.9269 38.6044,22.8903 40.4668,23.2026L 42.0083,19.1868L 47.6098,21.337L 46.0683,25.3528C 47.6612,26.3669 49.0747,27.6889 50.2088,29.2803L 54.1371,27.5313L 56.5776,33.0126L 52.6493,34.7616C 53.0731,36.6693 53.1097,38.6043 52.7974,40.4668L 56.8131,42.0083L 54.6629,47.6097L 50.6472,46.0683C 49.6331,47.6613 48.3111,49.0748 46.7197,50.2089L 48.4686,54.1372L 42.9874,56.5776L 41.2384,52.6493C 39.3307,53.0731 37.3957,53.1097 35.5333,52.7974L 33.9918,56.8131L 28.3903,54.6629L 29.9318,50.6472C 28.3388,49.6331 26.9252,48.3111 25.7911,46.7196L 21.8628,48.4686L 19.4224,42.9873L 23.3507,41.2383C 22.9269,39.3307 22.8903,37.3957 23.2026,35.5332L 19.1869,33.9918L 21.3371,28.3903L 25.3528,29.9318C 26.3669,28.3388 27.6889,26.9252 29.2804,25.7911L 27.5314,21.8628 Z M 34.3394,29.7781C 29.7985,31.7998 27.7564,37.1198 29.7781,41.6606C 31.7998,46.2015 37.1198,48.2436 41.6606,46.2219C 46.2015,44.2002 48.2436,38.8802 46.2219,34.3394C 44.2002,29.7985 38.8802,27.7564 34.3394,29.7781 Z "></path></svg>

xmal 里用 Path 里写是

<Canvas>
<Path Width="37.6263" Height="37.6262" Canvas.Left="19.1869" Canvas.Top="19.1868" Stretch="Fill" Fill="#FF000000" Data="F1 M 27.5314,21.8628L 33.0126,19.4224L 34.7616,23.3507C 36.6693,22.9269 38.6044,22.8903 40.4668,23.2026L 42.0083,19.1868L 47.6098,21.337L 46.0683,25.3528C 47.6612,26.3669 49.0747,27.6889 50.2088,29.2803L 54.1371,27.5313L 56.5776,33.0126L 52.6493,34.7616C 53.0731,36.6693 53.1097,38.6043 52.7974,40.4668L 56.8131,42.0083L 54.6629,47.6097L 50.6472,46.0683C 49.6331,47.6613 48.3111,49.0748 46.7197,50.2089L 48.4686,54.1372L 42.9874,56.5776L 41.2384,52.6493C 39.3307,53.0731 37.3957,53.1097 35.5333,52.7974L 33.9918,56.8131L 28.3903,54.6629L 29.9318,50.6472C 28.3388,49.6331 26.9252,48.3111 25.7911,46.7196L 21.8628,48.4686L 19.4224,42.9873L 23.3507,41.2383C 22.9269,39.3307 22.8903,37.3957 23.2026,35.5332L 19.1869,33.9918L 21.3371,28.3903L 25.3528,29.9318C 26.3669,28.3388 27.6889,26.9252 29.2804,25.7911L 27.5314,21.8628 Z M 34.3394,29.7781C 29.7985,31.7998 27.7564,37.1198 29.7781,41.6606C 31.7998,46.2015 37.1198,48.2436 41.6606,46.2219C 46.2015,44.2002 48.2436,38.8802 46.2219,34.3394C 44.2002,29.7985 38.8802,27.7564 34.3394,29.7781 Z "/></Canvas>

你可以简单的看出，Path 和 SVG 是很相似的。

总结：
所以如同我上一个回帖里说的
1，xaml 手写是很正常的，通过手写各种 Panel （ grid，stackpanel，canvas 等等）来排版，手写各种 Style，ControlTemplate,DataTemplate 是非常正常，而且几乎是一定的（对于我们这样的近十年 xaml 开发者来说，说实话除了复杂的 Animation 用 blend，其他都是手写。）
2，图形，除了简单的圆，多边形，三角可以手写外，复杂图形，比如上面的齿轮这样的，没有人能够手写，都要用工具来绘
3，SVG 也是一样