SVG counters with embedded images

Technical Support & Bugs
1

Hi

I have tried importing piece images that contain the svg image tag, but the image does not render. Is this supported? I am wondeing if it is a file path issue, for example, the image must be in the same import directory as the unit.

for example:

[code]<?xml version="1.0" encoding="utf-8"?>



[/code]
2

Thus spake geoffreyphipps:

Hi

I have tried importing piece images that contain the svg image tag, but
the image does not render. Is this supported?

Yes.

I am wondeing if it is a
file path issue, for example, the image must be in the same import
directory as the unit.

I suspect it is a path issue. The path in the href attribute should be
relative to the SVG containing it.

–
J.

3

The path is as you describe. I don’t know how to debug this - there is no error message, it just does not render.
I’ve tried putting it int he same folder. Ive tried with or without a leading “./” I’ll try absolute paths

I can pull the vmod file apart and have a look at what is in it.

I could download the vassal source and have look. Does it use an external library for SVG rendering? If so, which one?

As a wrok-around I could export these counters manually as png’s, but that would be tedious

cheers
Geoff

4

Can you point me at an example that works?

5

Thus spake geoffreyphipps:

I suspect it is a path issue. The path in the href attribute should be

relative to the SVG containing it.

The path is as you describe. I don’t know how to debug this - there is
no error message, it just does not render.
I’ve tried putting it int he same folder. Ive tried with or without a
leading “./” I’ll try absolute paths

Using an absolute path will virtually guarantee that it won’t work
for anybody but you.

Where is the image file you’re trying to reference, relative to the
file in which it is referenced?

I can pull the vmod file apart and have a look at what is in it.

I could download the vassal source and have look. Does it use an
external library for SVG rendering? If so, which one?

Batik.

–
J.

6

Thus spake geoffreyphipps:

Can you point me at an example that works?

The module for The Longest Day works.

–
J.

7

Thanks for your help

I have tried the simplest case - where the image is in the same directory as the master SVG file at the time that I set the image in the “Basic Piece” trait.

Your comment on absolute paths makes me wonder how the import process brings in the image, and how it stores them inside the zip file.

I’ll go look at the Longest Day’s module.

cheers
Geoff

8

The Longest Day is a different case. I unzipped it - the svg files for the units import other svg fragments using the “use” tag, eg:

I am trying to include a PNG image, eg:

9

Thus spake geoffreyphipps:

Thanks for your help

I have tried the simplest case - where the image is in the same
directory as the master SVG file at the time that I set the image in the
“Basic Piece” trait.

Your comment on absolute paths makes me wonder how the import process
brings in the image, and how it stores them inside the zip file.

The code is in VASSAL.tools.image.svg.SVGImageUtils. Look specifically
at relativizeExternalReferences() there, which is used in
VASSAL.tools.ArchiveWriter. I wrote this code, but it’s been long
enough that I no longer recall precisely what we do with these paths;
if I did, I just tell you.

(It might be that what you need is “images/foo.png”, if foo.png is in
the images directory inside the module.)

–
J.

10

Thus spake geoffreyphipps:

The Longest Day is a different case. I unzipped it - the svg files for
the units import other svg fragments using the “use” tag, eg:

I am trying to include a PNG image, eg:

It’s not a different case. I believe that the same code handles all
hrefs.

–
J.

11

I downloaded the source and had a quick look.
Method XX only looks for “use” args, not “image” tags:

protected static List getExternalReferences(
…
final NodeList usenodes = doc.getElementsByTagName(“use”);

I will look at three options:

  1. Extend vassal
  2. Switch from “image” to “use” tags in my marker files
  3. COnvert my svg markers files to png
12

Thus spake geoffreyphipps:

I downloaded the source and had a quick look.
Method XX only looks for “use” args, not “image” tags:

protected static List getExternalReferences(
…
final NodeList usenodes = doc.getElementsByTagName(“use”);

I will look at three options:

  1. Extend vassal

I’ve already tried iterating over elements here as well as
elements. Batik throws an exception when loading SVG containing
elements this way, so I think you’ll find this approach to be
fruitless.

  1. Switch from “image” to “use” tags in my marker files

Might be worth a try.

–
J.

13

I can’t use “use” tags 'cos that is for one svg file to use another svg file - I need to use a PNG file.

I’ve worked out how to script inkskape so that I can do a bulk svg->png conversion.

So I am unblocked now.

Thanks for your help, I have another question which will be a new thread :slight_smile:

14

Thus spake geoffreyphipps:

I can’t use “use” tags 'cos that is for one svg file to use another svg
file - I need to use a PNG file.

I’ve worked out how to script inkskape so that I can do a bulk svg->png
conversion.

So I am unblocked now.

Good. I’m sorry that you have to convert SVG to bitmaps for this. You
won’t need to do that in VASSAL 4, as we’ll be using a completely
different rendering system.

–
J.

15

For the record, using images from svg works fine if you add the images to the module manually. The module is just a zip file, so any decent zip utility should work for this purpose.

What doesn’t work is using images from the base module in an svg file in an extension …

16

thanks. i have unzipped a number of modules to see what is going on :slight_smile:
g