Information: Interaction Icons as .svg Files

[MonikaBarget]

I have added the interaction icons I have made so far to my following repository:

https://github.com/MonikaBarget/StoryScript/tree/imperialcircles_thematic/src/Games/ImperialCirclesThematic/resources

Feel free to reuse! :-)

Here is a tutorial I would suggest adding:

Embedding Images in StoryScript: Formats and Best Practices

The visual elements of an interactive story or game (background images, avatars, or icons) are important for the unique atmosphere of your creation and support user immersion. However, integrating images in web deployments means that you must not only consider aesthetics but also need to think about scalability and performance. This tutorial helps you with taking the right decisions for your StoryScript project.

Recommended Formats

Choosing the right image format is critical for balancing quality and file size. Below are the most common formats and their use cases:

Format	Use Case	Pros	Cons
JPG	Photographs, complex images	Small file size, good for color gradients	Lossy compression, no transparency
PNG	Graphics with transparency	Lossless, supports alpha transparency	Larger file size than JPG
TIFF	High-quality print or archival	Lossless, high detail, good for saving projects you still wish to edit later	Very large file size, unsupported in web
SVG	Icons, logos, scalable graphics	Vector-based, infinitely scalable	Not suitable for photographs and other detailed images

Embedding Images in HTML files

To make images show up in your StoryScript location texts and other sections visible to users, you need to embed them in the relevant HTML sections. You will need to use the <img> tag for raster images (JPG, PNG), but you can also use inline SVG for vector graphics. HTML for a basic raster image embedding looks like this:

<img src="path/to/image.jpg" alt="Description of the image">

It is good practice to add an alt text, which will be displayed to users when the image itself does not resolve. Also, alt text helps users with vision impairment process your story or game as screenreaders can read it out to them. To embed an image with a caption, you can use the following HTML code:

<figure>
  <img src="path/to/image.png" alt="Description of the image">
  <figcaption>This is a caption for the image.</figcaption>
</figure>

To embed .svg (Scalable Vector Graphics) images, you can also use the image tag like this:

<img src="path/to/icon.svg" alt="SVG Icon">

In addition, it is possible to create vector graphics via in-line code. The following code displays as a red circle when the HTML code is viewed in the browser:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

To test what in-line svg code will look like, you can use the W3Schools Try CSS editor, which also allows you to experiment with the CSS styling of HTML elements.

2) Creating Your Own Graphics

For custom graphics, open-source tools provide powerful alternatives to proprietary software. Also, many open source-tools run cross-platform and can be installed on Windows as well as on Mac and Linux distributions. GIMP (GNU Image Manipulation Program) is a popular cross-platform image creation and image editing app that supports layers, masks, and plugins for advanced editing. It is ideal for working with rich raster images such as photographs but does not export to svg.

If you are into serious digital art, you can also explore Krita, which is a free, open-source digital painting program for artists. It supports a wide range of brushes and textures. Futhermore, it has a built-in animation workspace for creating frame-by-frame animations.

3) Finding Public Domain Images

4) Finding Free and Public Domain Images for Reuse

When creating interactive stories or games, sourcing high-quality images that are free to use can be a challenge. Fortunately, there are several platforms that offer public domain, Creative Commons, or royalty-free images for reuse. Below are some of the best resources:

Recommended Platforms for Free Images

Platform	Description	Licensing Terms	Use Case
Wikimedia Commons	A repository of free-use images, sounds, and other media, many of which are focused on educational and historical content. It includes photos of landmarks, historical portraits, scientific illustrations, and more.	Mostly public domain or Creative Commons (CC) licenses. Always check the specific license for each image.	Historical images, educational content, cultural landmarks.
Unsplash	A popular platform offering high-resolution photographs and stock images contributed by a global community of photographers. The images are free to use for both personal and commercial projects.	Free to use under the Unsplash License. While not required, author attribution is appreciated as a gesture of respect to the photographers.	Modern photography, landscapes, portraits, abstracts.
Pexels	A curated collection of free stock photos and videos contributed by a community of creators.	Free to use under the Pexels License. Attribution is appreciated!	General-purpose images, backgrounds, lifestyle.
Pixabay	A community of creators sharing mages, videos, and music under free licenses.	Creative Commons CC0 (public domain) or similar permissive licenses. No attribution required.	Illustrations, vectors, stock photos.
Openverse	A search engine for openly licensed and public domain content, including images and audio.	Varies by image (e.g., CC0, CC-BY, or public domain). Always verify the license.	Diverse use cases.

