Embedding SVGs into your Style Sheets

Scalable Vector Graphics (SVGs) are a great way of creating responsive images that stay crisp and sharp whatever resolution you are viewing them at. They can also be very small in size providing they have been correctly optimised for the web. You could easily write a whole article on this alone but what we’re going to look at today is embedding them in style sheets and how to do it properly so as to make them compatible across all modern browsers.

Why and what are the benefits

The main reason for embedding them in style sheets is to reduce the number of round trips the clients browser has to make to render a page. The more images you can embed in a style sheet, the fewer number of  HTTP requests the browser has to make reducing page load times. But the other benefit is that when the host server is configured to use compression such as GZIP, the file size of the CSS containing the Data URI SVGs compresses extremely well compared to using Base64 encoded type images.

Example of Embedding SVGs in CSS

To demonstrate how well this method can work, I will take a JQuery plugin (a Lightbox alternative) which I use quite a lot, Colorbox.

Firstly in its native format, Colorbox consists of a minified javascript file jquery.colorbox-min.js (11.6kb), a style sheet (4.3kb), and five .png/.gif images with total size of 10kb. When you factor in GZIP compression, you have 7 HTTP requests totalling 16kb which is not massive, but can be improved on.

If you recreate all the images as SVGs and embed them in your stylesheet, you now only have 2 HTTP requests (one .css file and the minified .js file), both of which compress down to just 6.46kb saving not just 10kb but more importantly 5 HTTP requests.

The code for the style sheet now looks like this:

/* Colorbox  CSS Custom Code using inline svgs */
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform: translate3d(0,0,0)}
#cboxWrapper {max-width:none}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling: touch}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
#cboxOverlay{background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9999' height='9999' viewBox='0 0 9999 9999'%3E%3Cpattern id='p' patternTransform='rotate(45 0 0)' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Cline x1='0' y1='0' x2='0' y2='8' style='stroke:%23111;stroke-width:4'/%3E%3C/pattern%3E%3Crect x='0' y='0' width='9999' height='999' fill='url(%23p)'/%3E%3C/svg%3E")}
#colorbox{outline:0}
#cboxTopLeft,#cboxTopRight,#cboxBottomLeft,#cboxBottomRight,#cboxMiddleLeft,#cboxMiddleRight,#cboxPrevious,#cboxNext,#cboxClose{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='50' viewBox='0 0 176 50'%3E%3Crect x='14' fill='white' width='86' height='50'/%3E%3Ccircle fill='white' stroke='%23B3B3B3' cx='36' cy='38' r='10.5'/%3E%3Ccircle fill='white' stroke='%23B3B3B3' cx='36' cy='13' r='10.5'/%3E%3Cpath fill='%23B3B3B3' d='M30.9 18.5l3.7-5.6-3.3-5.1h2.5l2.2 3.4 2.1-3.4h2.5L37.2 13l3.7 5.5h-2.6l-2.4-3.7-2.4 3.7h-2.6z'/%3E%3Cpath fill='%232E3192' d='M30.9 43.1l3.7-5.6-3.3-5.1h2.5l2.2 3.4 2.1-3.4h2.5l-3.3 5.2 3.7 5.5h-2.6L36 39.4l-2.4 3.7h-2.7z'/%3E%3Crect opacity='.5' width='14' height='50'/%3E%3Crect x='162' opacity='.5' width='14' height='50'/%3E%3Crect x='154' fill='%23FFF' width='8' height='50'/%3E%3Ccircle fill='white' stroke='%23B3B3B3' cx='62' cy='13' r='10.5'/%3E%3Ccircle stroke='%23B3B3B3' fill='white' cx='62' cy='38' r='10.5'/%3E%3Ccircle fill='white' stroke='%23B3B3B3' cx='88' cy='13' r='10.5'/%3E%3Ccircle fill='white' stroke='%23B3B3B3' cx='88' cy='38' r='10.5'/%3E%3Cpath fill='%23B3B3B3' d='M59.7 17.3v-2.1l5.1-2-5.1-2v-2l7.4 3.2v1.8l-7.4 3.1zm31.1 0l-7.4-3.2v-1.8l7.4-3.2v2.1l-5.1 2 5.1 2v2.1z'/%3E%3Cpath fill='%232E3192' d='M59.2 41.9v-2.1l5.1-2-5.1-2v-2.1l7.4 3.2v1.8l-7.4 3.2zm31.6 0l-7.4-3.2v-1.8l7.4-3.2v2.1l-5.1 2 5.1 2v2.1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='14' stroke-miterlimit='10' d='M144 31c0 6.6-5.4 12-12 12h-12c-6.6 0-12-5.4-12-12V19c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12v12z' opacity='.5'/%3E%3Cpath fill='%23FFF' d='M137 32c0 2.2-1.8 4-4 4h-14c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h14c2.2 0 4 1.8 4 4v14z'/%3E%3C/svg%3E") !important}
#cboxTopCenter,#cboxBottomCenter{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='50' viewBox='0 0 1 50'%3E%3Crect opacity='.5' x='0' width='1' height='50'/%3E%3Crect y='14' fill='white' width='1' height='22'/%3E%3C/svg%3E") !important}
#cboxTopLeft{width:21px;height:21px;background-repeat:no-repeat;background-position:-101px 0}
#cboxTopRight{width:21px;height:21px;background-repeat:no-repeat;background-position:-130px 0}
#cboxBottomLeft{width:21px;height:21px;background-repeat:no-repeat;background-position: -101px -29px}
#cboxBottomRight{width:21px;height:21px;background-repeat:no-repeat;background-position:-130px -29px}
#cboxMiddleLeft{width:21px;background-position:left top;background-repeat:repeat-y}
#cboxMiddleRight{width:21px;background-position:right top;background-repeat:repeat-y}
#cboxTopCenter{height:21px;background-position:0 0;background-repeat:repeat-x}
#cboxBottomCenter{height:21px;background-position:0 -29px;background-repeat:repeat-x}
#cboxContent{background:#fff;overflow:hidden}
.cboxIframe{background:#fff}
#cboxError{padding:50px;border:1px solid #ccc}
#cboxLoadedContent{margin-bottom:28px}
#cboxTitle{position:absolute;bottom:4px;left:0;text-align:center;width:100%;color:#949494}
#cboxCurrent{position:absolute;bottom:4px;left:58px;color:#949494}
#cboxLoadingOverlay{background:#fff}
#cboxLoadingGraphic{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath opacity='.2' d='M20.2 5.17c-8.253 0-14.945 6.69-14.945 14.945 0 8.255 6.692 14.946 14.946 14.946s14.95-6.69 14.95-14.94c0-8.254-6.69-14.946-14.943-14.946zm0 26.58c-6.424 0-11.633-5.21-11.633-11.635S13.777 8.48 20.2 8.48c6.426 0 11.634 5.21 11.634 11.635 0 6.426-5.208 11.634-11.633 11.634z'/%3E%3Cpath d='M26.013 10.047l1.654-2.866C25.47 5.91 22.924 5.17 20.2 5.17v3.31c2.12 0 4.1.577 5.813 1.567z'/%3E%3C/svg%3E") no-repeat center center;animation:spin 1s infinite}
@keyframes spin {100% {transform:rotate(360deg)}}
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none}
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active {outline:0}
#cboxSlideshow{position:absolute;bottom:4px;right:30px;color:#0092ef}
#cboxPrevious{position:absolute;bottom:0;left:0;background-repeat:no-repeat;background-position:-75px 0;width:25px;height:25px;text-indent:-9999px}
#cboxPrevious:hover{background-position:-75px -25px}
#cboxNext{position:absolute;bottom:0;left:27px;background-repeat:no-repeat;background-position:-50px 0;width:25px;height:25px;text-indent:-9999px}
#cboxNext:hover{background-position:-50px -25px}
#cboxClose{position:absolute;bottom:0;right:0;background-repeat:no-repeat;background-position:-25px 0;width:25px;height:25px;text-indent:-9999px}
#cboxClose:hover{background-position:-25px -25px}
.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)}

