SVG Customizer Part#7: Get The DataURI & SVG Code

In this example below you will see how to do a SVG Customizer Part#7: Get The DataURI & SVG Code with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by asraven, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright asraven ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG Customizer Part#7: Get The DataURI & SVG Code</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg id="svg" xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle id="circle" cx="10" cy="10" r="10" fill="#eee" stroke-width="2" stroke="#ddd" />
    </pattern>
  </defs>
  <rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern)" />
</svg>

<div id="controls">
  <h3>Exporting The DataURI and Raw SVG Data</h3>
  <a href="#" class='btn' id="getthecode-btn">Get the Code</a>
  <hr class="divider" />

  <h4>Raw SVG</h4>
  <textarea id="svg-textarea"></textarea>

  <h4>CSS DataURI Usage</h4>
  <textarea id="cssDataURI-textarea"></textarea>

  <h4>HTML DataURI Usage</h4>
  <textarea id="htmlDataURI-textarea"></textarea>

</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/asraven/svg-customizer-part7-get-the-datauri-andamp-svg-code-rxdZPZ */
body {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "open sans", sans-serif;
}

h3,
h4 {
  line-height: 1.5;
  color: #444;
  font-weight: normal;
}

#svg {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

#controls {
  text-align: center;
  margin: 60px auto;
  padding: 40px;
  width: 80%;
  max-width: 600px;
  background: #fff;
  box-shadow: 0 0 60px rgba(0, 0, 0, .15);
  border-radius: 4px;
  position: relative;
}

.divider {
  background: none;
  border: 1px solid #eee;
  margin: 30px -40px
}

.btn {
  padding: 10px 30px;
  border-radius: 4px;
  margin: 4px 1px;
  border: none;
  background: #666;
  color: #eee;
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
}

.btn:hover {
  color: #fff;
  background: #363636;
  transition: all .5s ease;
  cursor: pointer;
}

textarea {
  background-color: #fff;
  border: 5px solid rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25) inset;
  color: #888;
  font-family: Consolas, Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 20px;
  padding: 10px 20px;
  white-space: pre;
  width: 90%;
  height: 60px;
  margin: 5px auto;
}

#svg-textarea {
  height: 160px;
}

/*Downloaded from https://www.codeseek.co/asraven/svg-customizer-part7-get-the-datauri-andamp-svg-code-rxdZPZ */
$("#getthecode-btn").click(function() {

  // grab the svg & convert it to a dataURI
  var svg = $('#svg').prop('outerHTML');
  var dataURI = 'data:image/svg+xml;base64,' + window.btoa(svg);

  // format the usage examples 
  var cssDataURI =
    '.datauri-background{\n' +
    '\tbackground-image:url("' + dataURI + '");\n' +
    '}\n';
  var htmlDataURI =
    '<img src="' +
    dataURI +
    '" />';

  // send everything to the textareas
  $("#svg-textarea").val(svg);
  $("#cssDataURI-textarea").val(cssDataURI);
  $("#htmlDataURI-textarea").val(htmlDataURI);

});

Comments