"Image button" input element is invisible

Problem/Motivation

Steps to reproduce:

1. Enable the "Form API Example" module of this project
2. Navigate to the "Common input elements" page on the "examples/form-api-example/input-demo/" URL path
3. At the end of the demonstrated input element listing an <input type="image" ... > item should be seen.
4. Although the markup is being generated in the DOM, but there's nothing to appear visually, only a big white area between the other buttons around. This happens even if you temporarily place the "Main page content" block into a region which has some non-white background-color:
   

It's not an SVG-rendering issue of the client browser, because it happens both in Chrome and Firefox as well. Instead, the root cause of the issue is the referenced vector image file (see its code or as rendered image on Gitlab: images/100x30.svg) literally contains no visible elements.

Proposed resolution

We can still keep using vector graphic (as it gets widely supported), but need to use an other image file. This Examples project contains an other graphic file in its images/ folder: the logo of this project also being used for the Toolbar menu item. My suggestion is to use that for this purpose also.

However, that icon is colored fully white as needed for the Toolbar. To prevent similar misunderstandings in the future when user expects to see the image on white background, let's add a dark-colored version of this logo. Store them in separate sub-directories as Drupal core does. Also, the source code of the existing examples.svg file can be cleaned up with SVGO. If we go this way, then the old 100x30.svg file can be deleted.

After patch applied, these two areas needs to be tested:

Remaining tasks

Test, RTBC, commit.

User interface changes

Preventing confusion, improving overall visual appearance.

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

Original report by [username]

N/A