Coloured text in SVG files changed to black by Vassal

Technical Support & Bugs
1

Model - Acer E1-771
Operating System - Windows 10
CPU - Intel Core i5-3230M 2.6 GHz with Turbo boost up to 3.2 GHz
Memory - 4GB DDR3
Video Card - Intel HD Graphics 4000
Vassal - 3.2.16
Java - Version 8 update 101 (build 1.8.0_101-b13)

I have been experimenting with using SVG files for counters in Vassal and have found that any text objects in an SVG image seem to be converted to Black in colour regardless of the colour of the text in the SVG file.

For example an SVG image with red or white text will appear in Vassal as black text.

2

Thus spake Robbie:

Model - Acer E1-771
Operating System - Windows 10
CPU - Intel Core i5-3230M 2.6 GHz with Turbo boost up to 3.2 GHz
Memory - 4GB DDR3
Video Card - Intel HD Graphics 4000
Vassal - 3.2.16
Java - Version 8 update 101 (build 1.8.0_101-b13)

I have been experimenting with using SVG files for counters in Vassal
and have found that any text objects in an SVG image seem to be
converted to Black in colour regardless of the colour of the text in the
SVG file.

For example an SVG image with red or white text will appear in Vassal as
black text.

Post an example SVG image which demonstrates the problem.

–
J.

3

I had to put the image in a zip file as it would not upload otherwise. In creating this image to demo the problem I noticed that Vassal not only changes the text font colour to black, but also changes the text justification from centred to left.

I used Inkscape to create the image.

1 Like
4

I have experienced the same thing. After reading that Vassal can use svg files, I decided to try using svg files rather than png thinking that the images will stay sharper during a zoom in which I found to be true. However, Vassal altered the text justification and colors. Here is a view as it appears in Vassal:

image
image1431Ă—916 284 KB

The charters on the left are png images in Vassal; the two on the right are svg images. The line reporting 10 shares and $0 cash are Text Labels in Vassal with colors defined to match the text color in the charters as defined in the svg files.

Here is a view of the exported png image of the Texas and New Orleans charter:
CharterTNO

Here is a view of the Texas and New Orleans charter as it appears in Inkscape:

image
image1057Ă—601 171 KB

5

Note: the alteration of text color and justification can be seen in the editor as soon as the image is imported.

6

This is how eog renders one of your SVG images:
image
It’s using librsvg as a renderer. That’s the same one Firefox uses (so that image is rendered identically when viewed in Firefox), and a completely different renderer from Batik, which is what Vassal uses. When I open this image in Inkscape, I get misaligned text as well, not like the text you’re seeing in Inkscape.

That is: The problem is not Vassal or the renderer Vassal is using.

The reason you’re not getting the intended rendering is that the fonts you’re using aren’t present on my machine, nor is Batik finding them on yours. You can’t rely on specific fonts being available on other systems. If you need precise glyph alignment, you have to embed the font in the SVG.

7

Thanks for the explanation.

8

Another option is to convert the fonts to paths. There’s a menu entry for that in Inkscape, though I forget where at the moment.

1 Like
9

That’s a great idea! Thanks!
Also, I know how to do that. I believe it is Path → Object to Path (although it may be Path → Stroke to Path).

10

I tried changing text to path. The position and justification were fine, but the text color was changed to black.
Here’s an image of the art in Inkscape:

image
image1769Ă—1012 156 KB

Here’s an image immediately after bringing it into a layer trait in the editor (Notice the black letters):

image
image1024Ă—928 76.2 KB

Here is an image in the running module:

image
image966Ă—916 120 KB

I’ll upload the SVG with the text changed to path in Discord #tech_support.

11

So far as I can see, the SVG is as it should be. This looks like a case where Batik doesn’t render the SVG correctly. I wouldn’t hold your breath for any bug fixes in Batik at this point. They haven’t had much activity on the project for a few years.

V4 will have an SVG renderer that works better.

12

Thanks for looking at it, and letting me know.

13

I am a complete noob on Vassal and no expert on graphic design, either, but, having encountered the same problem and unaware that it was probably unsolvable, and after a lot of trial and error, I think I’ve found a workaround.
At least it worked for SVG files drawn with Inkscape. After trying and failing to load the correct image saved as Inkscape SVG and plain SVG, I loaded it saved as Optimized SVG, using Scour (which is integrated to Inkscape but can also be installed separately).

vassal
vassal1145Ă—766 91.5 KB

As the image shows, that way it works. I don’t know if it will work for other images or in every case. One caveat is, I haven’t found a way to batch-optimize the images with Scour, and going “save as optimized SVG” for each file is daunting if your module, like mine, has upwards of 2,000 images.
From what I can see, you’ll need to check the “work around the renderer bug” box on the optimized options panel to get the same result. And close the file without a final save or it will turn back to Inkscape SVG.
Thanks for reading.

1 Like
14

My preliminary test of your method (minus the Scour stuff) seems to work. I just saved a piece with white text on a dark colored background as an optimized svg as you suggested and then closed the file without saving again (of course I gave it a slightly different name so I have both the regular svg and the optimized svg.

The svg is so much sharper zoomed in than the png files. The text on the svg image when zoomed in is even sharper that the Vassal text labels I overlaid on the image.

Thanks for sharing.