SVG as Data URI for background image

by dhavaljani

HTML

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

CSS

p { background: url(data:image/svg+xml,%3Csvg%20id%3D%22instagram%22%20class%3D%22custom-icon%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22height%3A100px%3Bwidth%3A100px%3B%22%3E%3Crect%20class%3D%22outer-shape%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%2220%22%20ry%3D%2220%22%20style%3D%22opacity%3A%201%3B%20fill%3A%20rgb%2872%2C%20131%2C%200%29%3B%22%3E%3C/rect%3E%0A%09%3Cpath%20class%3D%22inner-shape%22%20style%3D%22opacity%3A1%3Bfill%3A%23f7f7f7%3B%22%20transform%3D%22translate%2825%2C25%29%20scale%280.5%29%22%20d%3D%22M88.2%2C1H11.8C5.85%2C1%2C1.026%2C5.827%2C1.026%2C11.781V88.22C1.026%2C94.174%2C5.85%2C99%2C11.8%2C99H88.2c5.95%2C0%2C10.774-4.826%2C10.774-10.78%20V11.781C98.973%2C5.827%2C94.149%2C1%2C88.2%2C1z%20M49.946%2C31.184c10.356%2C0%2C18.752%2C8.4%2C18.752%2C18.762c0%2C10.361-8.396%2C18.761-18.752%2C18.761%20s-18.752-8.4-18.752-18.761S39.589%2C31.184%2C49.946%2C31.184z%20M87.513%2C83.615c0%2C2.165-1.753%2C3.919-3.917%2C3.919H16.341%20c-2.164%2C0-3.917-1.755-3.917-3.919v-41.06h8.508c-0.589%2C2.35-0.904%2C4.807-0.904%2C7.34c0%2C16.612%2C13.459%2C30.079%2C30.063%2C30.079%20s30.063-13.466%2C30.063-30.079c0-2.533-0.315-4.99-0.904-7.34h8.263L87.513%2C83.615L87.513%2C83.615z%20M87.764%2C27.124%20c0%2C2.165-1.754%2C3.919-3.918%2C3.919H72.723c-2.164%2C0-3.917-1.755-3.917-3.919v-11.13c0-2.165%2C1.754-3.919%2C3.917-3.919h11.123%20c2.165%2C0%2C3.918%2C1.755%2C3.918%2C3.919V27.124z%22%3E%3C/path%3E%0A%3C/svg%3E);
    background-repeat: no-repeat;
      

    color: white; text-shadow: 2px 2px rgba(0,0,0,0.4);}
h1 {font-size: 20px;}