在网页中使用 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%;} 将 svg 作为应用程序
也可以使用 <object> 嵌入到外部文件到 HTML.
<object> 元素嵌入 svg 图像, 可以让他们那些不能直接显示 SVG 但是有 svg 插件的老版本浏览器也能查看图像. <object> 元素内引入 svg 需要设定一个 MIME类型 , 使用 type="image/svg+xml"
data 属性指定<object> 必须有起始标签和结束标签, 两个标签之间的内容将会在对象数据本身不能被渲染时显示(类似 <video>). 混合文档中的 SVG 标记
我们也可以在一个文件中同时包含 svg 代码与 HTML 或者 XML 标记.
HTTP 请求. 但是如果同一图像要在多个页面使用时, 则会重复出现 SVG 标记, 而增加总体积和下载时间. 最重要的是, 应用样式表和使用脚本, 混合文档内的所有元素会被视为一个文档对象.
1) SVG 中的 foreign object
XHTML + SVG 中, 而且支持浏览器不够多 2) 在XHTML 或者 HTML5 中使用内联 SVG
HTML <svg> 上的 xmlns 属性是可选的,对于 XHTML 代码, 需要改变头部的 DOCTYPE ,使用 <![CDATA[...]]> 块 包裹<style>元素内的代码. SVG精髓（1） 完