把在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" />

CSS属性

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

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

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。