Considerations for graphics, especially vector format over raster (SVG files over PNG)

[digi-brain]

@IJW-Wartrader Some thoughts that came up while I was editing the 'Shooting with war engines topic':

Nice fire arc icons -- and the images with these icons are more than serviceable for the moment. However, for the future I think we should consider such things as:

1. Best practice for graphics of this type is to use vector rather than raster format, so that they scale perfectly to any size. Thus SVG format would be better than PNG. Asciidoc does supports SVG, so we should favour this format in the publication.
2. We'll probably want a separate SVG file for each icon, sooner or later.
3. Best practice for labelling things in graphics is to use numbered callouts rather than text. Then create a small legend below and define each numbered item. This make life much easier when you want to change the label, allows you to combine further description into the definition (which also helps to simplify for reuse), and also makes things vastly easier in case of future translated versions of the publication (not a priority, but it doesn't hurt to account for it and I have already had an enquiry about this from a French fan).
4. We should think about how to make the source files and/or template files available to all project contributors, so that any contributor can easily edit existing images or develop new in the same style.
5. Speaking of contributors, it'll also be best to document some image-related best practices and instructions in the Contributor's Guide component. Again, not a priority, but something that we should keep in mind for some time after we've established the patterns.

[IJW-Wartrader]

1. They're vector drawings (in something roughly equivalent to Powerpoint), but I'll have to do some digging to see how easy it is to export/convert them to SVGs, or whether I have to recreate them in Inkscape which won't be fun. :-(
2. Effectively the same issue.
3. Yes. These are just the quick-and-dirty versions.
4. I don't know if Github has some standard way to do this, but we could create a top-level assets folder in the main repository?
5. Aye.

[digi-brain]

1. Yes — I've only used Inkscape for a few simple adjustments and it isn't exactly intuitive is it. PowerPoint definitely lets you export to SVG, but on a per slide basis rather than selection basis I think. So, one icon per slide should work. Then might need to edit the canvas in Inkscape to eliminate white space around each icon.
2. NA
3. Yup, I agree that it makes sense to cut some corners at the moment, especially on the first go around while we're trying to get the basics done. This issue just gives us a placeholder so we don't lose track of this stuff.
4. I'm not sure either, will have to look into that. I remember that some special attention is required because a PowerPoint file is a binary large object (BLOB) rather than a text file.
5. NA

[IJW-Wartrader]

1. They're done in Keynote (MacOS-specific app), not Powerpoint. I'll try exporting to Powerpoint format and seeing if my version of Powerpoint is new enough to export to SVG, but it's highly unlikely... ;-)
2. NA
3. Aye.
4. SVG would probably be more suitable as the source files, and they're just text so Github is likely to work very well with them.
5. NA

[IJW-Wartrader]

Bingo! Inkscape will read Keynote-generated PDFs and pull out the vector drawings as editable shapes.

As Inkscape is very scriptable (I've used it before for SVG to PNG conversions), that means a fair amount of the process can be converted, at least as far as generating SVGs is concerned.

Roughly speaking:

1. Draw icon in Keynote.
2. Copy icon into a square aspect ratio Keynote file and adjust the icon size depending on whether any white space is required.
3. Export to PDF and run script.

http://ijw.on-rev.com/remastered/img/180-left.svg

[digi-brain]

Ah, I read over your message too quickly and didn't see "roughly equivalent to PowerPoint" as opposed to 'actually' PowerPoint :-D

Bingo! Inkscape will read Keynote-generated PDFs and pull out the vector drawings as editable shapes.

Ah, that's good. That gets us the vector image without too much trouble then, score.

For the long term, I wonder if in due course we can build up a library or template of SVG objects that are reasonably easy for contributors to manipulate as 'source', so we don't need to start in Keynote/PowerPoint/whatever? Or if it'll always prove difficult for anyone who isn't a whiz with Inkscape or some other free multiplatform tool? Again, not a priority, just thinking ahead.

http://ijw.on-rev.com/remastered/img/180-left.svg

That looks great, vectors a-go-go. (FYI in case you haven't spotted it -- when you scale up you can see that the grey and black circles don't quite line up perfectly, and I don't think the crossover is centred on the arrow either. Gets the job done and is good enough as-is -- but if you do want to fix it then I figure it's better to know early rather than late in the process.)

[IJW-Wartrader]

For the long term, I wonder if in due course we can build up a library or template of SVG objects that are reasonably easy for contributors to manipulate as 'source', so we don't need to start in Keynote/PowerPoint/whatever? Or if it'll always prove difficult for anyone who isn't a whiz with Inkscape or some other free multiplatform tool? Again, not a priority, just thinking ahead.

I think it will definitely be a good idea to pull out all the 'components' like a blue Marine unit, yellow Marine unit, red Ork circle etc. and save them as a set of SVGs. But that will probably have to be in addition to Keynote/PP files. :-(

That looks great, vectors a-go-go. (FYI in case you haven't spotted it -- when you scale up you can see that the grey and black circles don't quite line up perfectly, and I don't think the crossover is centred on the arrow either. Gets the job done and is good enough as-is -- but if you do want to fix it then I figure it's better to know early rather than late in the process.)

Yeah, as soon as I opened it in a browser to double-check the URL was correct...

I'll go through them all at some point when generating SVG versions.