SVG合并以及改变样式

SVG合并以及改变样式

最近项目中，遇到大量SVG以替代图片，每个SVG一个单独文件，这样最终加载的时候，极大的增加了服务器负担，http响应过多，so，几百个SVG合并一个并调用，必须解决。

先上代码： head部分

		/* 强行变色 */
		svg path { fill: inherit;}
		
		.ic1 {fill: #66AFE9;}
		.ic2 {fill: darkcyan;}
		.ic3 {fill: aqua;}
		.ic4 {fill: chartreuse;}
		
		/* 设定svg大小 */
		.webicon{width: 20px;height: 20px;}

用ajax引入SVG压缩文件

	var ajax = new XMLHttpRequest();
	ajax.open("GET", "img/sprites.svg", true);
	ajax.onload = function(e) {
		document.body.insertAdjacentHTML("afterBegin", '
' + ajax.responseText + '
');
	}
	ajax.send();

SVG在线合并地址 www.zhangxinxu.com/sp/svgo/