HTML SVG

1. HTML SVG

1. 可以参考的资源

• http://www.w3school.com.cn/svg/svg_rect.asp

2. 什么是 SVG

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

3. SVG 的优势

与其他图像格式相比, 使用 SVG 的优势在于:

• SVG 可被非常多的工具读取和修改 (比如记事本)
• SVG 与 JPEG 和 GIF 图像比起来, 尺寸更小, 且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的, 同时也是可搜索的 (很适合制作地图)
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

4. SVG 实例

SVG 使用 XML 编写。

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存:

<?xml version="1.0" standalone="no"?>
<!DOC
TYPE 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="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

查看例子 (仅用于支持 SVG 的浏览器)

(如需查看 SVG 源代码, 请打开此例, 然后在窗口中右击。选择 “查看源代码”。)

代码解释:

• 第一行包含了 XML 声明。请注意 standalone 属性! 该属性规定此 SVG 文件是否是 “独立的”, 或含有对外部文件的引用。

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里, 是 DTD 文件。

• 第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C, 含有所有允许的 SVG 元素。

SVG 代码以 <svg> 元素开始, 包括开启标签 <svg> 和关闭标签 </svg>。这是根元素。

width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本, xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性, 那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽, 黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释: 所有的开启标签必须有关闭标签!

5. HTML 页面中的 SVG

SVG 文件可通过以下标签嵌入 HTML 文档: <embed>、<object> 或者 <iframe>。

5.1. 使用 <embed> 标签

<embed> 标签被所有主流的浏览器支持, 并允许使用脚本。

注释: 当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法! 然而, 如果需要创建合法的 XHTML, 就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

语法:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

注释: pluginspage 属性指向下载插件的 URL。

5.2. 使用 <object> 标签

<object> 标签是 HTML 4 的标准标签, 被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释: 假如您安装了最新版本的 Adobe SVG Viewer, 那么当使用 <object> 标签时 SVG 文件无法工作 (至少不能在 IE 中工作)!

语法:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

注释: codebase 属性指向下载插件的 URL。

5.3. 使用 <iframe> 标签

<iframe> 标签可工作在大部分的浏览器中。

语法:

<iframe src="rect.svg" width="300" height="100">
</iframe>

6. gitbook 是用 svg 还是 canvas

Canvas 与 SVG 的比较

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏, 其中的许多对象会被频繁重绘
• Canvas 是基于像素的即时模式图形系统, 最适合较小的表面或较大数量的对象, canvas 不支持鼠标键盘等事件

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序 (比如谷歌地图)
• 复杂度高会减慢渲染速度 (任何过度使用 DOM 的应用都不快)
• 不适合游戏应用
• SVG 是基于形状的保留模式图形系统, 更加适合较大的表面或较小数量的对象。

Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后, 不能使用脚本和 CSS 对它进行修改。但是, 因为 SVG 对象是文档对象模型的一部分, 所以可以随时使用脚本和 CSS 修改它们。

1. 历史:

canvas 是 HTML5 提供的新元素。

而 svg 存在的历史要比 canvas 久远, 已经有十几年了。svg 并不是 HTML5 专有的标签, 最初 svg 是用 xml 技术 (超文本扩展语言, 可以自定义标签或属性) 描述二维图形的语言。

2. 功能:

canvas 可以看做是一个画布, 其绘制出来的图形为标量图。可以在 canvas 中引入 jpg 或 png 这类格式的图片。在实际开发中, 大型的网络游戏都是用 canvas 画布做出来的, 并且 canvas 的技术现在已经相当的成熟。另外, 我们喜欢用 canvas 来做一些统计用的图表, 如柱状图曲线图或饼状图等。

而 svg, 所绘制的图形为矢量图, 不能引入普通的图片, 因为矢量图的不会失真的特点, 在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图, 百度地图就是用 svg 技术做出来的。

3. 技术:

canvas 里面绘制的图形不能被搜索引擎抓取, canvas 中我们绘制图形通常是通过 javascript 来实现。而 svg 里面的图形可以被引擎抓取, 支持事件的绑定, svg 更多的是通过标签来实现。

综合来看, 还是用 canvas 吧, 我发现用 canvas 生成的 pdf 里面图形比 svg 更要 “圆滑”, 而且是新技术。