RT 一般 svg 都是什么情况下用的- -怎么用的- -谁做 svg。。。求大佬科普。。。
1
joyqi 2017-09-01 20:46:53 +08:00
不会啊,我觉得 svg 很科学啊
|
2
k9982874 2017-09-01 20:48:08 +08:00 via iPhone
做过一个图标,挺方便
|
3
oisc 2017-09-01 20:48:19 +08:00
svg 为什么要用代码写?
|
4
Quaintjade 2017-09-01 20:55:33 +08:00 via Android
和 html, xml 差不多的风格,不过手写复杂图案确实比较繁琐。
|
5
porrat 2017-09-01 20:57:38 +08:00 via iPhone
设计师,AI 可以导出 SVG
|
6
t6attack 2017-09-01 21:03:08 +08:00
矢量图本身就是逐步计算产生的。用代码表示很科学很灵活啊。
|
7
designer 2017-09-01 21:09:30 +08:00 via iPhone
哈哈,我做 SVG
我的网站一般都是 svg logo |
8
WispZhan 2017-09-01 21:09:32 +08:00
手动改改还可以,纯手写太慢。一般都是绘图工具生成的吧。
|
9
designer 2017-09-01 21:14:10 +08:00 via iPhone
Ai、Sketch、基本上很多设计软件都能输出 svg,用代码写 svg 很蛋疼的。除非是极简单的几何图形。
不过 svg 通过代码修改颜色挺好的。不用启动大的设计软件。 也可以通过代码做一些 svg 动画或者交互,不知道 svg 和 html5 的 canvas 哪个性能更好点。 |
10
designer 2017-09-01 21:20:08 +08:00 via iPhone 7
借道宣传下我的草莓图标库🍓
http://chuangzaoshi.com/icon/ |
11
debuggerx 2017-09-01 21:24:35 +08:00 1
|
12
EmmaSwan 2017-09-01 21:32:02 +08:00 via iPhone
非要强迫症自己写,只能说你真酷--,
|
13
Mutoo 2017-09-01 21:37:30 +08:00
SVG 是产品,矢量绘图软件是生产线。你当然可以手写 SVG,但是就像现在很少有人直接写汇编一样,没有必要去手写 SVG。
|
14
ljcarsenal 2017-09-01 21:38:59 +08:00
那么问题来了 工具是怎么生成的
|
17
rashawn 2017-09-01 21:42:53 +08:00 via iPhone
都手写了 还要什么设计软件 建模工具干啥…
|
18
Tink 2017-09-01 21:48:10 +08:00 via iPhone
不应该程序员写
|
19
bombless 2017-09-01 21:50:07 +08:00
写 svg 有啥奇怪的…… xaml 和安卓 layout 都有手写的,更别说 html 了
|
20
nannanziyu 2017-09-01 22:17:53 +08:00
|
21
rogwan 2017-09-01 22:22:56 +08:00 via Android 1
@designer 很漂亮!感觉比 font-awesome 好看
有几个问题请教: 1、整个 svg 库文件,加载完全,是多大? font-awesome 貌似比较大,上百 k,放弃了 2、部分图标是不是可以考虑 12px 和 14px 支持啊 3、可以只使用单个图标吗。就是给<path>,这样就不用加载其他不需要的一大堆啦 |
22
XiaoxiaoPu 2017-09-01 22:46:10 +08:00
@rogwan font-awesome 有单个图标的 SVG https://github.com/encharm/Font-Awesome-SVG-PNG
|
24
Khlieb 2017-09-01 22:58:24 +08:00 via Android
其实手写也是可以的,除非有需要,尤其是要临时做小修改的时候。Inkscape 里面有 XML 编辑器就是用来手写的。
|
25
Kilerd 2017-09-01 23:27:16 +08:00
|
26
bombless 2017-09-01 23:58:45 +08:00 via Android
@nannanziyu 你大概不清楚 xaml 可以多复杂。不是很懂你的关注点在哪
|
27
kokutou 2017-09-02 00:13:46 +08:00
|
28
kokutou 2017-09-02 00:13:55 +08:00
|
31
mringg 2017-09-02 08:29:45 +08:00 via iPhone
用 d3js 能好些
|
32
duan602728596 2017-09-02 09:43:01 +08:00 via iPhone
AI 自己画啊
|
33
leekafai 2017-09-02 09:46:02 +08:00 via Android
路径是很难写啊。
手打贝塞尔曲线岂不美哉。 但是难写不代表不能写,看你选择咯。 适合自己的就好了,就像我,手打贝塞尔曲线显然不实际,那我就拿软件做咯,再复杂也秒了,美滋滋。 当然,不排除大神手写贝塞尔曲线,参考楼上吧。 还有一点就是,拿软件做可以丢给美工去搞,如果代码的话可能要自己搞的(๑><๑) |
34
flyingkid 2017-09-02 10:23:11 +08:00
纯手写 svg 图标,老实说只有学习 svg 有帮助。
工作里面一般应该没人这么做,如果图标简单还好,复杂的话你可以写很久。还不一定能写的和原稿差不多。所以这件事基本上应该是设计师做的。你需要做的事情是优化它。 例如这个网站: https://jakearchibald.github.io/svgomg/ |
35
Coande 2017-09-02 10:40:54 +08:00 via Android
貌似 Chrome 不推荐使用 svg 了吧
|
37
tinytin 2017-09-02 11:46:50 +08:00 via iPhone
改个颜色什么的还可以
|
38
holajamc 2017-09-02 12:00:27 +08:00
我用 svg 画了整个网站……
|
39
chuxiaonan 2017-09-02 13:29:29 +08:00
1. 图的一部分需要修改颜色,同时相应不同的点击、鼠标移入、移出事件
2. 图的一部分需要根据一定的条件呈现不同的动画 3. 可以进行无穷动画,可以在动画进行的过程中随时暂停、恢复动画 虽然这些功能全部可以用 canvas 完成 然!而! 谁让 UI 导出的设计稿只有 s ! v ! g !格!式!的! |
40
yuhr123 2017-09-02 15:18:55 +08:00
用 inkscape 或 ai 设计,导出 svg 来用。
|
41
secondwtq 2017-09-02 16:35:17 +08:00 1
我觉得对于前端来讲,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 的 ... |
42
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 也是一样 |
43
janily 2017-09-02 20:07:03 +08:00
现在浏览器对 SVG 支持的越来越好了,无论是在视觉还是动效上,SVG 都能大大的提升 web 的表现力,至于 SVG 在 web 上的应用,可以看看我这个关于 SVG 应用知识的网站 [svgtrick]( http://svgtrick.com/),里面介绍了 SVG 应用的方方面面。
|
44
janily 2017-09-02 20:07:47 +08:00
|
45
hellohello123 2017-09-02 20:10:15 +08:00
为什么要自己用代码写 svg,不都是 UI 提供的么
|