Why do SVG files not display properly on Q2A site?

Question

I have some SVG codes to display avatars like Google/Youtube.

An example:

<svg version="1.1"
     baseProfile="full"
     width="40" height="40"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="40" height="40" fill="blue" />

  <circle cx="20" cy="20" r="18" fill="silver" />

  <text x="20" y="25" font-size="18" text-anchor="middle" fill="crimson">S</text>

</svg>

The code works everywhere else in the world, you can test!

But when I paste this into Q2A theme, for example:

$this->output('<svg version="1.1"
     baseProfile="full"
     width="40" height="40"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="40" height="40" fill="blue" />

  <circle cx="20" cy="20" r="18" fill="silver" />

  <text x="20" y="25" font-size="18" text-anchor="middle" fill="crimson">S</text>

</svg>');

The only thing I get is a blue square! Any possible reason?

Answer 1

It's because you used self-closing tags. Q2A removes the /> part for self-closing tags like images (to handle indenting the HTML output). But in your case the browser is picking those up as nested tags (the circle is inside the rect) so it messes up.

There are two solutions, the first and easiest is to use the output_raw function instead:

$this->output_raw('<svg version="1.1"
     baseProfile="full"
     width="40" height="40"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="40" height="40" fill="blue" />
  <circle cx="20" cy="20" r="18" fill="silver" />
  <text x="20" y="25" font-size="18" text-anchor="middle" fill="crimson">S</text>
</svg>');

Now the exact HTML you put in will be output the same.

The section option is don't use self-closing tags, add </rect> and so on. You can also pass each part as a separate string in the output function and the indentation will work:

$this->output(
	'<svg version="1.1" baseProfile="full" width="40" height="40" xmlns="http://www.w3.org/2000/svg">',
	'<rect width="40" height="40" fill="blue"></rect>',
	'<circle cx="20" cy="20" r="18" fill="silver"></circle>',
	'<text x="20" y="25" font-size="18" text-anchor="middle" fill="crimson">S</text>',
	'</svg>'
);

Hope that helps!

Comments

Quick question: is there a hidden feature that beautify or rearrange codes?

---

If the “minify HTML” option is off, it will “beautify” the HTML by indenting it correctly - as long as it goes through the output function.

Answer 2

If your code is short and simple, it's best to use the standard plain-vanilla ECHO PHP function.

After studying more about output and output_raw function (found in qa-theme-base.php), they are not simple as their names suggest.

output function is not an independent function, it requires another function called output_array. This output_array function removes /> at the end of HTML tags if any, then check if you choose Minify HTML options or not, and then does some string manipulation tasks.

Even output_raw also does string manipulation.

So, again if your code is simple and neat, better avoid those build-in functions, they just make CPU busier with those extra steps.

If your code is lengthy and non-standard, it is advisable to use them. There are also several online tools to minify codes, so if you use them, you can use the basic echo function for brevity.

Comments

By the way, Q2A doesn't not actually minify like those tools. It only creates indentation, I doubt it can really quicken CPU process or make it worse.

---

The minify option in Q2A removes the indentation. It actually does make a performance increase because the indentation calls extra functions and adds overhead.

And if all your HTML goes through the output function line by line then it is equivalent to full minification by other tools (all whitespace is reduced to just one \n character)