开发者学堂课程【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>
测试
其他都可根据自身需求在官网里查询
