How to get svg from object?

Question

JavaScript

Hello, I'm doing a simple coloring for the site, I decided to choose svg, but I got up at the very start, because I can't access the DOM svg's, I don't fully understand what the problem is.

SVG box

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
  .st1{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="258.5" cy="232.3" r="156"/>
<circle class="st0" cx="202.8" cy="191.3" r="51.9"/>
<circle class="st0" cx="203.6" cy="211.4" r="31.9"/>
<path class="st0" d="M192.7,314.2c0,0,81.3,47.2,154.8,0C347.5,314.2,289.5,342.9,192.7,314.2z"/>
<circle class="st1" cx="226.6" cy="188.4" r="8.9"/>
<circle class="st1" cx="235" cy="203.5" r="6.7"/>
<circle class="st0" cx="331.3" cy="191.3" r="51.9"/>
<circle class="st0" cx="332.1" cy="211.4" r="31.9"/>
<circle class="st1" cx="355.1" cy="188.4" r="8.9"/>
<circle class="st1" cx="363.5" cy="203.5" r="6.7"/>
</svg>

Tell me how best to implement? I stopped at the moment with getting the svg itself

<object
 	id="holst"
  	type="image/svg+xml"
  	data="picture.svg">
</object>

let html_get = document.querySelector("#holst");
let picture = html_get.contentDocument;
console.log(picture);

But in the end I get this:

Answer 1

const objectEl = document.querySelector("#holst");
const svgEl = objectEl.getSVGDocument().rootElement;