A. html5 svg 数据怎么生成
去找 SVG 转换器，就能把图片从位图转换成 SVG 代码
B. 如何在HTML5中使用SVG
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。可以用height="100px" width="200px" 为其添加高度和宽度。
现在就将SVG元素加入到HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green;”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>
C. 如何在HTML5中使用SVG画图
svg跟html标签一样使用就可以了，<div><svg><path></path></svg></div>
或者你也可以直接在网络搜索《如何在HTML5中使用SVG》第一条就说得很详细，用SVG画直线，画圆，椭圆，矩形。里面都有详细的介绍；
D. html 直接使用svg图片不能显示
html 直接使用svg图片不能显示是设置错误造成的，解决方法为：
1、点击电脑开始菜单，找到Inscape工具并点击打开。
E. snap.svg 可以直接操作svg元素吗
有人说不会 SVG 的前端开发者不叫开发者，而叫爱好者。前端不光是 Angularjs 了，这时候再不学 SVG 就晚了！（如果你只会 jQuery 就当我没说。。。）这里我就给大家分享一个前几天在别处看到的一个高大上的 SVG 效果，左边菜单弹出来会动动弹的说，链接点这里。 当时我就震惊了，今天抽空搞清了源码，然后下面是我潜心研究后做出来的 Demo，虽然比较粗糙，但还是很洋气的感觉呢。下面我就这个 DEMO 跟大家分享一下。 jsfiddle.net/windwhinny/n6w1ur5k/3/ 本案例需要有些 PS 或者 AI 中路径的知识，下面是本例中运涉及到的知识点和工具： snap.svg svg path data Adobe Illustrator animation timing 先给出原理：根据时间变换坐标。如下图所示，本例其实就是 A、B、C 三条线之间的转换，A 是初始状态，点击后经过 B 最后形成 C。其中有两次动画，分别是 A-B 和 B-C，而这两次动画的 timing function 和时间都是不同的。 第一步：画草稿 做动画前第一步就是画草稿（如上图），我一般用 AI 来画，因为 AI 可以精确的控制元素尺寸和位置，而且其原理和 SVG 是一样的。 然后有的同学就会说，“老湿，是不是要保存为 SVG 格式的，然后做修改啊？” 错 画草稿图的目的只是为了方便的确定每个点的坐标，自己算太麻烦了，而且还容易出错。除此之外 AI 没有任何作用。AI 生成的 SVG 文件在此例中根本不能拿来用，因为其中的路劲点太混乱了，下面会详说。 什么？你不会用 AI ？ 如果你还想在前端这条路上走下去的话，那现在就去学吧。（在这里我想吐槽一下，PS 是用来处理点阵图片的，根本不适合拿来做设计图。相比之下 AI 才是做这个的，google 给出的 metrial design 布局模板全都是 AI 格式的。但国内不管是什么企业，用 PS 都好像很开心的样子，不知道为什么。） 第二步：计算路径 这一步就比较复杂了，上面说过了，这个动画其实就是坐标之间转换。而从四边形到圆弧之间的转换不光是坐标位移而已，还有曲线弧度的转换。上面的设计图直接保存为 SVG 后代码如下： 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="图层_1" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" x="0px" y="0px" viewBox="0 0 175 175" enable-background="new 0 0 175 175" xml:space="preserve"> <!-- 路径 A --> <path fill="none" stroke="#BF3A41" stroke-miterlimit="10" d=" M12.5,12.5 h75 h75 v75 v75 h-75 h-75 v-35 V12.5z"/> <!-- 路径 B --> <path fill="none" stroke="#0000FF" stroke-miterlimit="10" d=" M37.5,37.5 c0,0,10-25,50-25 s50,25,50,25 s25,10,25,50 s-25,50-25,50 s-10,25-50,25 s-50-25-50-25 s-25.1-10-25.1-50 S37.5,37.5,37.5,37.5z"/> <!-- 路径 C --> <path fill="none" stroke="#000000" stroke-miterlimit="10" d=" M37.5,37.5 h50 h50 v50 v50 h-50 h-50 v-50 V37.5z"/> </svg> 我们只需要关注路径的 d 属性就行了，可以看出，AB 两个路径之间还是可以互相转换的，但他们和 C 路径（有弧线的路径）之间就不能转换了。他们所用到的绘图命令都不同，AB 两个都是矩形，绘图时用到的都是 h、v，也就是横纵之间的位移，画出来的都是横竖线。而 C 路劲用到的都是 s、c这些命令，画出来的都是曲线。所以 AI 给出来的图我们不能用，要自己根据 svg path data 重新绘制一遍。 下面我参照 AI 设计图重新绘制的三条路径： 复制代码 代码如下: <!-- 路径 A --> <path d=" M37.5,37.5 S87.5,37.5,87.5,37.5 S137.5,37.5,137.5,37.5 S137.5,87.5,137.5,87.5 S137.5,137.5,137.5,137.5 S87.5,137.5,87.5,137.5 S37.5,137.5,37.5,137.5 S37.5,87.5,37.5,87.5 S37.5,37.5,37.5,37.5z"> <!-- 路径 B --> <path d=" M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5 S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5 S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z"> <!-- 路径 C --> <path d=" M12.5,12.5 S87.5,12.5,87.5,12.5 S162.5,12.5,162.5,12.5 S162.5,87.5,162.5,87.5 S162.5,162.5,162.5,162.5 S87.5,162.5,87.5,162.5 S12.5,162.5,12.5,162.5 S12.5,127.5,12.5,127.5 S12.5,12.5,12.5,12.5z"> 有过设计基础的同学应该明白上面代码的含义，就是将所有锚点转换成平滑，然后再更改手柄的位置。形状没变，虽然代码多了不少，但是把绘制命令都变成了 S ，这样三条路径就只有数值之间的不同了。而动画的过程就是数值之间的转换。 第三步：Timing 这一步就是设定动画的时间点和 timing function 。时间点比较好说，A-B 和 B-C 我设置的分别是300毫秒和400毫秒。 timing function 就是我们在做 CSS 动画中运用到的 animation-timing-function 属性，比较常见的有 ease、linear、easein，我们也可以用贝塞尔曲线自己定制。但是CSS的 timing function 比较简单，只能定义一条均匀的曲线，A-B 转换用到的 ease-out，但是 B-C 为了体现弹动的效果，所用到的 timing-function 就不是一条均匀曲线这么简单了。 上面列出了一些比较常用的 timing-function ，其中大概分为 ease、bounce、elastic 三类。ease 一般用作减速或者加速动效。bounce如同他的曲线图一样，一般用作小球落地那种动效。而 elastic 一般用在如琴弦一样的动效上，这种动效一个特点就是有部分偏移到负坐标上了，而 B-C 用到的就是这个,如下图。 根据上面已经画出来的路径，结合动画，代码就出来了： 复制代码 代码如下: var svg=Snap("#svg"); var pathes=[ "M37.5,37.5S87.5,37.5,87.5,37.5S137.5,37.5,137.5,37.5S137.5,87.5,137.5,87.5 S137.5,137.5,137.5,137.5S87.5,137.5,87.5,137.5S37.5,137.5,37.5,137.5S37.5,87.5,37.5,87.5S37.5,37.5,37.5,37.5z", "M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5 S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5 S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z", "M12.5,12.5S87.5,12.5,87.5,12.5S162.5,12.5,162.5,12.5S162.5,87.5,162.5,87.5S162.5,162.5,162.5,162.5S87.5,162.5,87.5,162.5S12.5,162.5,12.5,162.5S12.5,127.5,12.5,127.5S12.5,12.5,12.5,12.5z" ]; var path=svg.path(pathes[0]); path.attr({ fill:"#2E70FF" }); function animateIn(callback){ path.animate({ d:pathes[1] },300,mina.easeout,function(){ path.animate({ d:pathes[0] },400,mina.elastic,callback) }); }; function animateOut(callback){ path.animate({ d:pathes[1] },300,mina.easeout,function(){ path.animate({ d:pathes[2] },400,mina.elastic,callback) }); };
F. web开发用svg和png哪个好
正规的话，svg的比较好，图片不会因为大小而出现问题，
但是没有的话，png也可以，
G. 谁能推荐一款关于Web前端可以在canvas或SVG上画网络拓扑图（如下图所示）的JS库
http://www.draw2d.org/draw2d/
draw2d touch，最近一直在看，挺强大的，使用的svg实现的。
H. 如何在 HTML5 中设置 svg 的大小
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5
标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML
body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px"
width="200px" 为其添加高度和宽度。
现在就将SVG元素加入到我们HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green;”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
SVG画圆：
SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D"
stroke-width="2"定义圆周线条颜色和宽度。
SVG矩形:
同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用
fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5"
为 stroke 和 filling 都添加了透明度。
SVG椭圆：
我们同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208;stroke:black;stroke-width:3"。
SVG多边形：
我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60"
，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用
style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
I. 什么是可交互的SVG动画它有哪些类型
什么是可交互的SVG动画?
一般来说，常见前端动画实现方案分为三种，CSS3动画，HTML动画(SVG动画)，JS动画或者我们可以称之为Canvas动画。这里主要我们是要讲解的是SVG动画的实现方法。通俗来说，假如我希望动画内容是个性化的信息填充，这样我们就需要让 SVG 动画变成框架动画，动画的内容由后台给出再填充动画，最后呈现给使用者。或者我希望动画的播放进程是根据页面滚动来触发播放，同时动画会和页面的高度百分比同步进度。那这些想法的实现就需要让 SVG 动画来实现，设计师希望通过它能够提高用户体验。
SVG动画的类型
常见的SVG动画有三种实现方式，具体类型大家来看一下：
1.通过原生的SVG来实现，但是这种方法的实现效率较低，而且很多较为精确的动作比较难实现;
2.通过常见的SVG动画库来实现，比如svg.js，snap.js之类的来实现，可以实现比较灵活的交互，复杂的线性动画也是很难实现的;
3.结合PS,AI,CSS3来实现有，这种方法交互需要自己实现，相对会比较繁琐，但是优势就是可以实现一些复杂的线性动画,而且也要求你的知识面要广阔一些。
总之，作为交互动画的设计师，只用前端程序对接动画，这样最终我们才能做到动画和交互逻辑的完美落地。当然，想要了解更多交互设计相关资讯，请关注我们，下期咱们不见不散哦!