embeding SVG into css

Question

i want to converse this code

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 44.2 42.7" enable-background="new 0 0 44.2 42.7" xml:space="preserve">
<g>
    <g>
        <path fill="#FFFFFF" d="M20.1,20.7c0.5-0.2,0.9-0.4,1.2-0.7c0.6-0.6,0.9-1.3,0.9-2.1c0-1.1-0.3-1.9-1-2.5c-0.7-0.7-1.6-1-2.6-1
            h-6.3v13.6h6.3c1.3,0,2.2-0.3,2.9-1c0.8-0.8,1.2-1.8,1.2-2.9c0-1-0.3-1.7-1-2.4C21.3,21.2,20.8,20.9,20.1,20.7z M14.1,15.8h4.4
            c0.5,0,0.9,0.2,1.2,0.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.7-0.2,1.2-0.6,1.7c-0.4,0.4-0.8,0.6-1.3,0.6h-4.3V15.8z M20,25.7
            c-0.4,0.4-1,0.6-1.8,0.6h-4v-4.8h4c0.8,0,1.4,0.2,1.9,0.7c0.4,0.4,0.6,1,0.6,1.7C20.7,24.7,20.4,25.2,20,25.7z"/>
        <path fill="#FFFFFF" d="M30.7,26.1c-0.3,0.3-0.8,0.5-1.6,0.5c-0.7,0-1.3-0.2-1.8-0.7c-0.5-0.5-0.8-1.3-0.8-2.5H33
            c0-1.5-0.4-2.7-1.1-3.4c-0.8-0.8-1.7-1.2-2.9-1.2c-1.2,0-2.1,0.4-2.9,1.1c-0.9,0.9-1.3,2.1-1.3,3.5s0.4,2.6,1.3,3.4
            c0.8,0.8,1.8,1.2,3.1,1.2c1.2,0,2.2-0.3,2.9-1c0.5-0.5,0.8-1.2,1-2.1h-1.7C31.3,25.3,31.1,25.7,30.7,26.1z M27.3,20.8
            c0.4-0.4,1-0.6,1.6-0.6c0.7,0,1.2,0.2,1.6,0.6c0.4,0.4,0.6,0.9,0.6,1.4h-4.5C26.7,21.6,27,21.2,27.3,20.8z"/>
        <path fill="#FFFFFF" d="M30.5,20.7c-0.4-0.4-0.9-0.6-1.6-0.6c-0.6,0-1.2,0.2-1.6,0.6c-0.4,0.4-0.6,0.8-0.7,1.3h4.5
            C31.1,21.6,30.9,21.1,30.5,20.7z"/>
        <path fill="#FFFFFF" d="M19.7,19.4c0.4-0.4,0.6-1,0.6-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.3-0.3-0.7-0.5-1.2-0.5h-4.4V20h4.3
            C18.9,20,19.3,19.8,19.7,19.4z"/>
        <path fill="#FFFFFF" d="M18.1,21.5h-4v4.8h4c0.8,0,1.4-0.2,1.8-0.6c0.5-0.5,0.7-1.1,0.7-1.7c0-0.7-0.2-1.3-0.6-1.7
            C19.6,21.7,18.9,21.5,18.1,21.5z"/>
        <path fill="#FFFFFF" d="M22.1,3C12,3,3.9,11.2,3.9,21.3c0,10.1,8.2,18.3,18.3,18.3s18.2-8.2,18.2-18.3C40.4,11.2,32.2,3,22.1,3z
             M25.5,17.2H32v0.7h-6.5V17.2z M21.4,26.9c-0.6,0.6-1.6,1-2.9,1h-6.3V14.3h6.3c1.1,0,1.9,0.3,2.6,1c0.6,0.6,1,1.5,1,2.5
            c0,0.8-0.3,1.6-0.9,2.1c-0.3,0.3-0.7,0.6-1.2,0.7c0.6,0.2,1.1,0.5,1.5,0.9c0.6,0.6,1,1.4,1,2.4C22.6,25.1,22.2,26.1,21.4,26.9z
             M32,27c-0.7,0.7-1.6,1-2.9,1c-1.3,0-2.3-0.4-3.1-1.2c-0.8-0.8-1.3-2-1.3-3.4s0.4-2.6,1.3-3.5c0.7-0.7,1.7-1.1,2.9-1.1
            c1.1,0,2.1,0.4,2.9,1.2c0.7,0.7,1.1,1.9,1.1,3.4h-6.4c0,1.1,0.3,1.9,0.8,2.5c0.5,0.5,1.1,0.7,1.8,0.7c0.7,0,1.3-0.2,1.6-0.5
            c0.4-0.4,0.6-0.8,0.6-1.3H33C32.8,25.8,32.5,26.5,32,27z"/>
        <rect x="25.5" y="17.2" fill="#FFFFFF" width="6.5" height="0.7"/>
    </g>
