SVG as Data URI for background image

by cmoreira

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;%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2011%2034%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3Cpath%20fill%3D%27%23fd4600%27%20d%3D%27M1.338%2027.366c0.006-1.786%200.486-3.987%202.266-3.987h4.25v3.149h-1.83c-0.006%200%200.269%200.768%200.448%201.35%200.109%200.397%200.333%200.691%200.736%200.717%200.339%200.032%200.653-0.352%200.653-0.352v3.085c0%200.006-0.25%200.685-0.986%200.666-1.408-0.064-1.92-1.158-2.234-3.853-0.179-1.453-0.32-1.613-0.685-1.619-0.301%200-0.64%200.179-0.653%200.998%200%201.184%200.8%201.101%200.8%201.101v3.021c0%200.013-2.765-0.019-2.765-4.275zM1.402%2017.811c0.154%201.050%201.018%201.414%201.018%201.414h-0.902v2.938h6.336v-3.2h-3.034c-0.538-0.006-0.774-0.154-0.966-0.352-0.224-0.224-0.384-0.608-0.384-1.037v-0.902h-1.952c0%200.006-0.211%200.467-0.115%201.139zM0.019%2011.424v3.168h1.498v1.318h1.952v-1.318h2.586c0.557%200%201.011%200.006%201.453-0.397%200.365-0.358%200.352-0.826%200.352-1.382v-1.382h-4.39v-1.901h-1.952v1.901h-1.498zM1.382%204.506c0.058-5.312%204.864-4.454%204.87-4.454v5.67h1.6v2.317c0-0.006-0.864%200.954-2.566%200.934-3.974-0.032-3.904-4.301-3.904-4.467zM4.653%203.123c-0.006%200.006-1.299-0.134-1.299%201.382-0.006%201.459%201.293%201.299%201.299%201.299v-2.682z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    
    
    color: white; text-shadow: 2px 2px rgba(0,0,0,0.4);}
h1 {font-size: 20px;}