:root {
--encodedSVG: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF00FF;%7D%0A%3C/style%3E%3Cg%3E%3Crect x='3' y='3' class='st0' width='4' height='4'/%3E%3Cpath d='M6.5,3.5v3h-3v-3H6.5 M7.5,2.5h-5v5h5V2.5L7.5,2.5z'/%3E%3C/g%3E%3C/svg%3E%0A");
--svgOnHover: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF00FF;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='3.95,6.08 1.54,5.71 3.28,3.92 2.88,1.44 5,2.61 7.12,1.44 6.72,3.92 8.46,5.71 6.05,6.08 5,8.32 '/%3E%3Cpath d='M6.46,2.37L6.26,3.6l-0.08,0.5l0.35,0.36l0.89,0.91L6.24,5.55L5.71,5.63L5.49,6.11L5,7.15L4.51,6.11L4.29,5.63L3.76,5.55 L2.57,5.37l0.89-0.91l0.35-0.36L3.74,3.6l-0.2-1.22l0.98,0.54L5,3.18l0.48-0.27L6.46,2.37 M7.78,0.5L5,2.04L2.22,0.5l0.53,3.26 L0.5,6.06l3.11,0.48L5,9.5l1.39-2.96L9.5,6.06L7.25,3.76L7.78,0.5L7.78,0.5z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
h1 {
text-align: center;
}
.svg-background {
height: 100%;
min-height: 200px;
width: 30%;
margin: 0 auto;
outline: 2px solid;
background-image: var(--encodedSVG);
background-repeat: no-repeat;
}
.svg-background:hover {
background-image: var(--svgOnHover);
}
<h1> Example </h1>
<div class="svg-background"></div>