Simplest way to fill 'empty' parts of a font, using CSS or SVG

Question

Note: This is a question about vector techniques

I originally failed to make that clear enough. (I included "using CSS and SVG" in the title but hardly mentioned it again.)

Also: I am a long-time graphics programmer, making SVGs and Javascript as it happens. I am primarily a mathematician; offsetting paths and intersecting awesomely complex things is an amusement to me. I suppose mentioning that earlier might have been useful; we live and we learn...

---

Here is a good example of what I mean by the 'empty' parts of a font:

The pieces are Unicode characters -- so that they can be copied from the SVG to a text editor -- and as you can see, the square colours interfere with their appearance. Altering the 'fill' is definitely wrong; whole characters change colour, and still leave those same empty windows onto the square colours below.

They would of course look better if I could achieve the effect of backing each one with a plain white silhouette of the character. If only I had the outermost outline of each, as a closed path, that would become easy. (But is this possible? Is there even such a path? Surely it wouldn't be closed; can it be closed? Easily?)

Of course, I could define my own graphics for the chess pieces, but that would defeat the advantages of using Unicode characters, since it would require extra work by me and a larger file size for the user. I don't want to repeat the efforts of others, to design nice glyphs, and my eventual applications might involve many imported fonts etc.

So it would be really nice to find a robust solution that gets both the character, and an appropriate backing for that character, from the font.

This is not just for chess, although of course it makes a great example.

Thanks in advance,

Tom

UPDATE

Here is a fudge, suitable for Chess only, which almost works. It relies on the fact that in most fonts with chess pieces, the interiors of the black and white pieces are almost complements of each other.

<?xml version="1.0" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="440" height="440" style="font-size: 34px;"><defs><style type="text/css">.large{fill:#700;}.small{fill:#eee;}</style></defs><rect x="0" y="0" width="440" height="440" fill="white"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="60" y="0" width="20" height="20" class="small"/><rect x="60" y="40" width="20" height="20" class="small"/><rect x="80" y="20" width="20" height="20" class="small"/><rect x="100" y="0" width="20" height="20" class="small"/><rect x="100" y="40" width="20" height="20" class="small"/><rect x="120" y="20" width="20" height="20" class="small"/><rect x="140" y="0" width="20" height="20" class="small"/><rect x="140" y="40" width="20" height="20" class="small"/><rect x="160" y="20" width="20" height="20" class="small"/><rect x="180" y="0" width="20" height="20" class="small"/><rect x="180" y="40" width="20" height="20" class="small"/><rect x="200" y="20" width="20" height="20" class="small"/><rect x="220" y="0" width="20" height="20" class="small"/><rect x="220" y="40" width="20" height="20" class="small"/><rect x="240" y="20" width="20" height="20" class="small"/><rect x="260" y="0" width="20" height="20" class="small"/><rect x="260" y="40" width="20" height="20" class="small"/><rect x="280" y="20" width="20" height="20" class="small"/><rect x="300" y="0" width="20" height="20" class="small"/><rect x="300" y="40" width="20" height="20" class="small"/><rect x="320" y="20" width="20" height="20" class="small"/><rect x="340" y="0" width="20" height="20" class="small"/><rect x="340" y="40" width="20" height="20" class="small"/><rect x="360" y="20" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="0" y="60" width="20" height="20" class="small"/><rect x="0" y="100" width="20" height="20" class="small"/><rect x="0" y="140" width="20" height="20" class="small"/><rect x="0" y="180" width="20" height="20" class="small"/><rect x="0" y="220" width="20" height="20" class="small"/><rect x="0" y="260" width="20" height="20" class="small"/><rect x="0" y="300" width="20" height="20" class="small"/><rect x="0" y="340" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="20" y="80" width="20" height="20" class="small"/><rect x="20" y="120" width="20" height="20" class="small"/><rect x="20" y="160" width="20" height="20" class="small"/><rect x="20" y="200" width="20" height="20" class="small"/><rect x="20" y="240" width="20" height="20" class="small"/><rect x="20" y="280" width="20" height="20" class="small"/><rect x="20" y="320" width="20" height="20" class="small"/><rect x="20" y="360" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="40" y="60" width="20" height="20" class="small"/><rect x="40" y="100" width="20" height="20" class="small"/><rect x="40" y="140" width="20" height="20" class="small"/><rect x="40" y="180" width="20" height="20" class="small"/><rect x="40" y="220" width="20" height="20" class="small"/><rect x="40" y="260" width="20" height="20" class="small"/><rect x="40" y="300" width="20" height="20" class="small"/><rect x="40" y="340" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="380" y="80" width="20" height="20" class="small"/><rect x="380" y="120" width="20" height="20" class="small"/><rect x="380" y="160" width="20" height="20" class="small"/><rect x="380" y="200" width="20" height="20" class="small"/><rect x="380" y="240" width="20" height="20" class="small"/><rect x="380" y="280" width="20" height="20" class="small"/><rect x="380" y="320" width="20" height="20" class="small"/><rect x="380" y="360" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="400" y="60" width="20" height="20" class="small"/><rect x="400" y="100" width="20" height="20" class="small"/><rect x="400" y="140" width="20" height="20" class="small"/><rect x="400" y="180" width="20" height="20" class="small"/><rect x="400" y="220" width="20" height="20" class="small"/><rect x="400" y="260" width="20" height="20" class="small"/><rect x="400" y="300" width="20" height="20" class="small"/><rect x="400" y="340" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="420" y="80" width="20" height="20" class="small"/><rect x="420" y="120" width="20" height="20" class="small"/><rect x="420" y="160" width="20" height="20" class="small"/><rect x="420" y="200" width="20" height="20" class="small"/><rect x="420" y="240" width="20" height="20" class="small"/><rect x="420" y="280" width="20" height="20" class="small"/><rect x="420" y="320" width="20" height="20" class="small"/><rect x="420" y="360" width="20" height="20" class="small"/><rect x="0" y="380" width="20" height="20" class="small"/><rect x="0" y="420" width="20" height="20" class="small"/><rect x="20" y="400" width="20" height="20" class="small"/><rect x="40" y="380" width="20" height="20" class="small"/><rect x="40" y="420" width="20" height="20" class="small"/><rect x="60" y="400" width="20" height="20" class="small"/><rect x="80" y="380" width="20" height="20" class="small"/><rect x="80" y="420" width="20" height="20" class="small"/><rect x="100" y="400" width="20" height="20" class="small"/><rect x="120" y="380" width="20" height="20" class="small"/><rect x="120" y="420" width="20" height="20" class="small"/><rect x="140" y="400" width="20" height="20" class="small"/><rect x="160" y="380" width="20" height="20" class="small"/><rect x="160" y="420" width="20" height="20" class="small"/><rect x="180" y="400" width="20" height="20" class="small"/><rect x="200" y="380" width="20" height="20" class="small"/><rect x="200" y="420" width="20" height="20" class="small"/><rect x="220" y="400" width="20" height="20" class="small"/><rect x="240" y="380" width="20" height="20" class="small"/><rect x="240" y="420" width="20" height="20" class="small"/><rect x="260" y="400" width="20" height="20" class="small"/><rect x="280" y="380" width="20" height="20" class="small"/><rect x="280" y="420" width="20" height="20" class="small"/><rect x="300" y="400" width="20" height="20" class="small"/><rect x="320" y="380" width="20" height="20" class="small"/><rect x="320" y="420" width="20" height="20" class="small"/><rect x="340" y="400" width="20" height="20" class="small"/><rect x="360" y="380" width="20" height="20" class="small"/><rect x="360" y="420" width="20" height="20" class="small"/><rect x="380" y="400" width="20" height="20" class="small"/><rect x="400" y="380" width="20" height="20" class="small"/><rect x="400" y="420" width="20" height="20" class="small"/><rect x="420" y="400" width="20" height="20" class="small"/><rect x="60" y="100" width="40" height="40" class="large"/><rect x="60" y="180" width="40" height="40" class="large"/><rect x="60" y="260" width="40" height="40" class="large"/><rect x="60" y="340" width="40" height="40" class="large"/><rect x="100" y="60" width="40" height="40" class="large"/><rect x="100" y="140" width="40" height="40" class="large"/><rect x="100" y="220" width="40" height="40" class="large"/><rect x="100" y="300" width="40" height="40" class="large"/><rect x="140" y="100" width="40" height="40" class="large"/><rect x="140" y="180" width="40" height="40" class="large"/><rect x="140" y="260" width="40" height="40" class="large"/><rect x="140" y="340" width="40" height="40" class="large"/><rect x="180" y="60" width="40" height="40" class="large"/><rect x="180" y="140" width="40" height="40" class="large"/><rect x="180" y="220" width="40" height="40" class="large"/><rect x="180" y="300" width="40" height="40" class="large"/><rect x="220" y="100" width="40" height="40" class="large"/><rect x="220" y="180" width="40" height="40" class="large"/><rect x="220" y="260" width="40" height="40" class="large"/><rect x="220" y="340" width="40" height="40" class="large"/><rect x="260" y="60" width="40" height="40" class="large"/><rect x="260" y="140" width="40" height="40" class="large"/><rect x="260" y="220" width="40" height="40" class="large"/><rect x="260" y="300" width="40" height="40" class="large"/><rect x="300" y="100" width="40" height="40" class="large"/><rect x="300" y="180" width="40" height="40" class="large"/><rect x="300" y="260" width="40" height="40" class="large"/><rect x="300" y="340" width="40" height="40" class="large"/><rect x="340" y="60" width="40" height="40" class="large"/><rect x="340" y="140" width="40" height="40" class="large"/><rect x="340" y="220" width="40" height="40" class="large"/><rect x="340" y="300" width="40" height="40" class="large"/><rect x="60" y="60" width="320" height="320" style="fill:none; stroke-width:1; stroke:#000;"/><text x="240" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♔</text><text x="200" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♕</text><text x="80" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="360" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="160" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="280" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="320" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="120" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="80" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="120" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="160" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="200" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="280" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="320" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="360" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♚</text><text x="200" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♛</text><text x="80" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="360" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="160" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="280" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="320" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="120" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="80" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="120" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="160" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="200" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="280" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="320" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="360" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="374" text-anchor="middle" fill="black">♔</text><text x="200" y="374" text-anchor="middle" fill="black">♕</text><text x="80" y="374" text-anchor="middle" fill="black">♖</text><text x="360" y="374" text-anchor="middle" fill="black">♖</text><text x="160" y="374" text-anchor="middle" fill="black">♗</text><text x="280" y="374" text-anchor="middle" fill="black">♗</text><text x="320" y="374" text-anchor="middle" fill="black">♘</text><text x="120" y="374" text-anchor="middle" fill="black">♘</text><text x="80" y="334" text-anchor="middle" fill="black">♙</text><text x="120" y="334" text-anchor="middle" fill="black">♙</text><text x="160" y="334" text-anchor="middle" fill="black">♙</text><text x="200" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="334" text-anchor="middle" fill="black">♙</text><text x="280" y="334" text-anchor="middle" fill="black">♙</text><text x="320" y="334" text-anchor="middle" fill="black">♙</text><text x="360" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="94" text-anchor="middle" fill="black">♚</text><text x="200" y="94" text-anchor="middle" fill="black">♛</text><text x="80" y="94" text-anchor="middle" fill="black">♜</text><text x="360" y="94" text-anchor="middle" fill="black">♜</text><text x="160" y="94" text-anchor="middle" fill="black">♝</text><text x="280" y="94" text-anchor="middle" fill="black">♝</text><text x="320" y="94" text-anchor="middle" fill="black">♞</text><text x="120" y="94" text-anchor="middle" fill="black">♞</text><text x="80" y="134" text-anchor="middle" fill="black">♟</text><text x="120" y="134" text-anchor="middle" fill="black">♟</text><text x="160" y="134" text-anchor="middle" fill="black">♟</text><text x="200" y="134" text-anchor="middle" fill="black">♟</text><text x="240" y="134" text-anchor="middle" fill="black">♟</text><text x="280" y="134" text-anchor="middle" fill="black">♟</text><text x="320" y="134" text-anchor="middle" fill="black">♟</text><text x="360" y="134" text-anchor="middle" fill="black">♟</text></svg>

Almost, that is, but not quite. I for one can still see red, through these pieces, and they only look perfect when seen on black squares.

Answer 1

Doing what you want is very hard/tricky. Perhaps you can consider a simpler approach? How about just outlining all the pieces with white so that they stand out from the background?

div {
  font-family: sans-serif;
  font-size: 80px;
  line-height: 80px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  width: 80px;
  height: 80px;
  position: relative;
}

div:before
{
  content: attr(title);
  position: absolute;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: -1;
  text-shadow:
     0px -1px 0 white,
     1px -1px 0 white,
     1px  0px 0 white,
     1px  1px 0 white,
     0px  1px 0 white,
    -1px  1px 0 white,
    -1px  0px 0 white,
    -1px -1px 0 white;
}

div:nth-child(2):before
{
  background-color: #700;
}

<div title="K">K</div><div title="Q">Q</div>

Answer 2

In Progress...

Please expect evolution here, especially where diagrams and code can improve the answer. The work takes time.

Hopefully it will only involve one more edit, when the solution is complete.

----------

There are several near solutions. My implementation will degrade gracefully, so I'm using more than one, but I'll try to keep the components separate here, in order to help others more; some people may only want one part.

Solution 1 (for me only a stop-gap)

Compromise on vector-only solution, with a raster of just the back

I don't want to rely on this but it is a great stop-gap that looks perfect.

It isn't a final answer because it's hard to predict all the consequences of rasterisation for different display devices. I hate early rasters. I can try a screen, and a laser cutter. Without giving too much irrelevant detail about my applications, vectors almost always feel more correct for the things I find myself doing.

One of the things a friend is learning is the use of a laser cutter for instance, and I am tying it into my work. I have yet to investigate how it rasterises.

< EDITME For an illustration of roughly what this looks like but entirely with the vector graphics that closer to my first language. I will reuse the one I posted earlier. It isn't perfect; you'll still see red because I've not backed them with fully white silhouettes; I've backed white pieces (in black) with black pieces (in white) and I've backed black pieces (top layer in black again) with white pieces (bottom layer in white again). These are almost complements -- but not quite -- in most browsers, depending on your font.

<?xml version="1.0" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="440" height="440" style="font-size: 34px;"><defs><style type="text/css">.large{fill:#700;}.small{fill:#eee;}</style></defs><rect x="0" y="0" width="440" height="440" fill="white"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="60" y="0" width="20" height="20" class="small"/><rect x="60" y="40" width="20" height="20" class="small"/><rect x="80" y="20" width="20" height="20" class="small"/><rect x="100" y="0" width="20" height="20" class="small"/><rect x="100" y="40" width="20" height="20" class="small"/><rect x="120" y="20" width="20" height="20" class="small"/><rect x="140" y="0" width="20" height="20" class="small"/><rect x="140" y="40" width="20" height="20" class="small"/><rect x="160" y="20" width="20" height="20" class="small"/><rect x="180" y="0" width="20" height="20" class="small"/><rect x="180" y="40" width="20" height="20" class="small"/><rect x="200" y="20" width="20" height="20" class="small"/><rect x="220" y="0" width="20" height="20" class="small"/><rect x="220" y="40" width="20" height="20" class="small"/><rect x="240" y="20" width="20" height="20" class="small"/><rect x="260" y="0" width="20" height="20" class="small"/><rect x="260" y="40" width="20" height="20" class="small"/><rect x="280" y="20" width="20" height="20" class="small"/><rect x="300" y="0" width="20" height="20" class="small"/><rect x="300" y="40" width="20" height="20" class="small"/><rect x="320" y="20" width="20" height="20" class="small"/><rect x="340" y="0" width="20" height="20" class="small"/><rect x="340" y="40" width="20" height="20" class="small"/><rect x="360" y="20" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="0" y="60" width="20" height="20" class="small"/><rect x="0" y="100" width="20" height="20" class="small"/><rect x="0" y="140" width="20" height="20" class="small"/><rect x="0" y="180" width="20" height="20" class="small"/><rect x="0" y="220" width="20" height="20" class="small"/><rect x="0" y="260" width="20" height="20" class="small"/><rect x="0" y="300" width="20" height="20" class="small"/><rect x="0" y="340" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="20" y="80" width="20" height="20" class="small"/><rect x="20" y="120" width="20" height="20" class="small"/><rect x="20" y="160" width="20" height="20" class="small"/><rect x="20" y="200" width="20" height="20" class="small"/><rect x="20" y="240" width="20" height="20" class="small"/><rect x="20" y="280" width="20" height="20" class="small"/><rect x="20" y="320" width="20" height="20" class="small"/><rect x="20" y="360" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="40" y="60" width="20" height="20" class="small"/><rect x="40" y="100" width="20" height="20" class="small"/><rect x="40" y="140" width="20" height="20" class="small"/><rect x="40" y="180" width="20" height="20" class="small"/><rect x="40" y="220" width="20" height="20" class="small"/><rect x="40" y="260" width="20" height="20" class="small"/><rect x="40" y="300" width="20" height="20" class="small"/><rect x="40" y="340" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="380" y="80" width="20" height="20" class="small"/><rect x="380" y="120" width="20" height="20" class="small"/><rect x="380" y="160" width="20" height="20" class="small"/><rect x="380" y="200" width="20" height="20" class="small"/><rect x="380" y="240" width="20" height="20" class="small"/><rect x="380" y="280" width="20" height="20" class="small"/><rect x="380" y="320" width="20" height="20" class="small"/><rect x="380" y="360" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="400" y="60" width="20" height="20" class="small"/><rect x="400" y="100" width="20" height="20" class="small"/><rect x="400" y="140" width="20" height="20" class="small"/><rect x="400" y="180" width="20" height="20" class="small"/><rect x="400" y="220" width="20" height="20" class="small"/><rect x="400" y="260" width="20" height="20" class="small"/><rect x="400" y="300" width="20" height="20" class="small"/><rect x="400" y="340" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="420" y="80" width="20" height="20" class="small"/><rect x="420" y="120" width="20" height="20" class="small"/><rect x="420" y="160" width="20" height="20" class="small"/><rect x="420" y="200" width="20" height="20" class="small"/><rect x="420" y="240" width="20" height="20" class="small"/><rect x="420" y="280" width="20" height="20" class="small"/><rect x="420" y="320" width="20" height="20" class="small"/><rect x="420" y="360" width="20" height="20" class="small"/><rect x="0" y="380" width="20" height="20" class="small"/><rect x="0" y="420" width="20" height="20" class="small"/><rect x="20" y="400" width="20" height="20" class="small"/><rect x="40" y="380" width="20" height="20" class="small"/><rect x="40" y="420" width="20" height="20" class="small"/><rect x="60" y="400" width="20" height="20" class="small"/><rect x="80" y="380" width="20" height="20" class="small"/><rect x="80" y="420" width="20" height="20" class="small"/><rect x="100" y="400" width="20" height="20" class="small"/><rect x="120" y="380" width="20" height="20" class="small"/><rect x="120" y="420" width="20" height="20" class="small"/><rect x="140" y="400" width="20" height="20" class="small"/><rect x="160" y="380" width="20" height="20" class="small"/><rect x="160" y="420" width="20" height="20" class="small"/><rect x="180" y="400" width="20" height="20" class="small"/><rect x="200" y="380" width="20" height="20" class="small"/><rect x="200" y="420" width="20" height="20" class="small"/><rect x="220" y="400" width="20" height="20" class="small"/><rect x="240" y="380" width="20" height="20" class="small"/><rect x="240" y="420" width="20" height="20" class="small"/><rect x="260" y="400" width="20" height="20" class="small"/><rect x="280" y="380" width="20" height="20" class="small"/><rect x="280" y="420" width="20" height="20" class="small"/><rect x="300" y="400" width="20" height="20" class="small"/><rect x="320" y="380" width="20" height="20" class="small"/><rect x="320" y="420" width="20" height="20" class="small"/><rect x="340" y="400" width="20" height="20" class="small"/><rect x="360" y="380" width="20" height="20" class="small"/><rect x="360" y="420" width="20" height="20" class="small"/><rect x="380" y="400" width="20" height="20" class="small"/><rect x="400" y="380" width="20" height="20" class="small"/><rect x="400" y="420" width="20" height="20" class="small"/><rect x="420" y="400" width="20" height="20" class="small"/><rect x="60" y="100" width="40" height="40" class="large"/><rect x="60" y="180" width="40" height="40" class="large"/><rect x="60" y="260" width="40" height="40" class="large"/><rect x="60" y="340" width="40" height="40" class="large"/><rect x="100" y="60" width="40" height="40" class="large"/><rect x="100" y="140" width="40" height="40" class="large"/><rect x="100" y="220" width="40" height="40" class="large"/><rect x="100" y="300" width="40" height="40" class="large"/><rect x="140" y="100" width="40" height="40" class="large"/><rect x="140" y="180" width="40" height="40" class="large"/><rect x="140" y="260" width="40" height="40" class="large"/><rect x="140" y="340" width="40" height="40" class="large"/><rect x="180" y="60" width="40" height="40" class="large"/><rect x="180" y="140" width="40" height="40" class="large"/><rect x="180" y="220" width="40" height="40" class="large"/><rect x="180" y="300" width="40" height="40" class="large"/><rect x="220" y="100" width="40" height="40" class="large"/><rect x="220" y="180" width="40" height="40" class="large"/><rect x="220" y="260" width="40" height="40" class="large"/><rect x="220" y="340" width="40" height="40" class="large"/><rect x="260" y="60" width="40" height="40" class="large"/><rect x="260" y="140" width="40" height="40" class="large"/><rect x="260" y="220" width="40" height="40" class="large"/><rect x="260" y="300" width="40" height="40" class="large"/><rect x="300" y="100" width="40" height="40" class="large"/><rect x="300" y="180" width="40" height="40" class="large"/><rect x="300" y="260" width="40" height="40" class="large"/><rect x="300" y="340" width="40" height="40" class="large"/><rect x="340" y="60" width="40" height="40" class="large"/><rect x="340" y="140" width="40" height="40" class="large"/><rect x="340" y="220" width="40" height="40" class="large"/><rect x="340" y="300" width="40" height="40" class="large"/><rect x="60" y="60" width="320" height="320" style="fill:none; stroke-width:1; stroke:#000;"/><text x="240" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♔</text><text x="200" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♕</text><text x="80" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="360" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="160" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="280" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="320" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="120" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="80" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="120" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="160" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="200" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="280" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="320" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="360" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♚</text><text x="200" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♛</text><text x="80" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="360" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="160" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="280" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="320" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="120" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="80" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="120" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="160" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="200" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="280" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="320" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="360" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="374" text-anchor="middle" fill="black">♔</text><text x="200" y="374" text-anchor="middle" fill="black">♕</text><text x="80" y="374" text-anchor="middle" fill="black">♖</text><text x="360" y="374" text-anchor="middle" fill="black">♖</text><text x="160" y="374" text-anchor="middle" fill="black">♗</text><text x="280" y="374" text-anchor="middle" fill="black">♗</text><text x="320" y="374" text-anchor="middle" fill="black">♘</text><text x="120" y="374" text-anchor="middle" fill="black">♘</text><text x="80" y="334" text-anchor="middle" fill="black">♙</text><text x="120" y="334" text-anchor="middle" fill="black">♙</text><text x="160" y="334" text-anchor="middle" fill="black">♙</text><text x="200" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="334" text-anchor="middle" fill="black">♙</text><text x="280" y="334" text-anchor="middle" fill="black">♙</text><text x="320" y="334" text-anchor="middle" fill="black">♙</text><text x="360" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="94" text-anchor="middle" fill="black">♚</text><text x="200" y="94" text-anchor="middle" fill="black">♛</text><text x="80" y="94" text-anchor="middle" fill="black">♜</text><text x="360" y="94" text-anchor="middle" fill="black">♜</text><text x="160" y="94" text-anchor="middle" fill="black">♝</text><text x="280" y="94" text-anchor="middle" fill="black">♝</text><text x="320" y="94" text-anchor="middle" fill="black">♞</text><text x="120" y="94" text-anchor="middle" fill="black">♞</text><text x="80" y="134" text-anchor="middle" fill="black">♟</text><text x="120" y="134" text-anchor="middle" fill="black">♟</text><text x="160" y="134" text-anchor="middle" fill="black">♟</text><text x="200" y="134" text-anchor="middle" fill="black">♟</text><text x="240" y="134" text-anchor="middle" fill="black">♟</text><text x="280" y="134" text-anchor="middle" fill="black">♟</text><text x="320" y="134" text-anchor="middle" fill="black">♟</text><text x="360" y="134" text-anchor="middle" fill="black">♟</text></svg>

EDITME >

Solution 2:

2A. Require download of just one specially designed SVG font that makes a clear board position using fill and stroke effects to distinguish the pieces

Done and my newly home-made font looks good but not yet as good as the built in ones

That allows me to retain the Unicode characters so that a user can copy the chess position to a text editor, and other niceties.

It compromises file size, but not by much, especially if I design a font of my own that only includes chess pieces.

It compromises because I actually quite like the chess characters in most built-in fonts, and I would also like to give the user a choice of all fonts, including mine.

It compromises on cross-browser support; of all my browsers, only Safari understands SVG fonts, surprisingly enough. BUT they excite me and I won't be a part of that heel-dragging problem, so I'm including them in my implementation just to learn.

It's a tiny step from SVG to SVG fonts anyway.

2B. Also make the pieces look distinct when typed into a text editor all in a black font colour. (So Unicode 9812 to 9817 are white pieces while 9818 to 9823 are black.)

Current delay: Offsetting paths -- which seems to be a theme in every job I do! -- is necessary for making a really good looking font of my own, and I'm wrapped up in this fun mathematical puzzle at the moment.

This part is less relevant to my original question, but will be very helpful for questions other people are asking on Stack Exchange; I will be answering them in their own place, but I will still include links here for anyone interested in path offsetting; the subjects are closely related.

Solution 3: Compromise on using no external code

Opentype.js may or may not help me with inspecting the browser's internal fonts, but I'm not sure yet. This part of the answer is where I hope to find a shortcut. I want the outermost path of a font that I did not create or download; hopefully it is somehow available through an API, and this is the part I am seeking help on.

I can implement my own, I want to and am now very far along with doing so. But I would still like to access the browser's ability to provide such data, and then fall back to my own code.