Skip to content

Instantly share code, notes, and snippets.

@motyar

motyar/index.html

Created January 21, 2023 11:10
Show Gist options
  • Save motyar/dd130efb8248e384a244b1e746a6457d to your computer and use it in GitHub Desktop.
Save motyar/dd130efb8248e384a244b1e746a6457d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG Generator</title>
<script>
function generateSVG() {
var text = document.getElementById("inputText").value;
var svg = document.getElementById("svgContainer");
svg.innerHTML = "";
svg.innerHTML = '<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<rect x="0.5" y="0.5" width="299" height="299" rx="25" fill="#F8F8F8"/>' +
'<text x="150" y="150" text-anchor="middle" font-family="Arial" font-size="50" fill="#000000">' + text + '</text>' +
'</svg>';
}
</script>
</head>
<body>
<form>
<label for="inputText">Enter text:</label>
<input type="text" id="inputText" onkeyup="generateSVG()">
</form>
<div id="svgContainer"></div>
<button onClick="downloadPNG();">Download</button>
<script>
function downloadPNG() {
var svg = document.getElementById("svgContainer").innerHTML;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "data:image/svg+xml;base64," + btoa(svg);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var imgData = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.href = imgData;
link.download = "image.png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment