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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2428 天前的主题，其中的信息可能已经有所发展或是发生改变。

RT 一般 svg 都是什么情况下用的- -怎么用的- -谁做 svg。。。求大佬科普。。。

svg

玩意儿

程序员

科普

45 条回复 • 2017-09-02 20:10:15 +08:00

joyqi

2017-09-01 20:46:53 +08:00

不会啊，我觉得 svg 很科学啊

k9982874

2017-09-01 20:48:08 +08:00 via iPhone

做过一个图标，挺方便

oisc

2017-09-01 20:48:19 +08:00

svg 为什么要用代码写？

Quaintjade

2017-09-01 20:55:33 +08:00 via Android

和 html, xml 差不多的风格，不过手写复杂图案确实比较繁琐。

porrat

2017-09-01 20:57:38 +08:00 via iPhone

设计师，AI 可以导出 SVG

t6attack

2017-09-01 21:03:08 +08:00

矢量图本身就是逐步计算产生的。用代码表示很科学很灵活啊。

designer

2017-09-01 21:09:30 +08:00 via iPhone

哈哈，我做 SVG
我的网站一般都是 svg logo

WispZhan

2017-09-01 21:09:32 +08:00

手动改改还可以，纯手写太慢。一般都是绘图工具生成的吧。

designer

2017-09-01 21:14:10 +08:00 via iPhone

Ai、Sketch、基本上很多设计软件都能输出 svg，用代码写 svg 很蛋疼的。除非是极简单的几何图形。
不过 svg 通过代码修改颜色挺好的。不用启动大的设计软件。
也可以通过代码做一些 svg 动画或者交互，不知道 svg 和 html5 的 canvas 哪个性能更好点。

designer

2017-09-01 21:20:08 +08:00 via iPhone

借道宣传下我的草莓图标库🍓
http://chuangzaoshi.com/icon/

debuggerx

2017-09-01 21:24:35 +08:00

我用 linux 下的 inkscape 做过一个动态的红包 svg ……
https://debuggerx01.github.io/SvgTest/
纯一个 html，svg 图片也在仓库里

EmmaSwan

2017-09-01 21:32:02 +08:00 via iPhone

非要强迫症自己写,只能说你真酷--,

Mutoo

2017-09-01 21:37:30 +08:00

SVG 是产品，矢量绘图软件是生产线。你当然可以手写 SVG，但是就像现在很少有人直接写汇编一样，没有必要去手写 SVG。

ljcarsenal

2017-09-01 21:38:59 +08:00

那么问题来了工具是怎么生成的

TYchen

2017-09-01 21:39:07 +08:00

@EmmaSwan 万一公司要求呢。。。

TYchen

2017-09-01 21:40:25 +08:00

@designer 大佬。。。

rashawn

2017-09-01 21:42:53 +08:00 via iPhone

都手写了还要什么设计软件建模工具干啥…

Tink

2017-09-01 21:48:10 +08:00 via iPhone

不应该程序员写

bombless

2017-09-01 21:50:07 +08:00

写 svg 有啥奇怪的…… xaml 和安卓 layout 都有手写的，更别说 html 了

nannanziyu

2017-09-01 22:17:53 +08:00

@bombless
这是一个概念嘛。。
xaml 手写多正常的，但是 xaml 里的 path，除了简单的三角多边形圆，你见过其他复杂的形状手写的吗？

rogwan

2017-09-01 22:22:56 +08:00 via Android

@designer 很漂亮！感觉比 font-awesome 好看

有几个问题请教：
1、整个 svg 库文件，加载完全，是多大？ font-awesome 貌似比较大，上百 k，放弃了
2、部分图标是不是可以考虑 12px 和 14px 支持啊
3、可以只使用单个图标吗。就是给<path>，这样就不用加载其他不需要的一大堆啦

XiaoxiaoPu

2017-09-01 22:46:10 +08:00

@rogwan font-awesome 有单个图标的 SVG https://github.com/encharm/Font-Awesome-SVG-PNG

gclove

2017-09-01 22:54:41 +08:00

