How come Blogger doesn't respect closing tags?

asasass · November 1, 2017, 6:54pm

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:

<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>

asasass · November 1, 2017, 7:18pm

I was just told:

Because it is parsed as XML.
And XML can’t have self closing tags.

Better option is to manually close all the tags traditionally.

asasass · November 1, 2017, 7:32pm

My question is, how do you close the tags manually, what would that look like?

I tried that here, but I don’t think I did it correctly.

<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>
            <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>
    </image>
  </image>
</svg>

asasass · November 1, 2017, 7:41pm

I fixed it here:

<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>
</svg>

asasass · November 1, 2017, 7:57pm

How would I apply it manually here?

This doesn’t work.

<audio controls> 
<source src="http://hi5.1980s.fm/ ;" type="audio/mpeg"> </source> 
</audio>

Mittineague · November 1, 2017, 8:40pm

Whoever said that is mistaken

https://www.w3.org/standards/xml/core

All elements must be closed or marked as empty.

Empty elements can be closed as normal, <happiness></happiness>
or you can use a special short-form, <happiness /> instead.

asasass · November 1, 2017, 8:45pm

How would you fix this then?

What should I try?

asasass · November 1, 2017, 9:05pm

I was told to just leave it like this. Nothing that can be done about it.

Mittineague · November 1, 2017, 9:08pm

The first thing I would do is attempt to get it as valid and as well formed as I could. eg.

<!DOCTYPE html><head><title>need this</title></head><body>
<b> This:</b> 
<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>
<b>  Becomes this:</b>
   <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>
  </body></html>

then I’d go to https://validator.w3.org/#validate_by_input paste it in, set the option to html5, and Check it.

Then I’d work my way through the errors and warnings until the HTML passed validation to my satisfaction -which may be letting a warning (or more) go as long as I understood the what and why of it.

system · February 1, 2018, 4:09am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Help Preventing Blogger from applying its styles to the scrollbar HTML & CSS	17	1816	April 5, 2018
How much of this code can be put into </style> tags? HTML & CSS	13	1234	February 3, 2018
SVG <title></title> tag tooltips don't work in blogger HTML & CSS	20	2480	March 22, 2018
Converting SVG into HTML HTML & CSS	1	1154	February 1, 2018
Adding Social Bookmarking/ Social Networking Links into Blogger Template HTML & CSS	10	1096	February 18, 2010

How come Blogger doesn't respect closing tags?

Related topics