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里的代码。