svg-replace
Hub » svg-replace



logo.pngaa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa
logo.pngaaaa
bblogo.pngaa
aa

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="200" height="200"><defs><path d="M135.17 265.94C135.17 322.4 183.23 368.23 242.41 368.23C301.6 368.23 349.65 322.4 349.65 265.94C349.65 209.48 301.6 239.74 242.41 239.74C183.23 239.74 135.17 209.48 135.17 265.94Z" id="eKXDo6Q9Y"></path><path d="M203.37 167.1C203.37 182.65 192.3 195.27 178.66 195.27C165.03 195.27 153.95 182.65 153.95 167.1C153.95 151.55 165.03 138.93 178.66 138.93C192.3 138.93 203.37 151.55 203.37 167.1Z" id="aRL6Kyb5O"></path><path d="M328.02 167.1C328.02 182.65 316.95 195.27 303.31 195.27C289.68 195.27 278.6 182.65 278.6 167.1C278.6 151.55 289.68 138.93 303.31 138.93C316.95 138.93 328.02 151.55 328.02 167.1Z" id="btD9b1YXH"></path><path d="M349.65 269.89C349.65 282.71 301.6 293.12 242.41 293.12C183.23 293.12 135.17 282.71 135.17 269.89C135.17 257.07 183.23 280.27 242.41 280.27C301.6 280.27 349.65 257.07 349.65 269.89Z" id="j2sZrIx2hV"></path></defs><g><g><g><use xlink:href="#eKXDo6Q9Y" opacity="1" fill="#e94c25" fill-opacity="1"></use></g><g><use xlink:href="#aRL6Kyb5O" opacity="1" fill="#461a0f" fill-opacity="1"></use></g><g><use xlink:href="#btD9b1YXH" opacity="1" fill="#461a0f" fill-opacity="1"></use></g><g><use xlink:href="#j2sZrIx2hV" opacity="1" fill="#b12906" fill-opacity="1"></use></g></g></g></svg>


↑ SVG-code

<head>
<link rel="stylesheet" type="text/css" href="/local--code/7happy7:replace-tool/3">
</head>
 
<body style="margin: 0; padding: 0;">
<form>
<input type="button" value="reset" onclick="reset()"><input type="button" value="copy result" onclick="copyAfter()">
<textarea id="before" placeholder="insert svg-code" oninput="replace()" rows="10" style="width: 99%;"></textarea>
<textarea id="after" rows="10" style="width: 99%;" placeholder="result" readonly></textarea>
<form>
<script src="/local--code/7happy7:svg-replace/2"></script>
</body>
let before = document.getElementById("before");
let after = document.getElementById("after");
let afterCode, i;
afterCode = "";
 
function replace() {
/*
afterCode = before.value.split(/[#]/g).join("%23").split(/[>]/g).join("%3E").split(/[\?]/g).join("%3F").split(/[<]/g).join("%3C").split(/["]/g).join("'").split(/[!]/g).join("%21").split(/[\(]/g).join("%28").split(/[\)]/g).join("%29").split(/[ ]{2,}/g).join("").split(/\n/g).join("");
*/
    after.value = 'url("data:image/svg+xml,' + encodeURIComponent(before.value) + '")';
}
 
function reset(){
    before.value = "";
    replace();
}
 
function copyAfter(){
    if(execCopy(after.value)){
    }else {
        alert('error: copying failed');
    }
};
 
function execCopy(string) {
    let temp = document.createElement('div'); 
    temp.appendChild(document.createElement('pre')).textContent = string;
 
    let elemPosition = temp.style;
    elemPosition.position = 'fixed';
    elemPosition.left = '-100%';
 
    document.body.appendChild(temp);
    document.getSelection().selectAllChildren(temp);
 
    let result = document.execCommand('copy');
    document.body.removeChild(temp);
 
    return result;
};
body * {
    font-family: Courier, monospace;
    font-size: 10px;
}
input, textarea {
    font-family: inherit;
    font-size: 100%;
}
form {
    margin: 1em 0 0;
}