svg 介绍,引用方式

svg是可缩放矢量图形

svg文件是纯粹的xml,可伸缩。

svg可以在iframe、img embed object svg,还有css background中引用svg

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

</embed>

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

<svg width="300" 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标签上需要有版本和 xmlns两个属性

SVG是严格按照定义元素的顺序来渲染的,这个与HTML靠z-index值来控制分层不一样。在SVG中,写在前面的元素先被渲染,写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素,虽然有时候受透明度影响,看起来不是被覆盖的,但是SVG确实是严格按照先后顺序来渲染的。 



你可能感兴趣的:(svg 介绍,引用方式)