apsun · May 9, 2025 03:29
diff --git a/svg2png.html b/svg2png.html
 <html>
 <body>
 <svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow result="drop-shadow-0" in="SourceGraphic" style="flood-opacity: 0.3;" stdDeviation="10" dx="0" dy="10"/>
    </filter>
    <clipPath id="clip-0">
      <path style="stroke-width: 3px; fill: rgb(255, 255, 255);" d="M 100 724 L 100 300 C 100 185.001 170 99.995 300.026 100 L 724 99.995 C 854 100 924 185.001 924 300 L 924 724 C 924 839.001 854 923.995 724 924 L 300.026 924 C 170 924 100 839.001 100 724 Z"/>
    </clipPath>
  </defs>
  <g style="filter: url(#shadow);">
    <g style="clip-path: url(#clip-0);">
      <path style="stroke-width: 3px; fill: rgb(255, 255, 255);" d="M 100 724 L 100 300 C 100 185.001 170 99.995 300.026 100 L 724 99.995 C 854 100 924 185.001 924 300 L 924 724 C 924 839.001 854 923.995 724 924 L 300.026 924 C 170 924 100 839.001 100 724 Z"/>
    </g>
  </g>
  <!-- icon content goes here -->
 </svg>
 <script>
 const svgElem = document.querySelector('svg');
 const size = svgElem.attributes.height.value;

 function svgToPng() {
  	const svgData = new XMLSerializer().serializeToString(svgElem);
  	const svgBlob = new Blob([svgData], {type: 'image/svg+xml'});
  	const svgUrl = URL.createObjectURL(svgBlob);

  	return new Promise(resolve => {
  	   	const img = document.createElement('img');
   	 	img.addEventListener('load', () => {
 			const canvas = document.createElement('canvas');
 			const ctx = canvas.getContext('2d');
 			canvas.width = img.width;
    		canvas.height = img.height;
    		ctx.drawImage(img, 0, 0);
    		resolve(canvas.toDataURL('image/png'));
    	});
    	img.src = svgUrl;
    });
 }

 function downloadUrl(url, filename) {
    const a = document.createElement('a');
    a.download = filename;
    a.href = url;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
 }

 svgToPng().then((u) => downloadUrl(u, `AppIcon-${size}.png`));
 </script>
 </body>
 </html>
	<html>
	<body>
	<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
	<defs>
	<filter id="shadow">
	<feDropShadow result="drop-shadow-0" in="SourceGraphic" style="flood-opacity: 0.3;" stdDeviation="10" dx="0" dy="10"/>
	</filter>
	<clipPath id="clip-0">
	<path style="stroke-width: 3px; fill: rgb(255, 255, 255);" d="M 100 724 L 100 300 C 100 185.001 170 99.995 300.026 100 L 724 99.995 C 854 100 924 185.001 924 300 L 924 724 C 924 839.001 854 923.995 724 924 L 300.026 924 C 170 924 100 839.001 100 724 Z"/>
	</clipPath>
	</defs>
	<g style="filter: url(#shadow);">
	<g style="clip-path: url(#clip-0);">
	<path style="stroke-width: 3px; fill: rgb(255, 255, 255);" d="M 100 724 L 100 300 C 100 185.001 170 99.995 300.026 100 L 724 99.995 C 854 100 924 185.001 924 300 L 924 724 C 924 839.001 854 923.995 724 924 L 300.026 924 C 170 924 100 839.001 100 724 Z"/>
	</g>
	</g>
	<!-- icon content goes here -->
	</svg>
	<script>
	const svgElem = document.querySelector('svg');
	const size = svgElem.attributes.height.value;

	function svgToPng() {
	const svgData = new XMLSerializer().serializeToString(svgElem);
	const svgBlob = new Blob([svgData], {type: 'image/svg+xml'});
	const svgUrl = URL.createObjectURL(svgBlob);

	return new Promise(resolve => {
	const img = document.createElement('img');
	img.addEventListener('load', () => {
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');
	canvas.width = img.width;
	canvas.height = img.height;
	ctx.drawImage(img, 0, 0);
	resolve(canvas.toDataURL('image/png'));
	});
	img.src = svgUrl;
	});
	}

	function downloadUrl(url, filename) {
	const a = document.createElement('a');
	a.download = filename;
	a.href = url;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	}

	svgToPng().then((u) => downloadUrl(u, `AppIcon-${size}.png`));
	</script>
	</body>
	</html>