HTML SVG保存为外部.svg文件被img图片或background背景引用

把在HTML中多次重复使用的svg代码保存为外部.svg文件,可以减少页面代码冗余,提高代码可读性。

svg图形

menu.svg文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE 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" viewbox="0 0 190 45" fill="#5d312b">
	<path d="M0,6 A6,6,0,0,0,6,0 L184,0 A6,6,0,0,0,190,6 L190,39 A6,6,0,0,0,184,45 L6,45 A6,6,0,0,0,0,39 L0,6"></path>
</svg>
代码解释:

第1行:XML声明版本(version)、独立性(standalone)。standalone属性规定此SVG文件是否是“独立的”,或含有对外部文件的引用,standalone="no"意味着SVG文档会引用一个外部文件,上述代码引用的是第2行的DTD文件。

第2、3行:“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”引用外部的SVG DTD,该DTD位于W3C,含有所有允许的SVG元素。

第4、5、6行:svg图形的代码

标签或属性引用

img标签

<img src="menu.svg" width="190" height="45" alt="svg图形"/>

CSS属性

background:url(menu.svg) no-repeat center center;
background-size:190px 45px;

注意:img标签和background属性引用外部svg文件,不能操作外部svg里的代码。

关键词: SVG教程