tatsuyasusukida/!README-javascript-svg-png.md

## !README-javascript-svg-png.md

      
    Raw
  

              !README-javascript-svg-png.md
            
          
    🌅 How to convert SVG to PNG with JavaScript [video version available]

About this article

This article describes how to convert SVG to PNG with frontend JavaScript. The related resources are as follows.

Source code
Demo
日本語版 / Japanese version
Video version

Workflow

The workflow is as follows.

Preparation for coding
Coding
Operation check

Preparation for coding

Run the following command in the terminal to prepare for coding.
mkdir javascript-svg-png
cd javascript-svg-png
touch index.html main.js
Coding

index.html

Open index.html in the editor and enter the following content.
Click to go to index.html
main.js

Open main.js in the editor and enter the following content.
Click to go to main.js
Operation check

Open index.html in your browser. For macOS, it is convenient to run the following command in the terminal.
open index.html
Make sure you see the PNG image in the Output PNG Image section of your web page.

Conclusion

The sample source code contains the following sentence to convert SVG text to base64.
const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData)))
I was curious about how it would be converted to base64 through the process, so I looked it up. The following is the SVG text before conversion.
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" id="input">
  <circle cx="120" cy="120" r="90" fill="#888888"/>
</svg>

Next, the following is the execution result of encodeURIComponent(svgData).
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20id%3D%22input%22%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2290%22%20fill%3D%22%23888888%22%2F%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E

Next, the following is the execution result of unescape(encodeURIComponent(svgData)).
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" id="input">
  <circle cx="120" cy="120" r="90" fill="#888888"/>
</svg>

Finally, the following is the execution result of btoa(unescape(encodeURIComponent(svgData))).
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiBpZD0iaW5wdXQiPgogICAgICAgIDxjaXJjbGUgY3g9IjEyMCIgY3k9IjEyMCIgcj0iOTAiIGZpbGw9IiM4ODg4ODgiLz4KICAgICAgPC9zdmc+

btoa is a function that converts a string to Base64, but you cannot pass a string containing non-ASCII characters as an argument. Therefore, I use the encodeURIComponent function and the unescape function to convert non-ASCII characters to ASCII characters. For example, the Japanese hiragana "あ" is 0xE3 0x81 0x82 in UTF-8, so the result of encodeURIComponent ('あ') is %E3%81%82 (By the way, in the case of encode ('あ') Will raise a SyntaxError exception). On the other hand, the unescape function recognizes %E3 %81 %82 as 3 characters, so the result of unescape('%E3%81%82') is'ã\x81\x82'.
I understand that the JavaScript btoa(unescape(encodeURIComponent(text))) is similar to the Buffer.from(text).toString('base64') in Node.js. So is it possible to convert from base64 to text with decodeURIComponent(escape(atob(base64))) (same asBuffer.from(base64,'base64'). toString() in Node.js? Is it something like that?). When I executed the code below, it was evaluated as "A", so it seems to be correct.
decodeURIComponent(escape(atob(btoa(unescape(encodeURIComponent('あ'))))))
I didn't always understand the reason and just copied and pasted it, so I got smarter because I had time to investigate. I hope this article helps anyone with similar questions. Thank you for reading!

  
## img-check-01.png

      
    Raw
  

              img-check-01.png
            
          
## 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>

## 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
	}