最近接触SVG这种矢量格式，感觉不错。

做一下小的总结，备忘用。


因为基础的图是用Visio画的，而又发现SVG不错，而又发现Visio可以直接另存为SVG格式，所以就将画好的Visio图直接另存为SVG文件。不过有优点也有缺点。

优点是转化后的SVG文件，几乎完美的再现了Visio图的所有图形属性。

所有的图形不论是形状、位置、线条都完全一致，之所以说几乎，是因为在Visio图中写的文字注释，在SVG的显示中某些部分会稍稍有一点点的错位，总的来说没啥问题，可以接受。

缺点就是Visio图中所体现的图形之间的逻辑关系没有了，只剩下图形属性和空间关系（坐标等）


那么，拿到SVG文件，打开查看内容，第一眼看去就是一个xml，但是浏览器可以直接打开，很神奇，而且是矢量图。


那么，我第一个想到的就是用Javascript操控它。

经过一系列不成功的尝试，最后找到办法，那就是把SVG嵌入到HTML中。

在百度一搜“把SVG嵌入HTML”，基本会看到一堆人写的四种方式。

前三种是：embed、object、iframe

即在这三种标签中引入要嵌入的svg文件的路径

embed与iframe用的是

src="xxx.svg"

object用的是

data="xxx.svg"

给我的感觉就是都不好用

那就剩第四种了，也就是把整个svg文件的内容复制粘贴到html的body里

还有最起码，svg标签得设个id

<svg id="svg>


假设我的SVG文件内容是这个样子滴



<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="34.0787in" height="23.8031in"
viewBox="0 0 2453.67 1713.83" xml:space="preserve" color-interpolation-filters="sRGB" class="st16" id="svg">
<g v:mID="0" v:index="1" v:groupContext="foregroundPage" id="g">
    <g></g>
</g>
</svg>


如上就是被我简化了的由Visio转化而来的

最外面只有一个svg标签，我把它的id设成svg

svg下有一个g标签，我把它的id设成g

而g标签下又有一堆的g标签，而这些个g标签都自动设置好了id，就不赘述了


唯一需要我手动设置id的是就最外面的svg标签和其下一层唯一的元素那个g标签


设置了id就可以用js来进行操控了


其实我所转化的svg文件，有一万多行（因为来源的Visio图就很大，图形灰常多）

然后我们把这个svg文件的所有内容全都copy paste到html的春天里，哦不，是body里，就变成下面这样了


<html>
<head></head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="34.0787in" height="23.8031in"
viewBox="0 0 2453.67 1713.83" xml:space="preserve" color-interpolation-filters="sRGB" class="st16" id="svg">
<g v:mID="0" v:index="1" v:groupContext="foregroundPage" id="g">
    <g></g>
</g>
</svg>
<body>
</html>

好吧，×××长征第一步

当然，肯定要有第二步第三步……或者倒叙手法的第0步之类的

后面接着说