HTML 伸缩矢量图

简介

  • 伸缩矢量图 (Scalable Vector Graphics),简称 SVG,用于生成矢量图形;
  • SVG 在放大或改变尺寸时图形质量不会有损失,在任何分辨率下被高质量地打印;
  • SVG 是 W3C 标准,使用 XML 作为数据格式,和 XSL 和 DOM 相兼容;
  • SVG 比 JPEG 和 GIF尺寸更小,可压缩性更强;

兼容性

IE8 及早期版本需要插件支持(如Adobe SVG浏览器),主流浏览器都支持。

SVG 创建

使用 <svg> 标签在 HTML 中创建一个矩形;

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="100" rx=10 ry=10 style="fill:#4faa2a"/>
</svg>
</body>
</html>

效果:

SVG 引用

使用 <svg> 标签
直接把 svg 标签放到 html 代码里面就可以

<svg width="200" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="100" style="fill:#4faa2a"/>
</svg>

使用 <iframe> 标签

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

使用 <img> 标签
此方法比较建议,对文档的结构和图形文件的维护都很好地解耦,而且可以重复使用

<img src="rect.svg" width="200" height="100" ></img>

使用 <embed> 标签
通过<embed>元素嵌入到 HTML 页面能通过插件解决浏览器兼容性:

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

使用 <object> 标签

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

使用 style 方式

<style>
#svg {
	background: url('rect.svg') no-repeat center;
	background-size : 200px 200px;
}
</style>
<div id="svg"/>

更多

更详细的 SVG 教程

留下评论

电子邮件地址不会被公开。 必填项已用*标注