Skip to content

Instantly share code, notes, and snippets.

@nazeeruddinikram

nazeeruddinikram/svg-creator-tool.html

Forked from pachacamac/svg-creator-tool.html
Created June 2, 2016 12:37
Show Gist options
  • Save nazeeruddinikram/497fd6fcddad0347c8afdba3039ae4f6 to your computer and use it in GitHub Desktop.
Save nazeeruddinikram/497fd6fcddad0347c8afdba3039ae4f6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @pachacamac pachacamac revised this gist Jun 2, 2016. 1 changed file with 23 additions and 10 deletions.
    33 changes: 23 additions & 10 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,13 +6,13 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <p id="pos">0, 0</p>
    <p>click and drag on the canvas ... you're making a polygon ... <button id="reset">reset</button><button id="undo">undo</button></p>
    <canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
    <p>click, click, click, on the canvas ... you're making a polygon ... <button id="reset">reset</button><button id="undo">undo</button></p>
    <pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>
    <img id="preview" alt="preview" style="border: 1px dotted black; width: 100px; height: 100px;">
    <span id="pos">0, 0</span>
    <pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>
    <script>
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [], f = 100/w;
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), dragging, points = [], f = 100/w;
    function drawAndUpdateSvg(w, h, f){
    if(!points.length){c.clearRect(0, 0, w, h); return}
    c.beginPath();
    @@ -38,15 +38,28 @@
    drawAndUpdateSvg(w, h, f);
    }

    C.onmousemove = function(e){
    document.getElementById('pos').innerText = Math.floor(e.offsetX * f) + ', ' + Math.floor(e.offsetY * f);
    document.getElementById('reset').onclick = function(){ points = []; drawAndUpdateSvg(w, h, f) };
    document.getElementById('undo').onclick = function(){ points = points.slice(0, points.length-1); drawAndUpdateSvg(w, h, f) };

    function pos(e){
    var x = e.offsetX, y = e.offsetY;
    if(e.changedTouches){
    x = e.changedTouches[0].pageX - e.changedTouches[0].target.offsetLeft;
    y = e.changedTouches[0].pageY - e.changedTouches[0].target.offsetTop;
    }
    return [Math.floor(x * f / f), Math.floor(y * f / f)];
    }
    C.onclick = function(e){
    points.push([Math.floor(e.offsetX * f / f), Math.floor(e.offsetY * f / f)]);

    C.onmousedown = C.ontouchstart = function(e){ points.push(pos(e)); dragging = true; drawAndUpdateSvg(w, h, f) };
    C.onmouseup = C.ontouchend = function(e){ dragging = false; points.push(pos(e)); drawAndUpdateSvg(w, h, f) };
    C.onmousemove = C.ontouchmove = function(e){
    e.preventDefault();
    document.getElementById('pos').innerText = pos(e).map(function(e){return Math.floor(e*f)}).join(', ');
    if(!dragging) return;
    if(points.length>1) points.pop();
    points.push(pos(e));
    drawAndUpdateSvg(w, h, f);
    };
    document.getElementById('reset').onclick = function(){ points = []; drawAndUpdateSvg(w, h, f) };
    document.getElementById('undo').onclick = function(){ points = points.slice(0, points.length-1); drawAndUpdateSvg(w, h, f) };
    </script>
    </body>
    </html>
  2. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,12 +8,13 @@
    <body>
    <p id="pos">0, 0</p>
    <canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
    <p>hold shift and click to start a new path, then click, click, click, ...</p>
    <p>click, click, click, on the canvas ... you're making a polygon ... <button id="reset">reset</button><button id="undo">undo</button></p>
    <pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>
    <img id="preview" alt="preview" style="border: 1px dotted black; width: 100px; height: 100px;">
    <script>
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [], f = 100/w;
    function drawAndUpdateSvg(w, h, f){
    if(!points.length){c.clearRect(0, 0, w, h); return}
    c.beginPath();
    c.moveTo(points[0][0], points[0][1]);
    for(var p in points){
    @@ -41,11 +42,11 @@
    document.getElementById('pos').innerText = Math.floor(e.offsetX * f) + ', ' + Math.floor(e.offsetY * f);
    }
    C.onclick = function(e){
    var x = Math.floor(e.offsetX * f / f), y = Math.floor(e.offsetY * f / f);
    if(e.shiftKey) points = [];
    points.push([x, y]);
    points.push([Math.floor(e.offsetX * f / f), Math.floor(e.offsetY * f / f)]);
    drawAndUpdateSvg(w, h, f);
    };
    document.getElementById('reset').onclick = function(){ points = []; drawAndUpdateSvg(w, h, f) };
    document.getElementById('undo').onclick = function(){ points = points.slice(0, points.length-1); drawAndUpdateSvg(w, h, f) };
    </script>
    </body>
    </html>
  3. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@
    <body>
    <p id="pos">0, 0</p>
    <canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
    <p>hold ctrl and click to start a new path, then click, click, click, ...</p>
    <p>hold shift and click to start a new path, then click, click, click, ...</p>
    <pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>
    <img id="preview" alt="preview" style="border: 1px dotted black; width: 100px; height: 100px;">
    <script>
    @@ -42,7 +42,7 @@
    }
    C.onclick = function(e){
    var x = Math.floor(e.offsetX * f / f), y = Math.floor(e.offsetY * f / f);
    if(e.ctrlKey) points = [];
    if(e.shiftKey) points = [];
    points.push([x, y]);
    drawAndUpdateSvg(w, h, f);
    };
  4. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,10 +10,10 @@
    <canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
    <p>hold ctrl and click to start a new path, then click, click, click, ...</p>
    <pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>

    <img id="preview" alt="preview" style="border: 1px dotted black; width: 100px; height: 100px;">
    <script>
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [], f = 100/w;
    function drawAndMakeSvg(w, h, f){
    function drawAndUpdateSvg(w, h, f){
    c.beginPath();
    c.moveTo(points[0][0], points[0][1]);
    for(var p in points){
    @@ -25,14 +25,16 @@
    w *= f; h *= f
    var path = points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ')
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+path+'"/></g></svg>';
    document.getElementById('out').innerText = path + "\n\n" + s + "\n\ndata:image/svg+xml;base64," + btoa(s);
    var d = 'data:image/svg+xml;base64,' + btoa(s);
    document.getElementById('out').innerText = path + "\n\n" + s + "\n\n" + d;
    document.getElementById('preview').src = d;
    }
    c.strokeStyle = 'rgb(0,0,0)';
    c.lineWidth = 2;

    if(location.hash.length){
    points = location.hash.substring(1).split(' ').map(function(p){return p.split(',').map(function(e){return parseInt(e) / f})});
    drawAndMakeSvg(w, h, f);
    drawAndUpdateSvg(w, h, f);
    }

    C.onmousemove = function(e){
    @@ -42,7 +44,7 @@
    var x = Math.floor(e.offsetX * f / f), y = Math.floor(e.offsetY * f / f);
    if(e.ctrlKey) points = [];
    points.push([x, y]);
    drawAndMakeSvg(w, h, f);
    drawAndUpdateSvg(w, h, f);
    };
    </script>
    </body>
  5. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 21 additions and 14 deletions.
    35 changes: 21 additions & 14 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,29 +13,36 @@

    <script>
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [], f = 100/w;
    function makeSvg(w, h, f){
    w *= f; h *= f;
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ')+'"/></g></svg>';
    document.getElementById('out').innerText = s + "\n\ndata:image/svg+xml;base64," + btoa(s);
    function drawAndMakeSvg(w, h, f){
    c.beginPath();
    c.moveTo(points[0][0], points[0][1]);
    for(var p in points){
    c.clearRect(0, 0, w, h);
    c.lineTo(points[p][0], points[p][1]);
    c.stroke();
    }
    c.closePath();
    w *= f; h *= f
    var path = points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ')
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+path+'"/></g></svg>';
    document.getElementById('out').innerText = path + "\n\n" + s + "\n\ndata:image/svg+xml;base64," + btoa(s);
    }
    c.strokeStyle = 'rgb(0,0,0)';
    c.lineWidth = 2;

    if(location.hash.length){
    points = location.hash.substring(1).split(' ').map(function(p){return p.split(',').map(function(e){return parseInt(e) / f})});
    drawAndMakeSvg(w, h, f);
    }

    C.onmousemove = function(e){
    document.getElementById('pos').innerText = Math.floor(e.offsetX * f) + ', ' + Math.floor(e.offsetY * f);
    }
    C.onclick = function(e){
    var x = Math.floor(e.offsetX * f / f), y = Math.floor(e.offsetY * f / f);
    c.clearRect(0, 0, w, h);
    if(e.ctrlKey){
    c.closePath();
    points = [];
    c.beginPath();
    }
    c.lineTo(x, y);
    if(e.ctrlKey) points = [];
    points.push([x, y]);
    makeSvg(w, h, f);
    c.stroke();
    c.moveTo(x, y);
    drawAndMakeSvg(w, h, f);
    };
    </script>
    </body>
  6. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@
    function makeSvg(w, h, f){
    w *= f; h *= f;
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ')+'"/></g></svg>';
    document.getElementById('out').innerText = s + "\n\n" + btoa(s);
    document.getElementById('out').innerText = s + "\n\ndata:image/svg+xml;base64," + btoa(s);
    }
    c.strokeStyle = 'rgb(0,0,0)';
    c.lineWidth = 2;
  7. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 30 additions and 15 deletions.
    45 changes: 30 additions & 15 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,42 @@
    <canvas id="x" width=100 height=100 style="border: 1px solid black;"></canvas>
    <p>hold ctrl to start a new path, click, click, click, hold shift to create an svg (check console output)</p>
    <!DOCTYPE html>
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>SVG Helper Tool</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <p id="pos">0, 0</p>
    <canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
    <p>hold ctrl and click to start a new path, then click, click, click, ...</p>
    <pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>

    <script>
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [];
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [], f = 100/w;
    function makeSvg(w, h, f){
    w *= f; h *= f;
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ')+'"/></g></svg>';
    document.getElementById('out').innerText = s + "\n\n" + btoa(s);
    }
    c.strokeStyle = 'rgb(0,0,0)';
    c.lineWidth = 1;

    c.lineWidth = 2;
    C.onmousemove = function(e){
    document.getElementById('pos').innerText = Math.floor(e.offsetX * f) + ', ' + Math.floor(e.offsetY * f);
    }
    C.onclick = function(e){
    if(e.shiftKey){
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+points.map(function(p){return p.join(',')}).join(' ')+'"/></g></svg>';
    console.log(s);
    console.log(btoa(s));
    return;
    }
    var x = Math.floor(e.offsetX * f / f), y = Math.floor(e.offsetY * f / f);
    c.clearRect(0, 0, w, h);
    if(e.ctrlKey){
    c.closePath();
    points = [];
    c.clearRect(0, 0, w, h);
    c.beginPath();
    c.moveTo(e.offsetX, e.offsetY);
    }
    c.lineTo(e.offsetX, e.offsetY);
    points.push([e.offsetX, e.offsetY]);
    c.lineTo(x, y);
    points.push([x, y]);
    makeSvg(w, h, f);
    c.stroke();
    c.moveTo(x, y);
    };
    </script>
    </body>
    </html>
  8. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,12 +16,12 @@
    if(e.ctrlKey){
    c.closePath();
    points = [];
    c.clearRect(0, 0, w, h);
    c.beginPath();
    c.moveTo(e.offsetX, e.offsetY);
    }
    c.lineTo(e.offsetX, e.offsetY);
    points.push([e.offsetX, e.offsetY]);
    c.stroke();
    c.clearRect(0, 0, w, h);
    };
    </script>
  9. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,13 +15,13 @@
    }
    if(e.ctrlKey){
    c.closePath();
    c.clearRect(0, 0, w, h);
    points = [];
    c.beginPath();
    c.moveTo(e.offsetX, e.offsetY);
    }
    c.lineTo(e.offsetX, e.offsetY);
    points.push([e.offsetX, e.offsetY]);
    c.stroke();
    c.clearRect(0, 0, w, h);
    };
    </script>
  10. @pachacamac pachacamac revised this gist Jun 1, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <canvas id="x" width=100 height=100 style="border: 1px solid black;">
    <canvas id="x" width=100 height=100 style="border: 1px solid black;"></canvas>
    <p>hold ctrl to start a new path, click, click, click, hold shift to create an svg (check console output)</p>

    <script>
  11. @pachacamac pachacamac created this gist May 30, 2016.
    27 changes: 27 additions & 0 deletions svg-creator-tool.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <canvas id="x" width=100 height=100 style="border: 1px solid black;">
    <p>hold ctrl to start a new path, click, click, click, hold shift to create an svg (check console output)</p>

    <script>
    var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [];
    c.strokeStyle = 'rgb(0,0,0)';
    c.lineWidth = 1;

    C.onclick = function(e){
    if(e.shiftKey){
    var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+points.map(function(p){return p.join(',')}).join(' ')+'"/></g></svg>';
    console.log(s);
    console.log(btoa(s));
    return;
    }
    if(e.ctrlKey){
    c.closePath();
    c.clearRect(0, 0, w, h);
    points = [];
    c.beginPath();
    c.moveTo(e.offsetX, e.offsetY);
    }
    c.lineTo(e.offsetX, e.offsetY);
    points.push([e.offsetX, e.offsetY]);
    c.stroke();
    };
    </script>