How come Blogger doesn’t respect closing tags?

I'm trying to figure this out and I can't. Does anyone know why Blogger does this? And can this be fixed at all so blogger doesn't do it? That's basically all I'm asking here stack over flow wants me to add more details.

As an example:

This:

<svg width="260" height="260">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="130" r="85" fill="orange" />
      </clippath>
    </defs>
    <image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
    <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />

    <svg width="260" height="260">
      <defs>
        <lineargradient id="MyGradient">
          <stop offset="0%" stop-color="transparent" />
          <stop offset="33%" stop-color="transparent" />
          <stop offset="33%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="transparent" />
          <stop offset="68%" stop-color="transparent" />
          <stop offset="68%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="transparent" />
          <stop offset="102%" stop-color="transparent" />
        </lineargradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />

    </svg>
  </svg>

Becomes this: Inside Blogger.

   <svg width="260" height="260">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="130" r="85" fill="orange" />
      </circle></clippath>
    </defs>
    <image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
    <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />

    <svg width="260" height="260">
      <defs>
        <lineargradient id="MyGradient">
          <stop offset="0%" stop-color="transparent" />
          <stop offset="33%" stop-color="transparent" />
          <stop offset="33%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="transparent" />
          <stop offset="68%" stop-color="transparent" />
          <stop offset="68%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="transparent" />
          <stop offset="102%" stop-color="transparent" />
        </stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />

    </rect></svg>
  </image></image></svg>

Solution

Try to close all tags with proper formatting, Blogger is rich formatting web so if you don't close any tag, it will do so automatically or fix wrong one. Try this

<svg width="260" height="260">
<defs>
  <clippath id="circleView">
    <circle cx="130" cy="130" r="85" fill="orange"></circle>
  </clippath>
</defs>
<image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)"></image>
<image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>

<svg width="260" height="260">
  <defs>
    <lineargradient id="MyGradient">
      <stop offset="0%" stop-color="transparent"></stop>
      <stop offset="33%" stop-color="transparent"></stop>
      <stop offset="33%" stop-color="#0059dd"></stop>
      <stop offset="34.2%" stop-color="#0059dd"></stop>
      <stop offset="34.2%" stop-color="transparent"></stop>
      <stop offset="68%" stop-color="transparent"></stop>
      <stop offset="68%" stop-color="#0059dd"></stop>
      <stop offset="69.2%" stop-color="#0059dd"></stop>
      <stop offset="69.2%" stop-color="transparent"></stop>
      <stop offset="102%" stop-color="transparent"></stop>
    </lineargradient>
  </defs>

  <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260"></rect>

</svg>