SVG イメージ化

by Naoyuki Miyazaki

HTML

<svg id="svg01" width="500" height="100">
  <defs>
    <style type="text/css">@import url(https://fonts.googleapis.com/earlyaccess/nikukyu.css);</style>
  </defs>
  <text x="0" y="35" font-family="Nikukyu" font-size="35">
  Hello こんにちは 日本語
  </text>
</svg>
<button id="btn01">download</button>

<svg id="svg02"width="500" height="100">
  <text x="0" y="35" font-family="Impact" font-size="35">
  Hello こんにちは 日本語
  </text>
</svg>
<button id="btn02">download</button>

Babel + JSX

const btn01 = document.getElementById('btn01')
const svg01 = document.getElementById('svg01')

btn01.addEventListener('click', () => {
	const svgData = new XMLSerializer().serializeToString(svg01)

	const canvas = document.createElement('canvas')
  canvas.width = svg01.width.baseVal.value
  canvas.height = svg01.height.baseVal.value
	const ctx = canvas.getContext('2d')
  
	const img = new Image()
  img.onload = () => {
		ctx.drawImage(img, 0, 0, img.width, img.height);
    const a = document.createElement("a");
    a.href = canvas.toDataURL("image/png");
    a.download = 'svg.png'
    a.click()
  }
  img.src = `data:image/svg+xml;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(svgData)))}` 
})

const btn02 = document.getElementById('btn02')
const svg02 = document.getElementById('svg02')

btn02.addEventListener('click', () => {
	const svgData = new XMLSerializer().serializeToString(svg02)

	const canvas = document.createElement('canvas')
  canvas.width = svg02.width.baseVal.value
  canvas.height = svg02.height.baseVal.value
	const ctx = canvas.getContext('2d')
  
	const img = new Image()
  img.onload = () => {
		ctx.drawImage(img, 0, 0, img.width, img.height);
    const a = document.createElement("a");
    a.href = canvas.toDataURL("image/png");
    a.download = 'svg.png'
    a.click()
  }
  img.src = `data:image/svg+xml;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(svgData)))}` 
})