[DRY] Use SVG to embed the header and footer

[waldyrious]

This is the 4th (!!) attempt to fully implement the DRY principle by having the common elements (header and footer) defined in a single file and embedded in all other pages. The three previous attempts were html imports (#4), seamless iframes (#11), and intrinsic sizing (#32).

The first two are apparently out of the question, since in both cases, the spec authors seem adamant about not supporting the "seamless embedding of HTML content" use case. As of September 2017, the third one (specifically the height property) is still not widely supported, so I can't really use it yet.

However, it just occurred to me that I can can include HTML within an SVG file, and then embed the SVG within the host HTML page. If this works, it would not only be a working solution, but also give access to the rich sizing options SVG provides, with the viewBox and preserveAspectRatio attributes in addition to height and width. Could this finally be the solution??

Below are some links that will likely be useful for the implementation:

• How to Scale SVG | CSS-Tricks
• Making SVGs Responsive with CSS
• HTML element inside a SVG - bl.ocks.org
• HTML in SVG in HTML - Stack Overflow

[waldyrious]

Did a bunch of research and experiments on this -- here are some conclusions (but in a nutshell, I'm not very optimistic):

• Directly including SVG content (not embedding from an external file) in HTML5 is indeed well-supported.
• The SVG viewport (like the browser viewport) is not affected by its contents; the only advantage it offers is the ability to choose more richly (than with HTML elements) how to make the contents fit the viewport (i.e. the opposite of what we want), by playing with the viewBox and preserveAspectRatio attributes. Essentially, there's no way to make the SVG automatically resize to fit its contents.
• It is even possible to implement sort of a layout "engine" within the SVG by using multiple elements with independent viewBoxes inside.
• Another option is to use media queries in a stylesheet inside the SVG -- again, keeping in mind that the viewport we're working with is the SVG document's, not the browser's. This option and the one above may be worth exploring further; I haven't experimented much with it.
• Alternatively, we can use JavaScript to resize the element to match its bounding box, using the SVG element's getBBox() function or using the scrollWidth of the html container block within the svg. But this is a hack that defeats the principle of graceful degradation and declarative (script-less) content embedding.
• Embedding an SVG file using <iframe>, <object> or <embed> (to implement the DRY principle) makes the JS approach impossible, anyway -- or perhaps that's only an issue if using local files? I'd need to test further, but as with the previous point, using JavaScript would be just a workaround rather than a real implementation of the declarative embedding concept, so I'm not sure it's worth the effort.
• It may be possible to use <svg> (rather than <iframe>, etc.) as a container, and include the DRY content from another SVG file as an image tag (in this case it looks like any stylesheet would have to be applied from within the SVG). The idea here is that the inline <svg> would resize to its contents, while iframe et al won't. But I'm not so sure that's the case...
• If SVG is to be used, <embed> and <object> work better than <iframe> since there's no frame by default when unstyled, making the content blend in better within the parent document.
  The code I tested looked like this:
  <embed type="image/svg+xml" src="header.svg" class="header" width="100%" height="50px"/>

[waldyrious]

Some example code from this page (old content from MDN; found here) that may come handy:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <em>I</em> like <span style="color:gold;">cheese</span>.
    </div>
  </foreignObject>
</svg>

(Not sure if the xmlns attribute in the <div> is needed.)