timboslice69/svg.html

## svg.html
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script>

		window.onload = function(){
			var  symbol, parent, elements = document.getElementsByTagName("use");
			while (elements.length > 0){
				symbol = document.getElementById(elements[0].attributes['xlink:href'].value.replace('#', ''));
				parent = elements[0].parentNode;
				parent.setAttribute('viewBox', symbol.attributes.viewBox.value);
				parent.innerHTML = symbol.innerHTML;
			}
		};

	</script>
	<style>
		svg.icon {
			width: 22px;
			height: 32px;
		}

		svg.icon path {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>

	<svg style="display: none;" id="icons" viewBox="0 0 32 32"><symbol viewBox="0 0 32 32" id="checkmark-circle"><title>checkmark-circle</title> <g id="svgstoref28fee3436d7ebd3feb0e16efa3c98f8icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13 26l-6.625-8.625 2.938-3.063 3.688 4.688 11.563-9.438 1.438 1.438-13 15z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="facebook"><title>facebook</title> <g id="svgstoref165dcfbe6d204c894ea5e1e0673b865icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M17.996 32h-5.996v-16h-4v-5.514l4-0.002-0.007-3.248c0-4.498 1.22-7.236 6.519-7.236h4.412v5.515h-2.757c-2.064 0-2.163 0.771-2.163 2.209l-0.008 2.76h4.959l-0.584 5.514-4.37 0.002-0.004 16z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="google"><title>google</title> <g id="svgstoredc5f098399880f67e12d233d760a149cicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M24.673 2c0 0-6.28 0-8.373 0-3.754 0-7.287 2.844-7.287 6.138 0 3.366 2.559 6.083 6.378 6.083 0.266 0 0.524-0.005 0.776-0.024-0.248 0.475-0.425 1.009-0.425 1.564 0 0.936 0.503 1.694 1.14 2.313-0.481 0-0.945 0.014-1.452 0.014-4.649-0-8.228 2.961-8.228 6.032 0 3.024 3.923 4.916 8.573 4.916 5.301 0 8.228-3.008 8.228-6.032 0-2.425-0.715-3.877-2.928-5.442-0.757-0.536-2.204-1.839-2.204-2.604 0-0.897 0.256-1.34 1.607-2.395 1.385-1.082 2.365-2.603 2.365-4.372 0-2.106-0.938-4.159-2.699-4.837h2.655l1.874-1.354zM21.748 22.483c0.066 0.28 0.103 0.569 0.103 0.863 0 2.444-1.575 4.353-6.093 4.353-3.214 0-5.535-2.035-5.535-4.478 0-2.395 2.879-4.389 6.093-4.354 0.75 0.008 1.449 0.129 2.083 0.334 1.745 1.213 2.996 1.899 3.349 3.281zM16.603 13.368c-2.157-0.065-4.207-2.413-4.58-5.246s1.074-5.001 3.231-4.937c2.157 0.065 4.207 2.338 4.58 5.171s-1.075 5.077-3.231 5.012z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="image"><title>image</title>  <path d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z" fill="#999999"/> </symbol><symbol viewBox="0 0 32 32" id="loop"><title>loop</title> <g id="svgstore0b074ae24d1c16bf32d444c291ce85b5icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M27.313 4.687c-2.895-2.896-6.895-4.687-11.313-4.687-6.859 0-12.709 4.316-14.984 10.381l3.746 1.405c1.706-4.548 6.094-7.786 11.238-7.786 3.314 0 6.313 1.344 8.485 3.515l-4.485 4.485h12v-12l-4.687 4.687zM16 28c-3.314 0-6.313-1.343-8.485-3.515l4.485-4.485h-12v12l4.687-4.687c2.895 2.896 6.894 4.687 11.313 4.687 6.859 0 12.709-4.316 14.984-10.381l-3.746-1.405c-1.706 4.548-6.094 7.786-11.238 7.786z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="menu"><title>menu</title> <g id="svgstored81370fa18da299c9944151f152a8981icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M0 12h22v4h-22v-4zM0 6h22v4h-22v-4zM0 18h22v4h-22v-4zM0 24h22v4h-22v-4zM24 18l4 6 4-6h-8zM32 16l-4-6-4 6h8z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="menu2"><title>menu2</title> <g id="svgstoree99c82802b50c0f3de13a77b6a242e3bicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="pause"><title>pause</title> <g id="svgstoree697bc985dd9f8e2de56da8200cfa21ficomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M4 4h10v24h-10zM18 4h10v24h-10z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="play"><title>play</title> <g id="svgstore231f0d09881fe737ee951e404febf9a0icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M6 4l20 12-20 12z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="shield"><title>shield</title> <g id="svgstore74a76f1f60725462282e0857832051abicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M30 0l-14 4-14-4c0 0-0.141 1.616 0 4l14 4.378 14-4.378c0.141-2.384 0-4 0-4zM2.256 6.097c0.75 7.834 3.547 21.007 13.744 25.903 10.197-4.896 12.995-18.069 13.744-25.903l-13.744 5.167-13.744-5.167z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="spam"><title>spam</title> <g id="svgstorec54ca954b40e9963aaa5e2d166d581e8icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M32 23l-9-23h-14l-9 9v14l9 9h14l9-9v-14l-9-9zM18 26h-4v-4h4v4zM18 18h-4v-12h4v12z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="stack"><title>stack</title> <g id="svgstore7fab08effeed9be0c5ce302adb532fa9icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M32 10l-16-8-16 8 16 8 16-8zM16 4.655l10.689 5.345-10.689 5.345-10.689-5.345 10.689-5.345zM28.795 14.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398zM28.795 20.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398z" fill="#333333"/> </symbol></svg>

	<svg class="icon">
		<use xlink:href="#checkmark-circle" ></use>
	</svg>

	<svg class="icon">
		<use xlink:href="#shield"></use>
	</svg>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script>

	window.onload = function(){
	var symbol, parent, elements = document.getElementsByTagName("use");
	while (elements.length > 0){
	symbol = document.getElementById(elements[0].attributes['xlink:href'].value.replace('#', ''));
	parent = elements[0].parentNode;
	parent.setAttribute('viewBox', symbol.attributes.viewBox.value);
	parent.innerHTML = symbol.innerHTML;
	}
	};

	</script>
	<style>
	svg.icon {
	width: 22px;
	height: 32px;
	}

	svg.icon path {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>

	<svg style="display: none;" id="icons" viewBox="0 0 32 32"><symbol viewBox="0 0 32 32" id="checkmark-circle"><title>checkmark-circle</title> <g id="svgstoref28fee3436d7ebd3feb0e16efa3c98f8icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13 26l-6.625-8.625 2.938-3.063 3.688 4.688 11.563-9.438 1.438 1.438-13 15z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="facebook"><title>facebook</title> <g id="svgstoref165dcfbe6d204c894ea5e1e0673b865icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M17.996 32h-5.996v-16h-4v-5.514l4-0.002-0.007-3.248c0-4.498 1.22-7.236 6.519-7.236h4.412v5.515h-2.757c-2.064 0-2.163 0.771-2.163 2.209l-0.008 2.76h4.959l-0.584 5.514-4.37 0.002-0.004 16z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="google"><title>google</title> <g id="svgstoredc5f098399880f67e12d233d760a149cicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M24.673 2c0 0-6.28 0-8.373 0-3.754 0-7.287 2.844-7.287 6.138 0 3.366 2.559 6.083 6.378 6.083 0.266 0 0.524-0.005 0.776-0.024-0.248 0.475-0.425 1.009-0.425 1.564 0 0.936 0.503 1.694 1.14 2.313-0.481 0-0.945 0.014-1.452 0.014-4.649-0-8.228 2.961-8.228 6.032 0 3.024 3.923 4.916 8.573 4.916 5.301 0 8.228-3.008 8.228-6.032 0-2.425-0.715-3.877-2.928-5.442-0.757-0.536-2.204-1.839-2.204-2.604 0-0.897 0.256-1.34 1.607-2.395 1.385-1.082 2.365-2.603 2.365-4.372 0-2.106-0.938-4.159-2.699-4.837h2.655l1.874-1.354zM21.748 22.483c0.066 0.28 0.103 0.569 0.103 0.863 0 2.444-1.575 4.353-6.093 4.353-3.214 0-5.535-2.035-5.535-4.478 0-2.395 2.879-4.389 6.093-4.354 0.75 0.008 1.449 0.129 2.083 0.334 1.745 1.213 2.996 1.899 3.349 3.281zM16.603 13.368c-2.157-0.065-4.207-2.413-4.58-5.246s1.074-5.001 3.231-4.937c2.157 0.065 4.207 2.338 4.58 5.171s-1.075 5.077-3.231 5.012z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="image"><title>image</title> <path d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z" fill="#999999"/> </symbol><symbol viewBox="0 0 32 32" id="loop"><title>loop</title> <g id="svgstore0b074ae24d1c16bf32d444c291ce85b5icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M27.313 4.687c-2.895-2.896-6.895-4.687-11.313-4.687-6.859 0-12.709 4.316-14.984 10.381l3.746 1.405c1.706-4.548 6.094-7.786 11.238-7.786 3.314 0 6.313 1.344 8.485 3.515l-4.485 4.485h12v-12l-4.687 4.687zM16 28c-3.314 0-6.313-1.343-8.485-3.515l4.485-4.485h-12v12l4.687-4.687c2.895 2.896 6.894 4.687 11.313 4.687 6.859 0 12.709-4.316 14.984-10.381l-3.746-1.405c-1.706 4.548-6.094 7.786-11.238 7.786z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="menu"><title>menu</title> <g id="svgstored81370fa18da299c9944151f152a8981icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M0 12h22v4h-22v-4zM0 6h22v4h-22v-4zM0 18h22v4h-22v-4zM0 24h22v4h-22v-4zM24 18l4 6 4-6h-8zM32 16l-4-6-4 6h8z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="menu2"><title>menu2</title> <g id="svgstoree99c82802b50c0f3de13a77b6a242e3bicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="pause"><title>pause</title> <g id="svgstoree697bc985dd9f8e2de56da8200cfa21ficomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M4 4h10v24h-10zM18 4h10v24h-10z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="play"><title>play</title> <g id="svgstore231f0d09881fe737ee951e404febf9a0icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M6 4l20 12-20 12z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="shield"><title>shield</title> <g id="svgstore74a76f1f60725462282e0857832051abicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M30 0l-14 4-14-4c0 0-0.141 1.616 0 4l14 4.378 14-4.378c0.141-2.384 0-4 0-4zM2.256 6.097c0.75 7.834 3.547 21.007 13.744 25.903 10.197-4.896 12.995-18.069 13.744-25.903l-13.744 5.167-13.744-5.167z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="spam"><title>spam</title> <g id="svgstorec54ca954b40e9963aaa5e2d166d581e8icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M32 23l-9-23h-14l-9 9v14l9 9h14l9-9v-14l-9-9zM18 26h-4v-4h4v4zM18 18h-4v-12h4v12z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="stack"><title>stack</title> <g id="svgstore7fab08effeed9be0c5ce302adb532fa9icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M32 10l-16-8-16 8 16 8 16-8zM16 4.655l10.689 5.345-10.689 5.345-10.689-5.345 10.689-5.345zM28.795 14.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398zM28.795 20.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398z" fill="#333333"/> </symbol></svg>

	<svg class="icon">
	<use xlink:href="#checkmark-circle" ></use>
	</svg>

	<svg class="icon">
	<use xlink:href="#shield"></use>
	</svg>

	</body>
	</html>