|
One more technique for you to think about. You can place a "text" block inside the "svg" block, just after the "image" block. Inside the text block you need to put the "x" and "y" position of the text and the text itself. "x" and "y" are pixels from the left and top of the "viewbox" you specified in the "image" block. This will overlay your text on top of the image.
So, remove the text from your image, get the image to display nicely, overlay the text and everything rescales together. Truetype fonts are basically outline fonts in vector format anyway, so it's pretty easy to add to the svg block. Since they are outline fonts, you also have to specify a "fill" color for them to show up. If you want, you can specify a separate width and color for the outline itself, probably in a contrasting color from the "fill" color.
The "text" block can be styled with font-family, font-size, font-weight, font-style, etc.
What makes this work is that the (vector) font isn't rasterized until after the final display magnification or reduction is known. This will allow the rasterizer to use all the information about the font, including hints. Further, the font will be re-rasterized every time the mag. or red. changes. Say when you shrink the window or make a thumbnail.
|