JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select id="getItems"></select>

<div class="vector">
  <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
  <!-- Generator: Gravit.io -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1080 1080">
    <defs>
      <clipPath id="_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M">
        <rect width="1080" height="1080"></rect>
      </clipPath>
    </defs>
    <g clip-path="url(#_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M)">
      <rect x="0" y="0" width="1080" height="1080" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,233,75)"></rect>
      <g>
        <ellipse cx="-230.50000000000034" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
        <g>
          <circle cx="-230.5000000000004" cy="772.0000000000001" r="257.99999999999994" fill="rgb(51,48,94)"></circle>
          <path d="M -361.2 470.15 L -101.8 470.15 C -91.424 470.15 -83 478.574 -83 488.95 L -83 488.95 C -83 499.326 -91.424 507.75 -101.8 507.75 L -361.2 507.75 C -371.576 507.75 -380 499.326 -380 488.95 L -380 488.95 C -380 478.574 -371.576 470.15 -361.2 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
          <path d="M -231.5 312 L -231.5 312 C -162.787 312 -107 367.787 -107 436.5 L -107 570.5 C -107 639.213 -162.787 695 -231.5 695 L -231.5 695 C -300.213 695 -356 639.213 -356 570.5 L -356 436.5 C -356 367.787 -300.213 312 -231.5 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
          <path d=" M -233.068 335 L -229.932 335 C -170.049 335 -121.432 383.617 -121.432 443.5 L -121.432 522 C -192.811 575.333 -266.179 575.343 -341.568 522 L -341.568 443.5 C -341.568 383.617 -292.951 335 -233.068 335 Z " fill="rgb(246,168,117)"></path>
          <ellipse cx="-229.49999999999994" cy="556.9999999999999" rx="55.50000000000006" ry="33"...

JavaScript

$(".vector svg").each(function() {
  $.each(this.children, function(i) {
    $("#getItems").append("<option>svg > "+ this.tagName +"</option>");
    $("#getItems").append("<option>svg > "+ this.tagName + ":nth-child("+ i +")" +"</option>");
    var str = this.tagName;
    $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName +"</option>");

    // has children
    if (this.children) {
      $.each(this.children, function(i) {
        $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName + ":nth-child("+ i +")" +"</option>");
      });
      var str = this.tagName;
      $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName +"</option>");
      
      // are there more children?
      if (this.children) {
        $.each(this.children, function(i) {
          $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName + ":nth-child("+ i +")" +"</option>");
        });
      }
    }
  });
});