在网页中使用 SVG

svg 能以四种方式插入至HTML 页面. 每种方式又有其优劣性.

将 `SVG` 作为图像

将 svg 用做图像时, 图像的渲染和与主页面是分离的, 而且无法在两者之间通讯. 主页面的样式无法对 svg 内的元素无效, 所以图像包含文字或者要定义相对于文字大小的长度值, 就必须要在 svg 代码内部定义一个默认字体大小.

1). 在 <img> 元素内包含 svg

有一些浏览器需要确认你的 Web 服务器为 .svg 的文件声明了正确的媒体类型头(image/svg+xml).

图像的高度和宽度会按照普通图片那样使用 css 来确定, 如果不指定图片尺寸, 就会用图片文件的固有尺寸, 如果只指定了高度或者宽度, 那么宽度或者高度就会按比例缩放.

如果 svg元素中有明确的 width 和 height 属性 , 那么这个数值就会被当做 svg 的固有尺寸.

如果 svg 和 <img> 均没有任何图片尺寸的信息, 浏览器就会默认应用 HTML 尺寸, 通常是 150px 宽, 300px 高.

2). 在 CSS 中包含 SVG

许多 css 属性也可以包括一个指向图片文件的 URL 作为属性值.

.background-cat {    background-image: url('cat.svg');    background-size: 100% 100%;}

也可以使用 <object> 嵌入到外部文件到 HTML.

使用 <object> 元素嵌入 svg 图像, 可以让他们那些不能直接显示 SVG 但是有 svg 插件的老版本浏览器也能查看图像.

<object> 元素内引入 svg 需要设定一个 MIME类型 , 使用 type="image/svg+xml"

文件的位置通过 data 属性指定

<object> 必须有起始标签和结束标签, 两个标签之间的内容将会在对象数据本身不能被渲染时显示(类似 <video>).

我们也可以在一个文件中同时包含 svg 代码与 HTML 或者 XML 标记.

将标记合并到一个文件中可以缩短Web页面的加载时间, 减少 HTTP 请求. 但是如果同一图像要在多个页面使用时, 则会重复出现 SVG 标记, 而增加总体积和下载时间.

最重要的是, 应用样式表和使用脚本, 混合文档内的所有元素会被视为一个文档对象.

1) SVG 中的 foreign object

XHTML + SVG 中, 而且支持浏览器不够多

2) 在XHTML 或者 HTML5 中使用内联 SVG

对于 HTML <svg> 上的 xmlns 属性是可选的,

对于 XHTML 代码, 需要改变头部的 DOCTYPE ,使用 <![CDATA[...]]> 块包裹<style>元素内的代码.

SVG精髓（1）完

转载地址：http://vrzum.baihongyu.com/

你可能感兴趣的文章