If there are multiple svg elements on the page that overlap each other, in what order are they rendered?

Question

css

Actually the whole question is in the title. There is a structure
Logo blocks have positioning - fixed at the top z-index 100 at the bottom - 400
Pictures svg are the same but differ in color. Now for some reason the first svg is on top. Interestingly, the div has the correct order at the top, the one with the z-index is higher, but this order does not apply to svg

<div class= "wrapper">
  <div class= "logo">
    <svg></svg>
  </div>
  <div class= "inner">
    <div class= "logo">
     <svg></svg>
    </div>
  </div>
</div>