viewport-fill SVG attribute support

By default, a SVG canvas has a transparent background which is what you would expect. But how can you force a different color?

I asked this question almost 3 years ago and unfortunatelly it's still unresolved.

Paint it black

My use case is pretty simple. I maintain a website dedicated to SVG icons in which the legacy branding style implies to display white paths on black backgrounds. In this HTML context, I could use CSS to style the background of the embedded SVG. But then people downloading the icons would face a simili blank page : many web browser use a white background page by default, therefore a SVG file containing only white paths would seems empty.

Red is dead

For now, I decided to use a dummy 512x512 black rectangle at the bottom of element stack which cover the full viewport and this trick does the job.

In his SO answer, Robert Longson introduced a new attribute called viewport-fill which fullfil this exact purpose.

Here's the demo code extracted from the SVGTiny spec :

Unfortuntately, as the time of writing this article (2015), this technic does not work in Firefox and Chrome yet.

As soon as the above square will appear in red, it will indicate that the support for viewport-fill has finally been added to your browser.