HTML5 SVG
SVG是什么？
??SVG是一种图像文件格式，其英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML，由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
??SVG是一种用XML定义的语言，用来描述二维矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形、图像、文本。图形对象还可以分组、添加样式、变换、组合等操作。特征集包括嵌套变换、剪切路径、alpha蒙板、滤镜效果、模板对象和其他扩展。
??SVG图形可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。
??SVG具备PNG和JPEG格式无法具备的优势：可任意放大图片而不会牺牲图像质量；可在SVG图像中保留可编辑和可搜寻的状态；SVG比较小，下载速度快。
- SVG指的是可伸缩矢量图形(Scalable Vector Graphics)
- SVG用来定义用于网络的基于矢量的图形
- SVG使用XML格式定义图形
- SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG是万维网联盟的标准
- SVG与诸如DOM和XSL之类的W3C标准是一个整体
优势
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 JavaScript 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
浏览器支持
??IE9、Firefox、Opera、Chrome、Safari都支持SVG。
可缩放矢量图形（SVG）2
这个版本：
https://www.w3.org/TR/2018/CR-SVG2-20181004/
最新版本：
先前版本：
https://www.w3.org/TR/2018/CR-SVG2-20180807/
编辑稿：
单页版：
https://svgwg.org/svg2-draft/single-page.html
GitHub：
摘要：
??这个规范定义了SVG2版的功能和语法，SVG是一种基于XML的语言，用于描述二维矢量/栅格图形。SVG内容是可样式化的，可以缩放到不同的显示分辨率，并且可以独立查看，与HTML内容混合或使用其他XML语言中的XML命名空间嵌入。SVG支持动态更改。脚本可以用于创建交互式文档，并且可以使用声明性动画功能或脚本执行动画。
嵌入HTML文档的方法
??有三种标签可以将SVG嵌入到HTML文档中，分别是< embed>标签、< object>标签和< iframe>标签。
< embed>标签
??< embed>标签被所有主流的浏览器支持，并允许使用脚本。
<div>
<embed src="https://www.w3school.com.cn/svg/circle1.svg" height="200" width="200" type="image/svg+xml">
</div>< object>标签
??< object>标签是HTML4的标准标签，被所有较新的浏览器支持。其缺点是不允许使用脚本。
<div>
<object data="https://www.w3school.com.cn/svg/circle1.svg" height="200" width="200" type="image/svg+xml"></object>
</div>< iframe>标签
??< iframe>标签可工作在大部分浏览器中。
<div>
<iframe src="https://www.w3school.com.cn/svg/circle1.svg" height="200" width="200" frameborder="0"></iframe>
</div>SVG形状
??开发者可以使用一些SVG中的预定义的元素。
- 矩形
< rect> - 圆形
< circle> - 椭圆
< ellipse> - 线
< line> - 折线
< polyline> - 多边形
< polygon> - 路径
< path>
??
从零开始的HTML5之旅（六）——Re SVG
原文地址：https://www.cnblogs.com/ODevil/p/12527136.html