A Pen by yoksel.

index.html

<div class="wrapper">
  <h1>SVG-encoder</h1>
  <p>We can use SVG in data URI, but it works for Webkits only. With encoding SVG in data URI works in all modern browsers! : )</p>
  <h4>Paste SVG code</h4>
  <textarea name="init" id="init"></textarea>
  <h4>Take code</h4>
  <textarea name="result" id="result"></textarea>
 
  <h4>How to use in CSS:</h4>
  <code>background: url(data:image/svg+xml,<i>YOUR CODE HERE</i>);</code>
</div> 

script.js

var doc = document;

var initTar = doc.querySelector("#init");
var resTar = doc.querySelector("#result");

initTar.onchange = function(){
   resTar.value = escape(initTar.value);
  }
initTar.onkeyup = function(){
		   resTar.value = escape(initTar.value);
		  } 

function out( data ){
  console.log(data);
}

style.scss

@import "compass";
BODY {
  font: 16px/1.4 "Trebuchet MS", Arial, sans-serif;
  }

A {
  color: tomato;
  }

H1 {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #CCC;
  font: 2em/1.4 Georgia, serif;
  text-align: center;
}

H4 {
  margin-bottom: .3em;
  font: 1.3em/1.4 Georgia, serif;
  color: steelblue;
  }

P {
  margin: 1.5rem 0;
  }

.wrapper {
  width: 500px;
  margin: 2rem auto;
  /*padding: 20px;
  border: 1px solid #DDD;*/
  }

TEXTAREA {
  width: 100%;
  height: 50px;
  margin: 0 0 1em 0;
  border: 1px solid #DDD;
  border-radius: 10px;
}

CODE {
  padding: 0 7px;
  background: palegoldenrod;
  border-radius: 5px;
  text-shadow: 1px 1px 0 rgba(255,255,255,1);
  font: 14px/1 monospace;
  color: darken(palegoldenrod, 55%);
}

CODE I {
  font-style: italic;
  color: darken(palegoldenrod, 80%);
  }

SVG-encoder.markdown

SVG-encoder

We can use SVG in data URI, but it works for Webkits only. With encoding SVG in data URI works in all modern browsers! : )

A Pen by yoksel on CodePen.

License.