Vorpal board allows you to create dice with custom images to allow for maximum flexibility in creating a more realistic dice rolling experience. To allow for images to work best in rolls and throughout the application we’ve chosen to use vector graphics to improve overall performance. Most people are only familiar with raster style graphics types such as png or jpeg so this blog is to educate users about how to deal with common quirks and problems they have when making the transition to scalable vector graphics (svg) image format.
Online Vector Image Libraries
For starters, there are some very good resources online that have pre-built icons that can be downloaded and used in Vorpal Board. This is by far the easiest way to get images quickly. When using these, it is important to download the SVG image and not the PNG image.
Game-Icons
Game-icons.net is an online repository providing heaps of cool game related graphics. They are provided provided under the terms of the Creative Commons 3.0 BY license. You can also edit them online.
TIP: before downloading images from game-icons, change the background to None for best results.
Noun Project
The Noun Project proclaims to be the most comprehensive icon collection in the world. Their community of designers from 120+ countries is building the most diverse and extensive collection of iconography ever created. Their terms of use are stated here.
Converting from PNG to SVG
If you already have PNG images you want to use in our software, many tools such as Adobe Photoshop or GIMP will embed the png inside the svg rather than converting it. That will lead to a poor result in terms of quality, performance, and size. If you absolutely need to use a pre-existing png, it is preferable to instead convert the image into an SVG which will create an approximation of the original, but in vector format. In order to do this you need to use tools designed for vector graphics such as Inkscape or Adobe Illustrator. Keep in mind these conversions are not identical and can be tricky to configure, so this is probably the least-desirable path to get a vector image.
Inkscape
Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (SVG) format. Other formats can be imported and exported. This is the tool the Vorpal team uses whenever we have to convert raster to vector images.
There are lots of examples online on how to use inkscape to convert images to SVG such as this one logosbynick.com/inkscape-convert-png-to-svg
Adobe Illustrator
Check out this video
Online converters
There are also tools online that can “automatically” convert images to PNG’s. These work in most cases, but results can vary considerably. Here are some examples:
Other Considerations / FAQ
- While it is preferable NOT to embed image elements in SVG’s as mentioned above, if you have to do so make sure the tag is “image” and not “img” otherwise you can run into issues in certain browsers. (stackoverflow.com/questions/10737166/chrome-not-rendering-svg-referenced-via-img-tag)
- Sizes for images are limited to 125kb. If you are above that threshold, check if you are embedding images directly and consider following some of the techniques to convert your png instead which are described above.
- When creating images in inkscape, try to minimize the empty space around the actual image and keep the document height and width to approximately the same size for best results.