[!Warning] All the platforms mentioned above are great resources if you want to create an appealing web project on a small or non-existing budget, for sure, but you also have to be careful that criminals are abusing these platforms to illegially share copyrighted works, and the internet is also full of so-called copyright trolls that contact website owner's claiming to be lawyers working for copyright holders. These trolls then say that you have used images illegally and try to extort money. So do your research before re-using any content from the web!

Always verify the source of the image and the specific license, even on platforms that generally offer free content. Some may require attribution or have restrictions. If the license requires attribution, include the creator’s name, title of the work, source, and license type (if applicable). Even if an image is free to use, it may contain trademarks or logos that are protected.

4) Using SVG Icons for Scalability

In interactive stories or games, responsiveness (meaning to ability to smoothly run your work on different devices) is often a challenge. Icons, buttons, or UI elements must adapt seamlessly to different screen sizes and resolutions. Here, SVG is the ideal format. SVGs look sharp on any screen and can save a lot of storage space. Moreover, SVGs can be styled and manipulated with CSS and JavaScript, which we also use extensively in StoryScript. If you cannot create SVGs from scratch but already have raster images (JPG, PNG) that need to be converted, you have several options. GUI tools like Inkscape (Linux, macOS, Windows) allow you to open the raster image in the interace and select Path > Trace Bitmap to convert the image to a vector. Commerical tools like Adobe Illustrator (macOS, Windows) have similar functionalities.

But you can also use command line tools, especially when you are on Linux. This even allows you to convert an entire image folder with a few lines of code. For batch processing, Inkscape and ImageMagick are recommended Linux tools. After installing Inkspace, you can navigate to the image folder you want to convert in the terminal and run:

for file in *.png; do
    inkscape "$file" --export-filename="${file%.png}.svg" --export-type=svg
done

Using ImageMagick, you would run:

for file in *.png; do
    convert "$file" -threshold 50% -negate -morphology erode diamond:1 "${file%.png}.svg"
done

You can adjust the -threshold and -morphology parameters to balance quality and file size before conversion. If you want to optimise your SVGs later, you can use SVGO, which is a Node.js tool to remove unnecessary metadata and simplify paths.

[MonikaBarget]

PS: Because I think you will need HTML for your StoryScript website, I have converted the MD content above to rawHTML and extendedHTML formats as will, which you want to reuse!

TutorialImages_extendedHTML.html
TutorialImages_rawHTML.html

[MonikaBarget]

@RutgerSchurgers : Here are the svg icons with a reduced size of 100 x 100 px:

StoryScriptInteractionIcons_100px.zip

You can use the Inkscape interface or terminal to resize SVGs:

for file in *.svg; do
    # Open the SVG, resize content, and save
    inkscape --command="select-all;group;resize:100,100;resize-page-to-content;save" "$file"
done

[MonikaBarget]

@RutgerSchurgers : interaction icons as small PNG files:

StoryScriptInteractionIcons_PNGs.zip

[MonikaBarget]

It seems that many systems expect a standard 24 x 24 ViewBox sizing for icons, so I have adjusted all SVGs:

StoryScript_InteractionIcons_ViewBox24.zip

When embedding the SVGs, simply using the tag may also not work. It can be necessary to include the viewBox attribute to ensure proper scaling.

Example from https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

[MonikaBarget]

@RutgerSchurgers : testing different colours:

StoryScript_Icons_light-purple.zip
StoryScript_Icons_turquoise.zip