</g>
</svg>

to something like this

data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJkcmliYmJsZS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTE3LjM2MywxNy42MDRjMC44MzQsMi4xOCwxLjQ0Nyw0LjQyLDEuODM4LDYuNzE1DQoJYy0wLjk5NiwwLjM4Ni0yLjA3MiwwLjYwNC0zLjIwMSwwLjYwNGMtMi4wNjQsMC0zLjk2Mi0wLjcxMS01LjQ3Ni0xLjg5NEMxMi4yOTcsMjAuMjUsMTQuNTU5LDE4LjQ0MSwxNy4zNjMsMTcuNjA0eiBNMTEuOTc1LDguMDQ5DQoJYy0yLjI5MSwxLjE2NS00LjAxLDMuMjg2LTQuNjMzLDUuODM4YzMuMDE4LTAuMDIxLDUuNjI5LTAuMzUyLDcuODE2LTAuOTk2QzE0LjIzNCwxMS4yMzIsMTMuMTczLDkuNjE3LDExLjk3NSw4LjA0OXogTTIxLjQzOCw4Ljk0Mw0KCUMxOS45MzIsNy43NzksMTguMDQ4LDcuMDc4LDE2LDcuMDc4Yy0wLjc1NiwwLTEuNDg3LDAuMTA1LTIuMTg4LDAuMjgzYzEuMTgsMS41ODUsMi4yMjUsMy4yMTksMy4xNCw0Ljg5NA0KCUMxOC44NTcsMTEuNDQ4LDIwLjM1NCwxMC4zNDEsMjEuNDM4LDguOTQzeiBNMTYuNjQ2LDE1Ljg2OGMtMC4xOTEtMC40MzItMC4zOTQtMC44NjEtMC42MDQtMS4yODkNCgljLTIuNTAzLDAuNzg3LTUuNDkyLDEuMTg1LTguOTU1LDEuMTljMCwwLjA3OC0wLjAxLDAuMTUzLTAuMDEsMC4yMzFjMCwyLjE2NiwwLjc3OCw0LjE1NCwyLjA2Niw1LjcwMQ0KCUMxMS4xLDE4Ljc2OCwxMy42MDYsMTYuODE4LDE2LjY0NiwxNS44Njh6IE0xOS4yMjUsMTcuMjA5YzAuNzU2LDIuMDIsMS4zMzQsNC4wOSwxLjcyOSw2LjIwN2MyLjAyNC0xLjM1NywzLjQ1OC0zLjUyMywzLjg1My02LjAzMQ0KCUMyMi43NzEsMTcuMDMyLDIwLjkxMiwxNi45NzEsMTkuMjI1LDE3LjIwOXogTTMyLDE2YzAsOC44MzYtNy4xNjQsMTYtMTYsMTZTMCwyNC44MzYsMCwxNlM3LjE2NCwwLDE2LDBTMzIsNy4xNjQsMzIsMTZ6IE0yNi44LDE2DQoJYzAtNS45NjUtNC44MzUtMTAuOC0xMC44LTEwLjhTNS4yLDEwLjAzNSw1LjIsMTZTMTAuMDM1LDI2LjgsMTYsMjYuOFMyNi44LDIxLjk2NSwyNi44LDE2eiBNMTcuODE0LDEzLjkxOQ0KCWMwLjI0MiwwLjUsMC40NzEsMS4wMDUsMC42ODgsMS41MTJjMS45NDEtMC4zMzUsNC4wNzUtMC4zMTQsNi4zOTUsMC4wNjZjLTAuMTEyLTEuOTk1LTAuODc1LTMuODE3LTIuMDktNS4yNTENCglDMjEuNTYyLDExLjc5NiwxOS44OTMsMTMuMDIsMTcuODE0LDEzLjkxOXoiLz4NCjwvc3ZnPg0K

to embed it like this

