tatsuyasusukida · February 27, 2025 03:22 · tatsuyasusukida · Nov 10, 2023
diff --git a/!README-javascript-svg-png.md b/!README-javascript-svg-png.md
diff --git a/img-check-01.png b/img-check-01.png
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to convert SVG to PNG with JavaScript</title>
  </head>
  <body>
    <h1>How to convert SVG to PNG with JavaScript</h1>
    <section>
      <h2>Input SVG image</h2>
      <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" id="input">
        <circle cx="120" cy="120" r="90" fill="#888888" />
      </svg>
    </section>
    <section>
      <h2>Output PNG image</h2>
      <img alt="" id="output">
    </section>
    <script src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 main()

 function main () {
  const input = document.querySelector('#input')
  const output = document.querySelector('#output')

  const svgData = new XMLSerializer().serializeToString(input)
  const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData)))
  const svgDataUrl = `data:image/svg+xml;charset=utf-8;base64,${svgDataBase64}`

  // console.log(svgData)
  // console.log(encodeURIComponent(svgData))
  // console.log(unescape(encodeURIComponent(svgData)))
  // console.log(btoa(unescape(encodeURIComponent(svgData))))

  const image = new Image()

  image.addEventListener('load', () => {
    const width = input.getAttribute('width')
    const height = input.getAttribute('height')
    const canvas = document.createElement('canvas')

    canvas.setAttribute('width', width)
    canvas.setAttribute('height', height)

    const context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, width, height)

    const dataUrl = canvas.toDataURL('image/png')
    output.src = dataUrl
  })

  image.src = svgDataUrl
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>How to convert SVG to PNG with JavaScript</title>
	</head>
	<body>
	<h1>How to convert SVG to PNG with JavaScript</h1>
	<section>
	<h2>Input SVG image</h2>
	<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" id="input">
	<circle cx="120" cy="120" r="90" fill="#888888" />
	</svg>
	</section>
	<section>
	<h2>Output PNG image</h2>
	<img alt="" id="output">
	</section>
	<script src="main.js"></script>
	</body>
	</html>
	main()

	function main () {
	const input = document.querySelector('#input')
	const output = document.querySelector('#output')

	const svgData = new XMLSerializer().serializeToString(input)
	const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData)))
	const svgDataUrl = `data:image/svg+xml;charset=utf-8;base64,${svgDataBase64}`

	// console.log(svgData)
	// console.log(encodeURIComponent(svgData))
	// console.log(unescape(encodeURIComponent(svgData)))
	// console.log(btoa(unescape(encodeURIComponent(svgData))))

	const image = new Image()

	image.addEventListener('load', () => {
	const width = input.getAttribute('width')
	const height = input.getAttribute('height')
	const canvas = document.createElement('canvas')

	canvas.setAttribute('width', width)
	canvas.setAttribute('height', height)

	const context = canvas.getContext('2d')
	context.drawImage(image, 0, 0, width, height)

	const dataUrl = canvas.toDataURL('image/png')
	output.src = dataUrl
	})

	image.src = svgDataUrl
	}