-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
58 lines (39 loc) · 1.65 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
(function(){
function processSVG(){
var svg = document.querySelector('#raw-svg').value;
var svgforcss = document.querySelector('#cssreadysvg');
var cssreadysvgoninput = document.querySelector('#cssreadysvgoninput');
// Replace the Declaration
var proecssedSource = svg.replace(new RegExp(/<\?xml.*\?>/), '');
// Remove all comments
var proecssedSource = proecssedSource.replace(new RegExp(/<!-- .* -->/ig), '');
// Remove all hash with URL encoded code
var proecssedSource = proecssedSource.replace(new RegExp(/#/ig), '%23');
// Remove all whitespace
var proecssedSource = proecssedSource.replace(new RegExp(/\r?\n|\r/ig), '');
// Remove all tabs
var proecssedSource = proecssedSource.replace(new RegExp(/\t/ig), '');
// Remove andular bracket with html entity
var proecssedSource = proecssedSource.replace(new RegExp(/</ig), '%3C').replace(new RegExp(/>/ig), '%3E');
var cssvalue = `url(\'data:image/svg+xml, ${proecssedSource}\')`;
svgforcss.innerHTML = `<code>background-image: ${cssvalue}</code>`;
cssreadysvgoninput.value = `background-image: ${cssvalue}`;
document.querySelector('#svgdisplay div').style.backgroundImage = cssvalue;
return cssvalue;
}
function copySVG(){
cssreadysvgoninput.select();
document.execCommand('Copy')
}
window.addEventListener('load', function(){
var svgInput = document.querySelector('#raw-svg')
svgInput.addEventListener('keyup', function(){
processSVG();
})
var copyBtn = document.querySelector('#copyBtn')
copyBtn.addEventListener('click', function(){
copySVG();
swal('Copied!', 'Background CSS rule copied to clipboard successfully', 'success');
});
})
})()