convert svg to data for css background

by ian_smithz

HTML

<div class="container">
  <div class="row">
    
    <div class="col-xs-12 input-area">
      <h1>SVG to Data URI converter</h1>
      <p>Paste or drag the contents of a valid SVG document source below and generate the data URI that should work cross-browser</p>
    </div>
    <div class="col-xs-12 col-sm-6 input-area">
      <div class="form-group">
        <label for="input">Enter your SVG here (demos: 
          <button id="circle" class="btn btn-xs">1</button>
          <button id="use" class="btn btn-xs">2</button>
          <button id="animate" class="btn btn-xs" title="only works in some browsers e.g. chrome">3</button>
          <button id="trans" class="btn btn-xs">4</button>
          )
        </label>
        <textarea id="input" placeholder="<svg ..."></textarea>
      </div>

      <div class="form-group">
        <button type="button" id="convert" class="btn btn-primary">Convert ...</button>
        bg:
        <input type="color" value="#ffffff" id="background-colour"/>
      </div>

    </div>
    <div class="col-xs-12 col-sm-6 input-area">
      <div class="form-group">
        <label for="output">CSS generated here</label>
        <textarea id="output" placeholder=""></textarea>
      </div>

      <div class="form-group">
        <button type="button" id="copy" class="btn btn-default">Copy to clipboard</button>
      </div>
      
    </div>

  </div>
</div>

CSS

.input-area {
  background: #FFF;
  background: rgba(255, 255, 255, 0.9);
}

textarea {
  width: 100%;
  height: 16em;
}



/*bs4 custom build */


/*!
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-sm:0;--breakpoint-md:768px;--breakpoint-lg:1025px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline...

JavaScript

function escapeRegExp(str) {
  return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

$(document).ready(function () {
  $("#circle").click(function(){
    $("#input").val('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">\r\n  <circle cx="20" cy="20" r="20" fill="none" stroke="#aaa" stroke-width="2" />\r\n</svg>');
  });

  $("#use").click(function(){
    $("#input").val('<svg viewBox="0 0 96 64" width="96" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n  <defs>\r\n    <symbol id="c">\r\n      <path fill="inherit" d="M0 0v32h32V0H0zm24 9.6c1 0 2 1.4 1 2.4L15 22c-.6.5-1.4.5-2 0l-4-4c-1.2-1.3.7-3.2 2-2l3 3 9-9c.4-.3.7-.4 1-.4z"/>\r\n    </symbol>\r\n  </defs>\r\n  <use x="0" y="0" xlink:href="#c" fill="olive" />\r\n  <use x="32" y="0" xlink:href="#c" fill="green" />\r\n  <use x="64" y="0" xlink:href="#c" fill="forestgreen" />\r\n  <use x="0" y="32" xlink:href="#c" fill="seagreen" />\r\n  <use x="32" y="32" xlink:href="#c" fill="darkolivegreen" />\r\n  <use x="64" y="32" xlink:href="#c" fill="olivedrab" />\r\n</svg>');
  });

  $("#animate").click(function(){
    $("#input").val('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">\r\n<style type="text/css">\r\n  #c {animation: x 5s alternate infinite;}\r\n  @keyframes x { from { fill: gold; } to { fill: purple} }\r\n</style>\r\n<circle id="c" cx="20" cy="20" r="20" fill="gold"/>\r\n<!-- works in chrome ... not in IE and others -->\r\n</svg>');
  });
  
    $("#trans").click(function(){
    $("#input").val('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">\r\n    <path fill="#ddd" d="m0 0h16v32h16V16H0z" />\r\n</svg>');
  });

  $("#copy").click(function(){
    $("#output").focus();
    $("#output").select();
    try {
      var successful =...