SVG是什么
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
使用XML格式来定义图形，图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG能干什么
由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。（PS等）
1. 绘制矢量图形（XML文件）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www点w3点org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"xmlns="网址">
<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/>
</svg>
2. 直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>
3. SVG 代码也可以写在一个独立文件中，然后用html标签插入网页
<img src="circle.svg" />
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml" />
<iframe id="iframe" src="icon.svg"></iframe>
4. CSS 也可以使用 SVG 文件
.logo {
background: url(icon.svg);
}
5. 转为Canvas图像完整示例
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
img.src = url;
然后，当图像加载完成后，再将它绘制到<canvas>元素。
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};
SVG有哪些优势
1. SVG 可被非常多的工具读取和修改（比如记事本）
2. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5. SVG 可在图像质量不下降的情况下被放大
6. SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7. SVG 可以与 Java 技术一起运行
8. SVG 是开放的标准
9. SVG 文件是纯粹的 XML
SVG兼容性
1. Internet Explorer9
2. 火狐
3. 谷歌Chrome
4. Opera
5. Safari
6. IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。
需要注意的点
1. 网页中不管是img,svg,embed都可以嵌入图片并通过width、height设置高度，如果图片的高度比设置的高度还要高，只有svg设置的区域才会显示出来。
2. viewBox使用方法，让svg随外面的大小一起变化
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
解释
viewbox中的0，0，30，10的意思是将从0,0开始绘制，屏幕的宽度划分为30份，将屏幕宽度的30份中的10份作为svg的高度
画circle时，起始坐标为5，5，半径为4，都是相对于屏幕的大小的
<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。
SVG有哪些扩展
Using the svg element you can also generate SVG directly in the browser using JavaScript. The D3 JavaScript API is very good at that. The jQuery JavaScript API could do that too.
1. 和react-native结合react-native-svg
2. 和D3结合， 代表react-native-svg-charts
3. 和jquery结合
参考资料
2. 阮一峰SVG图像入门教程
网友评论