Unable to load SVG from Remote location using <object> element

[jvcodehub]

Hi, I am trying to load an SVG file from remote URL location in Object element in my HTML application, below is the code snippet.

But when run application I am getting an error like Cannot read property 'documentElement' of null at Object.getSvg (svg-pan-zoom.js:2042) at svgPanZoom (svg-pan-zoom.js:1533) at HTMLScriptElement.script.onload (index.html:280) in console.

svg-pan-zoom version: svg-pan-zoom v3.6.1 from https://github.com/ariutta/svg-pan-zoom Browser(s): Google chrome Operating system(s): Windows

Is there anyway that I can resolve this issue.?

[afparsons]

I face the same error.

✓In console, getting the SVG object by ID returns the full SVG object (as expected).

document.getElementById('my-element')

✗However, once fed into svgPanZoom, the same error as originally reported is thrown:

svgPanZoom(document.getElementById('my-element'));

---

• svg-pan-zoom v3.6.1
• Chromium 87.0.4280.66 on Ubuntu 18.04
• Django 2.2

---

EDIT: I should add that I've followed CSS-Tricks' guide, Probably Don't Base64 SVG.

An excerpt from my Python looks like this:

with open(_output_filepath, 'r') as file_svg:
    svg: str = file_svg.read()
    svg: str = svg[svg.find('<svg'):]
    svg: str = urllib.parse.quote(svg)

And it is being received in a Django template like this:

<object id="my-element" class="fitvidsignore" type="image/svg+xml" data="data:image/svg+xml;utf8,{{ svg }}"></object>

Does this library require the SVG to be formatted or encoded a certain way? Forgive me, I don't work with JavaScript and XML too often.

[afparsons]

It seems that the problem might be related to inline vs. object? I don't understand, though. See: https://github.com/ariutta/svg-pan-zoom/issues/326

Edit: I've been able to manually call svgPanZoom from console using inline and static files (but I want to pass data URIs).

[fbo3264]

Any update on this? I'm facing the same issue...