@TYchen 手写... 大哥你是怎么想的
简单的是可以，大部分教程都是教你理解这种格式的原理

Khlieb

2017-09-01 22:58:24 +08:00 via Android

其实手写也是可以的，除非有需要，尤其是要临时做小修改的时候。Inkscape 里面有 XML 编辑器就是用来手写的。

Kilerd

2017-09-01 23:27:16 +08:00

https://icomoon.io/app/#/select

这里可以挑你自己用到的图标，然后打包成字体。

基本上就是几 K 大小的样子吧。挺好用的。

bombless

2017-09-01 23:58:45 +08:00 via Android

@nannanziyu 你大概不清楚 xaml 可以多复杂。不是很懂你的关注点在哪

kokutou

2017-09-02 00:13:46 +08:00

blender

!()[http://opxd3dflq.bkt.clouddn.com/Suzanne_and_teapot.svg]

kokutou

2017-09-02 00:13:55 +08:00

http://opxd3dflq.bkt.clouddn.com/Suzanne_and_teapot.svg

kokutou

2017-09-02 00:16:24 +08:00

@Livid
回帖里能让 svg 也跟图片一样自动显示吗？

phy25

2017-09-02 01:32:43 +08:00 via Android

@kokutou 你的图片地址不在 v2 可信域下，支持了也显示不出来吧。

mringg

2017-09-02 08:29:45 +08:00 via iPhone

用 d3js 能好些

duan602728596

2017-09-02 09:43:01 +08:00 via iPhone

AI 自己画啊

leekafai

2017-09-02 09:46:02 +08:00 via Android

路径是很难写啊。
手打贝塞尔曲线岂不美哉。
但是难写不代表不能写，看你选择咯。
适合自己的就好了，就像我，手打贝塞尔曲线显然不实际，那我就拿软件做咯，再复杂也秒了，美滋滋。
当然，不排除大神手写贝塞尔曲线，参考楼上吧。
还有一点就是，拿软件做可以丢给美工去搞，如果代码的话可能要自己搞的(๑>؂<๑）

flyingkid

2017-09-02 10:23:11 +08:00

纯手写 svg 图标，老实说只有学习 svg 有帮助。
工作里面一般应该没人这么做，如果图标简单还好，复杂的话你可以写很久。还不一定能写的和原稿差不多。所以这件事基本上应该是设计师做的。你需要做的事情是优化它。
例如这个网站： https://jakearchibald.github.io/svgomg/

Coande

2017-09-02 10:40:54 +08:00 via Android

貌似 Chrome 不推荐使用 svg 了吧

Khlieb

2017-09-02 11:16:17 +08:00 via Android

@Coande 官方博客写了？

tinytin

2017-09-02 11:46:50 +08:00 via iPhone

改个颜色什么的还可以

holajamc

2017-09-02 12:00:27 +08:00

我用 svg 画了整个网站……

chuxiaonan

2017-09-02 13:29:29 +08:00

1. 图的一部分需要修改颜色，同时相应不同的点击、鼠标移入、移出事件
2. 图的一部分需要根据一定的条件呈现不同的动画
3. 可以进行无穷动画，可以在动画进行的过程中随时暂停、恢复动画

虽然这些功能全部可以用 canvas 完成
然！而！
谁让 UI 导出的设计稿只有 s ！ v ！ g ！格！式！的！

yuhr123

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

用 inkscape 或 ai 设计，导出 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 也是一样

janily

2017-09-02 20:07:03 +08:00

现在浏览器对 SVG 支持的越来越好了，无论是在视觉还是动效上，SVG 都能大大的提升 web 的表现力，至于 SVG 在 web 上的应用，可以看看我这个关于 SVG 应用知识的网站 [svgtrick]( http://svgtrick.com/)，里面介绍了 SVG 应用的方方面面。

janily

2017-09-02 20:07:47 +08:00

http://svgtrick.com/

hellohello123

2017-09-02 20:10:15 +08:00

为什么要自己用代码写 svg，不都是 UI 提供的么