Mute Icon as SVG Data URI

by estelle

HTML

<h1>SVG at a data URI for background images....</h1>
<p>just because you can, doesn't mean you should.<p
    
    data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="65" cy="190" r="25" fill="#FFF" />
<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#666"/>
<path d='M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z' fill='#666'/>
</svg>'

CSS

body { background-color: black;
       background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /><path d='M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z' fill='#666'/><path d='M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z' fill='#666'/></svg>");
    background-repeat: no-repeat;
    
    
    
    color: white; text-shadow: 2px 2px rgba(0,0,0,0.4);}
h1 {font-size: 20px;}