footer ul .ins{
    background-image:url("data:image/svg+xml;
    charset=utf-8;
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIyNDAgMjQwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI0MCAyNDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggaWQ9Imluc3RhZ3JhbS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTI2My42MDQsMjQ5LjAxNXYxLjk2NmMwLDAuMzE1LTAuMjU2LDAuNTcxLTAuNTcxLDAuNTcxaC0xLjkyNA0KCWMtMC4zMTUsMC0wLjU3LTAuMjU1LTAuNTctMC41NzF2LTEuOTY2YzAtMC4zMTUsMC4yNTUtMC41NzEsMC41Ny0wLjU3MWgxLjkyNEMyNjMuMzQ4LDI0OC40NDQsMjYzLjYwNCwyNDguNywyNjMuNjA0LDI0OS4wMTV6DQoJIE0yNTYuMjMzLDI1OC43MDRjMS40NDgsMCwyLjYyMi0xLjE3NCwyLjYyMi0yLjYyMmMwLTEuNDQ4LTEuMTc0LTIuNjIxLTIuNjIyLTIuNjIxcy0yLjYyMiwxLjE3My0yLjYyMiwyLjYyMQ0KCUMyNTMuNjExLDI1Ny41MywyNTQuNzg1LDI1OC43MDQsMjU2LjIzMywyNTguNzA0eiBNMjcyLDI1NmMwLDguODM3LTcuMTYzLDE2LTE2LDE2Yy04LjgzNiwwLTE2LTcuMTYzLTE2LTE2YzAtOC44MzYsNy4xNjQtMTYsMTYtMTYNCglDMjY0LjgzNywyNDAsMjcyLDI0Ny4xNjQsMjcyLDI1NnogTTI2NS4yMywyNTMuNDE2aC01LjI1N2MwLjUzNiwwLjc1MiwwLjg1MiwxLjY3MiwwLjg1MiwyLjY2NmMwLDIuNTQzLTIuMDYyLDQuNjA0LTQuNjA0LDQuNjA0DQoJcy00LjYwNC0yLjA2Mi00LjYwNC00LjYwNGMwLTAuOTk0LDAuMzE2LTEuOTE0LDAuODUyLTIuNjY2aC01LjIzM3Y4LjA2OWMwLDEuOTY1LDEuNTk0LDMuNTU5LDMuNTU5LDMuNTU5aDEwLjg3Ng0KCWMxLjk2NiwwLDMuNTYtMS41OTQsMy41Ni0zLjU1OVYyNTMuNDE2eiBNMjU2LjIyMSwyNTkuNjI5YzEuOTU3LDAsMy41NDctMS41OTEsMy41NDctMy41NDdjMC0xLjA2Mi0wLjQ3LTIuMDE1LTEuMjEyLTIuNjY2DQoJYy0wLjI2LTAuMjI4LTAuNTU0LTAuNDE5LTAuODcyLTAuNTY0Yy0wLjQ0Ni0wLjIwMy0wLjk0MS0wLjMxNy0xLjQ2My0wLjMxN2MtMC41MjEsMC0xLjAxNywwLjExNC0xLjQ2MywwLjMxNw0KCWMtMC4zMTksMC4xNDUtMC42MTIsMC4zMzYtMC44NzMsMC41NjRjLTAuNzQyLDAuNjUtMS4yMTEsMS42MDQtMS4yMTEsMi42NjZDMjUyLjY3NCwyNTguMDM4LDI1NC4yNjYsMjU5LjYyOSwyNTYuMjIxLDI1OS42Mjl6DQoJIE0yNjUuMjMsMjUwLjUxNWMwLTEuOTY1LTEuNTk0LTMuNTU5LTMuNTYtMy41NTloLTkuNzI1djQuNDg3aC0wLjcyOXYtNC40ODdoLTAuNDIxYy0wLjAyOCwwLTAuMDU1LDAuMDAxLTAuMDgzLDAuMDAydjQuNDg1aC0wLjcyOQ0KCXYtNC4zOTNjLTAuMTc3LDAuMDQxLTAuMzQ5LDAuMDk1LTAuNTE0LDAuMTYydjQuMjNoLTAuNzI5di0zLjgzM2MtMC45MDksMC42NDUtMS41MDMsMS43MDUtMS41MDMsMi45MDR2Mi4zMzdoNS43MDUNCgljMC44MzUtMC44NDgsMS45OTYtMS4zNzQsMy4yOC0xLjM3NGMxLjI4NCwwLDIuNDQ1LDAuNTI2LDMuMjgsMS4zNzRoNS43MjlMMjY1LjIzLDI1MC41MTVMMjY1LjIzLDI1MC41MTV6Ii8+DQo8L3N2Zz4NCg==")
}

thank you

Answer 1

A couple of ways you can get the data url for this. One way is to use an online tool such as this:

http://www.mobilefish.com/services/base64/base64.php

Personally, though, my preference is to save the SVG in an app like Illustrator. I save it as a .svg file. Then place it into an image element like so:

<img src="/i/logo.svg" alt="logo">

If you open the page on which that image appears in Chrome, right click on the image and Inspect element. In the inspector, right click on the image URL and choose Open Link in Resources Panel. In the resources panel, right click on the image and choose Copy Image as Data URL.

Seems like a bit of a lengthy task, but I find that the most reliable way.