Inline svg as css background

_svg_bg.scss

$svg: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">';
$path_attr: 'fill="transparent" stroke="%23bada55" stroke-width="4" stroke-linecap="round"';
.bg_close {
	background: url($svg + '<polyline points="4,4 46,46" ' + $path_attr + '/><polyline points="46,4 4,46" ' + $path_attr + '/></svg>') no-repeat 0 0;
	background-size: 100% 100%;
}
.bg_left {
	background: url($svg + '<polyline points="36,4 14,25 36,46" ' + $path_attr + '/></svg>') no-repeat 0 0;
	background-size: 100% 100%;
}
.bg_right {
	background: url($svg + '<polyline points="14,4 36,25 14,46" ' + $path_attr + '/></svg>') no-repeat 0 0;
	background-size: 100% 100%;
}
.bg_menu {
	background: url($svg + '<polyline points="4,8 46,8" ' + $path_attr + '/><polyline points="4,25 46,25" ' + $path_attr + '/><polyline points="4,42 46,42" ' + $path_attr + '/></svg>') no-repeat 0 0;
	background-size: 100% 100%;
}