开发者学堂课程【HTML5 新特性学习： HTML5 SVG】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/396/detail/5050

 HTML5 SVG

内容介绍：

一、SVG

二、示例

一、SVG

什么是 SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF )，使用 SVG 的优势在于:SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

浏览器支持

lnternet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

二、示例

创建一个 index 文件，创建一个 <svg> 标签

输入

​<svg viewbox = “0 0 120 120” version = “1.1” xmlns = “​​http://www.w3.org/2000/svg​​”>​

​<circle cx = “60” cy = “60” r = “50”></circle>​

​</svg>​

进行测试

可在官网 http://developer.mozilla.org/zh-CN/ 上查询其他图形的绘制

打开 HTML5，拖到最下面，点击 SVG，点开元素参考

选择其中一个测试，输入

​<svg width = “120” height = “120”​

​viewPort = “0 0 120 120” version = “1.1”​

​xmlns = “​​http://www.w3.org/2000/svg​​”>​

​<polygon points = “60, 20 100, 40 100,80 60, 100 60,100 20,80 20,40”/>​

​</svg>​

这是我们正常使用 svg，但是这个 svg 的使用方式并不是通用的，因为不可能在很多页面都写入一个同样的 svg 图片所有一般情况需要一个外部文件引用

创建一个 svg.svg 文件

复制倒三角图形的代码

​<svg width = “100%” height = “100%” viewBox = “0 0 400 400”​

​xmlns = “​​http://www.w3.org/2000/svg​​”>​

​  <path d= “M 100 100 L 300 100 L 200 300 z”​

​Fill = “orange” stroke = “black” stroke-width = “3” />​

​</svg>​

然后在 index.html 中引入

输入

​<iframe src = “svg.svg”></iframe>​

测试

其他都可根据自身需求在官网里查询