To get SVGs to work across all browsers, a certain amount of reformatting of the XML code is needed. The main stumbling block is IE, but with a little tweaking even this browser will play ball. For IE, a certain amount of URI encoding is required, but fortunately not a full encode as that would increase the file size considerably. The best rule of thumbs for embedding SVGs are:

• Ensure you remove any unnecessary code from the SVG first. Either do this manually and/or run them through an optimiser like SVGOMG.
• Convert double quotes to single quotes in the code.
• The ‘#’ symbol needs rewriting as ‘%23’.
• ‘<‘ and ‘>’ need rewriting as ‘%3C’ and ‘%3E’.
• IE does not seem to like defined style sheet rules, so just add any styles directly to XML tags

The other clever part about the CSS above, is that we have swapped out the animated 9kb loading.gif graphic for a SVG whilst maintaining IE11/Edge support. I have seen many SVG based spinner examples on the web, but none that support IE and Edge. The trick is to use a static SVG and then use a keyframe animation to rotate the image 360° infinitely

#cboxLoadingGraphic
{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath opacity='.2' d='M20.2 5.17c-8.253 0-14.945 6.69-14.945 14.945 0 8.255 6.692 14.946 14.946 14.946s14.95-6.69 14.95-14.94c0-8.254-6.69-14.946-14.943-14.946zm0 26.58c-6.424 0-11.633-5.21-11.633-11.635S13.777 8.48 20.2 8.48c6.426 0 11.634 5.21 11.634 11.635 0 6.426-5.208 11.634-11.633 11.634z'/%3E%3Cpath d='M26.013 10.047l1.654-2.866C25.47 5.91 22.924 5.17 20.2 5.17v3.31c2.12 0 4.1.577 5.813 1.567z'/%3E%3C/svg%3E") no-repeat center center;
animation:spin 1s infinite}
@keyframes spin {100% {transform:rotate(360deg)}}