SVG as Data URI for background image

by drublic

HTML

<h1>SVG at a data URI for background images....</h1>
<p>just because you can, doesn't mean you should.<p>

CSS

body { background-image: 
        url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCAxIDQwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMSA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSI0MDAiPgoJCTxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I2JhZGE1NSIvPgoJCTxzdG9wIG9mZnNldD0iMC4wNSIgc3R5bGU9InN0b3AtY29sb3I6I2JhZGE1NSIvPgoJCTxzdG9wIG9mZnNldD0iMC45NSIgc3R5bGU9InN0b3AtY29sb3I6I2JhZGE1NSIgc3RvcC1vcGFjaXR5PSIwIi8+CgkJPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojYmFkYTU1IiBzdG9wLW9wYWNpdHk9IjAiLz4KCTwvbGluZWFyR3JhZGllbnQ+Cgk8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgd2lkdGg9IjEiIGhlaWdodD0iNDAwIi8+Cjwvc3ZnPgo=");
    
    
    color: white; text-shadow: 2px 2px rgba(0,0,0,0.4);}
h1 {font-size: 20px;}