Due to XML headings, SVG files cause invalid HTML on pages where theirs contents get {% include %}d

[strogonoff]

Background

For site appearance to be in line with the design model we’re working with, designers/maintainers would’ve had to provide multiple logo variants for projects & hub. E.g., one variant would be the “main” colored one, one would be for top navigation header where logo is typically all-white on color, perhaps one would be for footer, etc.

Including shapes from SVG files right into HTML, on the other hand, enables logo appearance to be customized via CSS in limited ways (such as changing fills to certain color), while all that’s needed from logo designer is a single SVG file with a logo, dropped in a certain directory.

It also saves a few HTTP(S) requests by inlining some well-compressable additional markup within page contents, although this isn’t an important consideration as static assets would likely be cached anyway.

Thus, embedding SVG using Jekyll/Liquid {% include %} is used sometimes to make symbol appearance changeable via CSS.

Bug

This does not cause browsers to fail rendering the page, but it is likely invalid markup anyway.

I believe the <?xml…> heading is highlighted in red because browsers do not anticipate that as part of HTML document body.

Could be resolved with a simple SVGs pre-processing step at Jekyll build stage.