标签：不同   种类   无法   查看   语言   比较   www   新版   phi   

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/SVG2/

先前版本：

https://www.w3.org/TR/2018/CR-SVG2-20180807/

编辑稿：

https://svgwg.org/svg2-draft/

单页版：

https://svgwg.org/svg2-draft/single-page.html

GitHub：

https://github.com/w3c/svgwg/

摘要：

??这个规范定义了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

标签：不同   种类   无法   查看   语言   比较   www   新版   phi   

原文地址：https://www.cnblogs.com/ODevil/p/12527136.html