<use> tag doesn't work in playground

[listopadiya]

Describe the bug
DOMPurify is used to sanitize all input text in playground, and by default it filters <use> elements out, so in both SVG and PDF outputs they are not visible. Also it leads to <use> elements not preserved in playground url.

One possible solution will be to use workaround provided by DOMPurify developers here, it will allow to safely use internal references. It can be placed here:

svg2pdf.js/playground/index.js

Line 28 in 929a2ba

const svgText = DOMPurify.sanitize(doc.getValue())

To Reproduce
Check this code in playground:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100" viewBox="0 0 200 100">
  <title>Style inheritance and the use element</title>
  <style type="text/css">
    use { fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40" />
  </g>
  <use xlink:href="#c" x="100" />
</svg>

Screenshot
Note: I changed height of input and output boxes in chrome devtools, so that it takes less space in screenshot.

Expected behavior
Example from above should result in two circles output (blue and orange), like in this codepen.

Desktop (please complete the following information):

• OS: Windows 10 Pro 10.0.18363 Build 18363
• Browser: Chrome 85.0.4183.121

[HackbrettXXX]

Thanks for the issue report. Could you prepare a PR with the workaround you suggest?

[listopadiya]

Sure, you can assign it to me! I was thinking that this issue in a way blocks comprehensive playground testing for #152 , so it would be nice to have it fixed first, and I can try it.