SVGをURLエンコードし、CSSのbackground-imageプロパティの値に設定して出力するツールを公開しました。


SVGをCSSのbackground-imageで使えるようにエンコードするツール

コピペするだけで使えます。
JSでのSVGのURLエンコードはencodeURIComponent()を使う人が多いみたいですが、
それだとファイルサイズが大幅に増えてしまうので、自前で必要なものだけエンコードする形にしました。

機能

• リアルタイムプレビュー

• 背景色変更

• svg以外のタグが入っていた場合、自動削除

• ネームスペースがない場合、自動付与

• 改行、スペース、コメントアウトを自動削除

コード

HTML

<div id="entry">
	
	<div id="stbic">
		<div id="stbic-forms">
			<div id="stbic-svg">
				<h2>SVG</h2>
				<textarea id="input-svg"></textarea>
			</div>

			<div id="stbic-css">
				<h2>CSS</h2>
				<textarea id="output-css"></textarea>
			</div>

		</div>

		<div id="stbic-colors">
			<input type="radio" name="color" id="white" />
			<label for="white" data-color="#fff"></label>

			<input type="radio" name="color" id="lightgrey" />
			<label for="lightgrey" data-color="#eee"></label>

			<input type="radio" name="color" id="grey" />
			<label for="grey" data-color="#999"></label>

			<input type="radio" name="color" id="black" />
			<label for="black" data-color="#000"></label>

			<input type="radio" name="color" id="pink" />
			<label for="pink" data-color="#f48fb1"></label>

			<input type="radio" name="color" id="purple" />
			<label for="purple" data-color="#b39ddb"></label>

			<input type="radio" name="color" id="blue" />
			<label for="blue" data-color="#90caf9"></label>

			<input type="radio" name="color" id="skyblue" />
			<label for="skyblue" data-color="#80deea"></label>

			<input type="radio" name="color" id="green" />
			<label for="green" data-color="#a5d6a7"></label>

			<input type="radio" name="color" id="yellowgreen" />
			<label for="yellowgreen" data-color="#e6ee9c"></label>

			<input type="radio" name="color" id="yellow" />
			<label for="yellow" data-color="#ffe082"></label>

			<input type="radio" name="color" id="orange" />
			<label for="orange" data-color="#ffab91"></label>
		</div>

	</div>

</div>

CSS

#entry {
	background-color: #fff;
	height: 600px;
	margin: 0 auto;
	width: 1235px;
}

#stbic {
	background-color: #fff;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	height: 400px;
	margin: 0 auto;
	padding: 10px 5px;
	width: 1135px;
}

#stbic-forms {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

#stbic-svg,
#stbic-css {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	height: 300px;
	margin: 0 5px;
	text-align: center;
}

#stbic textarea {
	border: 2px solid #ddd;
	height: 200px;
	padding: 15px;
	width: 90%;
}

#stbic-forms textarea {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
}

#stbic-colors {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin-top: 30px;
}

#stbic-colors > input {
	display: none;
	margin: 0;
	padding: 0;
}

#white + label {
	border: 1px solid #ddd;	
}

input + label {
	border-radius: 50%;
	border: 2px solid transparent;
	height: 25px;
	margin: 0 7px 10px 7px;
	padding: 0;
	-webkit-transition: all .3s 0s ease;
	transition: all .3s 0s ease;
	width: 25px;
}

#stbic-colors > input:checked + label {
	height: 35px;
	-webkit-transform: translateY(-10px);
	        transform: translateY(-10px);
	width: 35px;
}

#stbic-colors > label:hover {
	cursor: pointer;
}

#white + label {
	background-color: #fff;
}

#lightgrey + label {
	background-color: #eee;
}

#grey + label {
	background-color: #999;
}

#black + label {
	background-color: #000;
}

#pink + label {
	background-color: #f48fb1;
}

#purple + label {
	background-color: #b39ddb;
}

#blue + label {
	background-color: #90caf9;
}

#skyblue + label {
	background-color: #80deea;
}

#green + label {
	background-color: #a5d6a7;
}

#yellowgreen + label {
	background-color: #e6ee9c;
}

#yellow + label {
	background-color: #ffe082;
}

#orange + label {
	background-color: #ffab91;
}

JavaScript

const inputSVGForm = document.getElementById('input-svg');
const outputCSSForm = document.getElementById('output-css');
const entry = document.getElementById('entry');

// Get svg only. Remove space, linefeed, and comment.
const minify = function(input) {
	let minified = input.replace(/\r?\n|<!--.*-->/g, '');
	minified = minified.match(/<svg.+<\/svg>/);
	if (null === minified) {
		return false;
	} else {
		minified = minified[0].replace(/>\s+</g, '><');
		return minified;
	}
}

const addNamespace = function(minified) {
	if (!/http:\/\/www\.w3\.org\/2000\/svg/.test(minified)) {
		const namespaced = minified.replace( /<svg/g, "<svg xmlns='http://www.w3.org/2000/svg'" );
		return namespaced;
	} else {
		return minified;
	}
}

// URL encode
const encodeSVG = function(nameSpaced) {
	// double quote to single quote
	const singleQuoted = nameSpaced.replace(/"/g, "'");
	
	// URL encode
	const encoded = singleQuoted.replace(/</g, '%3C').replace(/>/g, '%3E').replace(/#/g, '%23');
	
	return encoded;
}

const outputCSS = function(encoded) {
	const css = 'background-image: url("data:image/svg+xml;charset=utf-8,' + encoded + '");';
	outputCSSForm.value = css;
}

const preview = function(encoded) {
	entry.style.backgroundImage = 'url("data:image/svg+xml;charset=utf-8,' + encoded + '")';
}

// If size is not specified
const resize = function(nameSpaced) {
	if (!/width=/.test(nameSpaced)) {
		entry.style.backgroundSize = '50px 50px';
	}
}

inputSVGForm.addEventListener('keyup', function() {

	setTimeout(function() {
		
		const minified = minify(inputSVGForm.value);
		
		if (!minified) return;

		const nameSpaced = addNamespace(minified);
		
		const encoded = encodeSVG(nameSpaced);
		
		outputCSS(encoded);
		
		preview(encoded);
		
		resize(nameSpaced);

	}, 100);


});

// First, checked the white button 
entry.querySelector('#white').checked = true;

// Add button event
const colorButtons = document.querySelectorAll('#stbic-colors > label');
for(let i = 0, l = 	colorButtons.length; i < l; i++) {
	colorButtons[i].addEventListener('click', function() {
		entry.style.backgroundColor = this.dataset.color;
	});
}