optimizing svg paths for generating themes

[solo]

Well I was going to create a little SVG flag in which one of those iso flag designs could be loaded through xlink href. But I really got stuck trying to rescale the iso flag, which is 640x480, into the flag area of my icon, which I made 64x48, which should be straightforward enough.

I was faffing around with viewbox and preserveAspectRatio, and I just couldn't get it to work.

So I admitted defeat and shrunk the iso flag down to 64x48, and then it works fine.

I know it must be possible to rescale the flag to fit from within the icon svg, but I am done trying to find out.

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M15 18v44c5-12 5-32 0-44zm70 47H15v25H9V12H6V6h12v6h-3v3h70z" fill="#fff" stroke="#444" stroke-width="3"/>
<image x="20" y="16" width="64px" height="48px" xlink:href="path/to/your/flag/yourflag.svg" />
</svg>

[technosaurus]

Technosaurus, your list of standard icons includes the flag-AA icon, which stands for the iso3166 standard of codes corresponding to all different flag designs.

Now, rather than making life a lot harder by trying to re-create each of those flags yourself, here's a link to a SVG collection of iso flags on GitHub.

https://github.com/jasny/iso-country-flags

Those are pretty decent. I tried the US flag which started at ~24kb and got a decent image down to ~4kb using svgomg, but just out of curiosity I tried a hand rendering and got it almost down to 1kb (50 stars require a lot of paths).

Code: Select all

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
<path fill="#b00" d="M0 6h96v78h-96"/><path fill="#006" d="M0 6h48v42h-48"/>
<path fill="#FFF" d="M2 10h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m6 -30h48v6h-48zm0 12h48v6h-48zm0 12h48v6h-48zm-48 12h96v6h-96zm0 12h96v6h-96zm0 12h96v6h-96z"/>
</svg>

But then I remembered that there is a unicode "star" character, so I tried a hacky version. It will probably render differently in different viewers, but it demonstrates that you can draw any kind of text along a path (even curved ones, though the example only demos straight lines)

Code: Select all

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96">
<def><path id="p1" d="M1 12h36m-35 4h35m-36 4h36m-35 4h35m-36 4h36m-35 4h35m-36 4h36m-35 4h35m-36 4h36"/></def>
<path fill="#b00" d="M0 6h96v78h-96"/>
<path fill="#006" d="M0 6h40v42h-40"/>
<path fill="#FFF" d="M40 12h56v6h-56zm0 12h56v6h-56zm0 12h56v6h-56zm-40 12h96v6h-96zm0 12h96v6h-96zm0 12h96v6h-96z"/>
<text fill="#FFF" letter-spacing="4" font-size="3">
<textPath xlink:href="#p1">★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★</textPath>
</text>
</svg>

[solo]

That's great work.

The second's a real stinker though because it doesn't work on the filesystem I'm working on, which is FAT32. The encoding of those star symbols does not play well with that.

I thought maybe you could even reduce the first one further by using the 'use' element in combination with xlink:href, as explained here:

https://developer.mozilla.org/en-US/doc ... lement/use

I just ran into trouble defining a row of stars as a group. It appears a lot easier to define simple shapes as a group than a complex path.

[solo]

How SVG stacking could create different icon themes.

For some designers working with the Scalable Vector Graphics format, it has become good practice to group some SVG designs together into one bigger SVG. They place each design on a seperate layer, which will be called specifically to show itself in a page, while not showing the designs on the other layers.
This practice is called SVG stacking.

Here's a very good webpage explaining how it works:

https://hofmannsven.com/2013/laboratory/svg-stacking/

Now, what I was thinking about is that with this technique you should be able to create icons which have their respective design elements split up in different layers, and by either showing or hiding them, you could modify the appearance of an icon as if you changed its theme.
So lets go back to our trusty old calculator.

I decided to split the design up in three elements: outline, fills, and highlights. So I created a number of layers accordingly.
Using the information on from the link above, I made an SVG containing all the split up elements. I called it calculatorstack01.svg.

Code: Select all

<?xml version="1.0"?>
<svg 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg:style 
    xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
      .i { display: none; }
      .i:target { display: block; }
  </svg:style>
 <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="button_highlight" 
  width="96px" 
  height="96px" 
  viewBox="0 0 96 96">
   <path d="M33 42h6v6m6-6h6v6m6-6h6v6m-30 6h6v6m6-6h6v6m6-6h6v6m-30 6h6v6m6-6h6v6m6-6h6v6m-30 6h6v6m6-6h6v6m6-6h6v6" fill="none" stroke="#666" stroke-width="3"/>
 </svg:svg>
 <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="body_highlight" 
  width="96px" 
  height="96px" 
  viewBox="0 0 96 96">
   <path d="M24 6h48v84m-6-54H30V12" fill="none" stroke="#969696" stroke-width="3"/>
 </svg:svg>
 <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="outline" 
  width="96px" 
  height="96px" 
  viewBox="0 0 96 96">
   <path d="M57 78h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm24-12h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm24-12h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm24-12h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm-3-30h36v24H30zm-6-6h48v84H24z" fill="none" stroke="#444" stroke-width="3"/>
 </svg:svg>
  <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="screenfill" 
  width="96px" 
  height="96px" 
  viewBox="0 0 96 96">
   <path d="M30 12h36v24H30z" fill="#a0892c"/>
 </svg:svg>
  <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="buttonfill" 
  width="96px" 
  height="96px" 
  viewBox="0 0 96 96">
   <path d="M57 78h6v6h-6zM45 78h6v6h-6zM33 78h6v6h-6zM57 66h6v6h-6zM45 66h6v6h-6zM33 66h6v6h-6zM57 54h6v6h-6zM45 54h6v6h-6zM33 54h6v6h-6zM57 42h6v6h-6zM45 42h6v6h-6zM33 42h6v6h-6z" fill="#646464"/>
 </svg:svg>
   <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="bodyfill" 
  width="96px" 
  height="96px" 
  viewBox="0 0 96 96">
   <path d="M24 6h48v84H24z" fill="#b7c8be"/>
 </svg:svg>
 </svg>

Then I made a small HTML page with a table in it, which would make positioning easy (I'm not a programmer folks!). Using the information on the following webpage, I managed to create images on top of each other:

https://stackoverflow.com/questions/484 ... er-in-html

And it works!

Here's the HTML code for the webpage. Put it in the same folder as the calculatorstack01.svg.

Code: Select all

<HTML>

<HEAD>

<TITLE>Stacked SVG test for theme generation</TITLE>
<BODY BGCOLOR="#ffffff">



<style type="text/css" scoped>
table.GeneratedTable {
width:100%;
background-color:#ffffff;
border-collapse:collapse;border-width:0px;
border-color:#ffffff;
border-style:solid;
color:#000000;
}

table.GeneratedTable td, table.GeneratedTable th {
border-width:0px;
border-color:#ffffff;
border-style:solid;
padding:3px;
}

table.GeneratedTable thead {
background-color:#ffffff;
}
</style>

<!-- HTML Code -->
<table class="GeneratedTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img 
 src="calculatorstack01.svg#outline" 
 alt="SVG calculator outlined" 
/></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#bodyfill" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#screenfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#buttonfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#outline" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#body_highlight" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#button_highlight" style="position: absolute; top: 0px; left: 0px;"/>
</div></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#bodyfill" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#screenfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#buttonfill" style="position: absolute; top: 0px; left: 0px;"/>
</div></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#body_highlight" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#button_highlight" style="position: absolute; top: 0px; left: 0px;"/>
</div></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#outline" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#bodyfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#screenfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#button_highlight" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#buttonfill" style="position: absolute; top: 0px; left: 0px;"/>  
</div></td>
</tr>
</tbody>
</table>
</BODY>

</HTML>

Understand, you could, if you wanted to, draw a completely different looking calculator on one of those layers as well.

[solo]

I've been working on this list of standard icons Technosaurus posted, and I thought I'd share the result.

They are very minimalistic, because of the limitations I put on them. They had to be single path, only one fill color, only one line color, a line thickness of 3, and their individual size was not allowed to exceed 500 bytes.
Now, I realize that for the SVG icon project of Technosaurus a single path, single color SVG is not a requirement, and so there's probably a lot of icons I made that are unsuitable for that project. Besides that, there's a number that will not meet the required quality standard.
But having said that, I am also confident there's a fair number of icons there that would be usable.

They are in a HTML file, inside a table with numbered rows, for easy lookup. I've kept the order as it appears in the standard icon list Technosaurus posted in this thread.
It is nice to note that the entire size of the HTML page containing all SVG's amounts to less than 85kb.

The attachment is in compressed TAR because it seems we're not allowed to make attachments in this forum that are HTML.

This was a really fun and educational thing to work on. I hope someone may have a use for some of them.

[step]

@solo, I'm speechless; given the constraints you posed they look fantastic, and in general they look very nice and usable for a minimalistic theme.

[solo]

@solo, I'm speechless; given the constraints you posed they look fantastic, and in general they look very nice and usable for a minimalistic theme.

Thanks step! Glad you appreciate it.

In a way, the constraints make it easier. Instead of asking yourself the question whether you've done enough, you ask yourself whether you did too much.
But even then, there's some icons that I feel could be improved upon.

[technosaurus]

My icons are public domain/unlicense/CC0.
@solo can anyone use your icons?

[solo]

My icons are public domain/unlicense/CC0.
@solo can anyone use your icons?

Yes!

[solo]

This bit of information might be a no-brainer for some people, and it might not directly be tied into the subject of this thread, but I believe it is still a nice thing to know.

You can make a PHP file out of an SVG by simply changing the extension from .svg to .php, and add the following line of code at the start:

Code: Select all

<?php header("Content-type: image/svg+xml"); ?>

so this:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><path d="M48 76v4m27-21h-3m-48 0h-3m42-4v8m-4-4h8m-30 0h-8m4-4v8m11-4h8m-4-4v8m42-15c-2 56-82 56-84 0C8-8 88-8 90 48zM75 36c15 60-69 60-54 0 4 15 50 15 54 0zM24 26c7-4 14-4 21 0m6 0c7-4 14-4 21 0" fill="#fff" stroke="#444" stroke-width="3"/</svg>

becomes this:

Code: Select all

<?php header("Content-type: image/svg+xml"); ?>
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M48 76v4m27-21h-3m-48 0h-3m42-4v8m-4-4h8m-30 0h-8m4-4v8m11-4h8m-4-4v8m42-15c-2 56-82 56-84 0C8-8 88-8 90 48zM75 36c15 60-69 60-54 0 4 15 50 15 54 0zM24 26c7-4 14-4 21 0m6 0c7-4 14-4 21 0" fill="#fff" stroke="#444" stroke-width="3"/></svg>

It may also be nice to know that you can enter svg code in the text field of an sql database, and when called by php with an echo command, it will show up as an svg.

[technosaurus]

Here is a droid icon path I left out as unfinished, but its _usable_ if anyone wants.

Code: Select all

<path  d="M24 30a27 24 0 0 1 54 0z
m0 3h54v30q0 6 -6 6h-3v12q0 6 -6 6q-6 0-6-6v-12h-12v12q0 6 -6 6q-6 0-6-6v-12h-3q-6 0-6-6zm-15 0q0-6 6-6q6 0 6 6v24q0 6 -6 6q-6 0-6-6zm72 0q0-6 6-6q6 0 6 6v24q0 6 -6 6q-6 0-6-6z
"/>

Solo has significantly expanded the number of icons in the list to the point where it makes sense to create a program to generate themed icons. I can do this in shell, C or javascript ... possibly even all of the above. Which is everyone most interested in? This is partially in response to the theme bug in woof-ce, but I won't be including any of the gtk licensed icons it mentions - only public domain / permissively licensed ones.

[step]

shell and js the most

[01micko]

That droid thing was cool.

Here is my progression..

https://github.com/puppylinux-woof-CE/puppy_icon_theme

Just take a look. Needs work! (but as far as zigbert's icons go it's a good start).

------

Below image is the theme in action with Akash' Pup Volume Monitor.

Mimetypes also work in all gtk2 apps, plus other icons.

[solo]

Here is my progression..

https://github.com/puppylinux-woof-CE/puppy_icon_theme

Just take a look. Needs work! (but as far as zigbert's icons go it's a good start).

I just took a look at the icons you worked on 01Micko. Holy mackrel! That must have been a ton of work.

Good job man!

[01micko]

Here is my progression..

https://github.com/puppylinux-woof-CE/puppy_icon_theme

Just take a look. Needs work! (but as far as zigbert's icons go it's a good start).

I just took a look at the icons you worked on 01Micko. Holy mackrel! That must have been a ton of work.

Good job man!

To be clear, I only made the mimetypes (some directly based on zigbert's) and some of the apps and the build system to sort them into an icon theme based on techno's idea. The work is all zigbert's.

[technosaurus]

Yeah, we need to keep Zigbert's GPL stuff separate. We don't want to have to include the entire GPL virus with everything that uses even 1 icon (screenshots, simple web pages, etc...) A license should never be longer than the code that it licenses.

I'm also trying to convert everything into strictly relative paths, so that they can be combined or used in a layout simply by adding an offset to the first move operation (mX X) or even in a game using a really simple/crappy svg game framework. If you have any absolute paths, other than the first M, then adding an offset will really screw up the image. Repeated/similar shapes compress much better as relative paths and are easier to cut and paste for hand editing.

As an example, I put together the first 16 of the 64 I-Ching symbols using relative paths. Note that 90% of the code is repeated (== better compression)

Code: Select all

<path id="hex1"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8z"/>
<path id="hex2"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16z"/>
<path id="hex3"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40-16h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-32h16v8h-16z"/>
<path id="hex4"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-32h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16z"/>
<path id="hex5"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 -48h16v8h-16zm0-32h16v8h-16z"/>
<path id="hex6"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-32h16v8h-16z"/>
<path id="hex7"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-32h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16z"/>
<path id="hex8"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-32h16v8h-16z"/>
<path id="hex9"  d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 -48h16v8h-16z"/>
<path id="hex10" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 -32h16v8h-16z"/>
<path id="hex11" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 -48h16v8h-16zm0 -16h16v8h-16zm0 -16h16v8h-16z"/>
<path id="hex12" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0 -16h16v8h-16zm0 -16h16v8h-16z"/>
<path id="hex13" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40-16h16v8h-16z"/>
<path id="hex14" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40-64h16v8h-16z"/>
<path id="hex15" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-16h16v8h-16zm0-32h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16z"/>
<path id="hex16" d="m0 2v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm0 16v8h96v-8zm40 0h16v8h-16zm0-16h16v8h-16zm0-16h16v8h-16zm0-32h16v8h-16zm0-16h16v8h-16z"/>

[01micko]

Yeah, we need to keep Zigbert's GPL stuff separate. We don't want to have to include the entire GPL virus with everything that uses even 1 icon (screenshots, simple web pages, etc...) A license should never be longer than the code that it licenses.

No reason we can't change the licence on the icons even though they are part of woof-ce. I'll see what ziggy thinks.

[technosaurus]

I've got enough template code to start pulling out the paths

* minimizing using this: https://jakearchibald.github.io/svgomg/
* convert to relative paths using this: http://jsfiddle.net/MC53K/
* Next convert commas to spaces
* Finally convert " -" (space+minus-sign) to "-" (minus-sign)

Here is the work in progress:

Code: Select all

#!/bin/sh
#normally these would be sourced from external file(s)
icon_AtoZ="M25 32l3 24h-6l3-24zm-11-13l-8 57h15l1-10h6l1 10h15l-9-57h-21zm46 39h-12v-10h12zm30-27l-11 33h11v12h-27v-10l11-35h-11v-12h27z"
icon_AtoZ="M12 72h12l2-12h12l2 12h12l-12-48h-18zm22-24h-6l3-12zm16 0h6v3h-6zm22-12h-16v-12h30v12l-16 24h16v12h-30v-12z"
icon_calculator="M24 6v84h48v-84h-48zm6 6h36v24h-36v-24zm3 30h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zm-24 12h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zm-24 12h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zm-24 12h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6z"
icon_e2dots="M48 23c-46.5 0-40.5 88 25.5 61v-10c-20 8-43 8-43-15h46v-6c0-19-14.3-30-28.5-30zm18.5 27h-36c0-24 36-24 36 0zm5.5-37.5c0 8.5-14 8.5-14 0s14-8.5 14 0zm-34 0c0 8.5-14 8.5-14 0s14-8.5 14 0z"
icon_notepad="M66 6l18 72-48 6-18-72zm-40 12l32-4m-30 12l32-4m-30 12l32-4m-30 12l32-4m-30 12l32-4m-30 12l32-4z"
icon_pencil="M48 72l12-12 12-48-12-6-12 48z"
icon_at="M57,47c0,16,-21,16,-21,0s21,-16,21,0zm7.97,17.263c-16.97,14.737,-40.97,3.737,-40.97,-16.263c0,-30,46,-30,46,-3c0,10,-6.105,14,-13,14v-24"
icon_puppy_outline="M90 54c-2 56-82 56-84 0 0-2.9 1-6 1-9v-19c0-6 13-11 23-8 10-6 20-6 29-4h20c8 0 10 16 4 20 3 3 7 12 7 20"
icon_puppy="M90 54c-2 56-82 56-84 0 0-2.9 1-6 1-9v-19c0-6 13-11 23-8 10-6 20-6 29-4h20c8 0 10 16 4 20 3 3 7 12 7 20m-12-12a6 6 0 1 0 1 1zm-36 6a12 12 0 1 0 1 1zm-1 0a6 6 0 1 0 1 1zm18 24l12-12-24 6zq6 6 18 -6q-12 12 -18 6 q-6 12-18 6q12 6 18-6m24-38q-6 6 -8 -6t-6-12m-40 2q6 12 -18 16"
#add more paths above here: ...

#normally this would be sourced from an external config file... for themes
num_colors=2
color0="#777"
color1="#bbb"

genicon(){
local out="$1"
local color_count=0
echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">' >"$out.svg" 
shift
while [ "$1" ]; do
	local color=`eval echo \\${color$((color_count%num_colors))}`
	local icon=`eval echo \\${icon_$1}`
#todo add more attributes: stroke, stroke-width, opacity, etc...
	echo "	<path fill=\"${color}\" d=\"${icon}\"/>" >>"$out.svg"
	color_count=$((1+color_count))
	shift
done
echo "</svg>" >>"$out.svg"
}

#usage
genicon pencil_icon_output notepad pencil

Edit:

svgomg doesn't convert rounded rectangles to paths, so I came up with this javascript snippet

Code: Select all

<script>
	var x=10, y=10, width=80, height=70, rx=10, ry=15;
	console.log(
		'<path d="M' +x+' '+((y+ry)|0)+
		'q0-'+ry+' ' +rx+'-'+ry+'h'+((width-2*rx)|0)+
		'q'+rx+' 0 ' +rx+' '+ry+'v'+((height-2*ry)|0)+
		'q0 '+ry+'-' +rx+' '+ry+'h-'+((width-2*rx)|0)+
		'q-'+rx+' 0-'+rx+'-'+ry+'z"/>'
	);
</script>

It shouldn't be hard to convert to shell if anyone is interested
Edit2:

Code: Select all

rounded_rect(){ #example with hardcode variables
	x=10 y=10 width=80 height=70 rx=10 ry=15
	echo "<path d=\"M${x} $((y+ry))
q0-${ry} ${rx}-${ry}h$((width-2*rx))
q${rx} 0 ${rx} ${ry}v$((height-2*ry))
q0 ${ry}-${rx} ${ry}h-$((width-2*rx))
q-${rx} 0-${rx}-${ry}z\"/>"
}

[technosaurus]

update:

I simplified the icon generator while making it more functional "'cuz datz wut I do"

Now you can overlay multiple paths with different fill colors to combine into a single icon (I haven't dealt with strokes and gradients yet - TODO)

Since I have been converting the paths to relative (sometimes with full manual redraw) it is now possible to change the overlay position like this:

Code: Select all

#generates a rounded button with a laptop with a small warning offset 24 px to the right
genicon  "$background_rounded_rect8" "$icon_laptop" "${icon_warn/M48 48/M64 48}"  >laptop-warning.svg

Here is the progress thus far:

Code: Select all

#!/bin/ash
#normally these would be sourced from external file(s)
icon_keyboard="M6 36v24q0 6 6 6h72q6 0 6-6v-24q0-6-6-6h-72q-6 0-6 6m6 0v3h3v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m-71 6v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h9v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m-71 4v3h5v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h7v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m-71 4v3h7v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h9v-3m-57 4v3h9v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h11v-3m7 0v3h3v-3m-67 4v3h5v-3m1 0v3h4v-3m1 0v3h4v-3m1 0v3h24v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m1 0v3h4v-3m3 0v3h3v-3m1 0v3h3v-3m1 0v3h3v-3m-34-58v30"
icon_menu="M24 18a6 6 0 1 0 0 12h48a6 6 0 1 0 0 -12z
m0 24a6 6 0 1 0 0 12h48a6 6 0 1 0 0 -12zm0 24a6 6 0 1 0 0 12h48a6 6 0 1 0 0 -12z"
icon_flag_blank="M12 18q24 8 36 0t36 0v48q0-8-36 0t-36 0z"
icon_AtoZ="M12 72h12l2-12h12l2 12h12l-12-48h-18zm22-24h-6l3-12zm16-6h8v6h-8zm22-6h-16v-12h30v12l-16 24h16v12h-30v-12z"
icon_calculator="M24 6v84h48v-84h-48zm6 6h36v24h-36v-24zm3 30h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zm-24 12h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zm-24 12h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zm-24 12h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6z"
icon_e="M32 60h48a30 36 0 1 0-6 18l-6-12a9 8 0 1 1-36-6zm2-12a12 12 0 1 1 32 0z"
icon_e2dots="M48 23c-46.5 0-40.5 88 25.5 61v-10c-20 8-43 8-43-15h46v-6c0-19-14.3-30-28.5-30zm18.5 27h-36c0-24 36-24 36 0zm5.5-37.5c0 8.5-14 8.5-14 0s14-8.5 14 0zm-34 0c0 8.5-14 8.5-14 0s14-8.5 14 0z"
icon_paper="M66 6l18 72-48 6-18-72zm-40 12l32-4m-30 12l32-4m-30 12l32-4m-30 12l32-4m-30 12l32-4m-30 12l32-4z"
icon_pencil="M48 72l12-12 12-48-12-6-12 48z"
icon_at="M57 47c0 16 -21 16 -21 0s21-16 21 0zm8 17c-17 15 -41 4 -41-16c0 -30 46 -30 46-3c0 10-6 14-13 14v-24"
icon_puppy_outline="M90 54c-2 56-82 56-84 0 0-2.9 1-6 1-9v-19c0-6 13-11 23-8 10-6 20-6 29-4h20c8 0 10 16 4 20 3 3 7 12 7 20"
icon_puppy="M90 54c-2 56-82 56-84 0 0-2.9 1-6 1-9v-19c0-6 13-11 23-8 10-6 20-6 29-4h20c8 0 10 16 4 20 3 3 7 12 7 20m-12-12a6 6 0 1 0 1 1zm-36 6a12 12 0 1 0 1 1zm-1 0a6 6 0 1 0 1 1zm18 24l12-12-24 6zq6 6 18 -6q-12 12 -18 6 q-6 12-18 6q12 6 18-6m24-38q-6 6 -8 -6t-6-12m-40 2q6 12 -18 16"
icon_magazin="M12 24q24-8 36 0q24-8 36 0v48q0-8-36 0q0-8-36 0z"
icon_cd=d="M4 48a44 44 0 1 1 0 1zm39 1a5 5 0 1 0 0-1z"
icon_bluetooth="M48 48l-24 24 6 6 18-18 0 36 30-30-18-18 18-18-30-30 0 36-18-18-6 6zm8-8l0-19 9 9zm0 36l0-19 9 9z"
icon_umlaut="M32 6a6 6 0 1 0 1 0zm30 0a6 6 0 1 0 1 0z"
icon_X="M12 24l12-12 24 24 24-24 12 12-24 24 24 24-12 12-24-24-24 24-12-12 24-24z"
icon_triangle="M12 18v60h48zm28 50h-18v-24z"
icon_wrench="M84 72q6 0 6-6l-42-42q6 -24-18-18l8 8q0 6-6 6l-8-8q0 24 18 18z"
icon_LT_left="M28 6v12l-18 30 18 30v12l-26-42z"
icon_LT_right="M68 6v12l-18 30 18 30v12l-26-42z"
icon_GT_left="M28 6v12l18 30-18 30v12l26-42z"
icon_GT_right="M68 6v12l18 30-18 30v12l26-42z"
icon_slash="M48 6h12l-12 84h-12z"
icon_bulb="M36 68a32 32 0 1 1 24 0zv6h24v-6zh24v12h-24zv18h24v-18zm12-28q3 6 0 24z"
icon_joypad="M80 12l-24 24 24 24a12 12 0 0 1 -24 24l-42-42a12 12 0 0 1 24-24l18 18m-24-12l-4-4-4 4-4-4-4 4 4 4-4 4 4 4 4-4 4 4 4-4-4-4zm32 28a4 4 0 1 0 1 1zm8 8a4 4 0 1 0 1 1zm-8 8a4 4 0 1 0 1 1zm-8-8a4 4 0 1 0 1 1z"
icon_globe="M48 1a47 47 0 1 0 0.1 0a18 47 0 1 0 0.1 0zm-41 24h82m-88 22h94m-88 24h82"
icon_film="M14 14v68h68v-68zm6 6h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm50 -48h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"
icon_music_note="M68 29v25c0 10-16 10-17 8-1-3 3-8 11-8v-14l-18 3v17c0 10-16 11-17 8s3-8 11-8l0-26z"
icon_paperclip="M13 48l5 4l36-36c14-14 35 7 21 21l-41 41c-9 9-21-4-13-12l41-41c3-2 6 1 4 4l-36 36l5 4l36-36c8-8-5-21-13-13l-40 40c-18 18 6 37 21 22l40-40c20-20-10-50-30-30z"
icon_ribbon="M15 15q12 32 32 32t34 34l-12 8q-12-32-34-34t-28-28z"
icon_articulated_spline="M15 15q12 32 32 32t34 34l-12 8q-24-24-24-48t-24-32m-5 9l8-8m0 24l16-12m8 36l9-9m0 26l16-9"
icon_camera="M84 48c0 28-42 28-42 0s42-28 42 0zm-21-15c-7.5 0-15 5-15 15c0 20 30 20 30 0c0-10-7.5-15-15-15zm0 6c4.5 0 9 3 9 9c0 12-18 12-18 0c0-6 4.5-9 9-9zm-54-18v54h78v-54zm6 6h15v12h-15v-12z"
icon_cylinder="M24 8q24-6 48 0v80q-24 8-48 0z"
icon_reverse_cylinder_small="M30 12v12q18 6 36 0v-12q-18 -4 -36 0z"
icon_reverse_cylinder_med="M30 12v30q18 6 36 0v-30q-18 -4 -36 0z"
icon_reverse_cylinder_large="M30 12v54q18 6 36 0v-54q-18 -4 -36 0z"
icon_reverse_cylinder_max="M30 12v72q18 6 36 0v-72q-18 -4 -36 0z"
icon_laptop="M16 14h64v36h-64zm6 6v24h52v-24zm-6 32h64l6 16v4h-76v-4zm24 10l-2 5h18l-2-5z"
icon_notepad="M8 24v48h2v-48l24-6h2l-24 6v48h2v-48l24-6h2l-24 6v48h2v-48l24-6h2l-24 6q0 24 36 36l24-6q-24 0-36-36h-12l-24 6v48h12l24-6v-10q-23-9-24-32"
icon_mic="M42 12a12 12 0 0 0-24 24l12 6 48 42 10-12-42-48zl-24 24z"
icon_warn="M48 48l24 30h-48zm3 6h-6v12h6zm0 15h-6v6h6z"
icon_phone="M48 2h-12a22 46 0 1 0 0 92h6v-24a18 24 0 1 1 0-48z"
icon_key="M36 48a18 18 0 1 0 12 12l12-12 0-6 6 0 3-3 0 -4 2 0 0-2 4 0 0-4 4-4 0-12-6 0zm6 0l30-30m-36 48a6 6 0 1 1 -6 -6z"
icon_flag="M12 80v-64h6v2h-2v2h70v48h-70v16"
icon_video_cam="M36 30c0 8-12 8-12 0s12-8 12 0zm-18-12v12c0-16 24-16 24 0v-12c0-16-24-16-24 0zm24 12c0 16-24 16-24 0v48c0 16.12 24 16.406 24 0zm0-6h6v-12h24c7 0 12 5 12 12v24h-36v-12h-6"
icon_bar_top="M18 12h60v6h-60z"
icon_bar_bottom="M18 78h60v6h-60z"
icon_bar_left="M12 18h6v60h-6z"
icon_bar_right="M78 18h6v60h-6z"
icon_arrow_right="M48 30v12h-12v12h12v12l24-18z"
icon_arrow_left="M48 30v12h12v12h-12v12l-24-18z"
icon_arrow_up="M48 30l18 24h-12v12h-12v-12h-12z"
icon_arrow_down="M30 48h12v-12h12v12h12l-18 24z"
#TODO for better arrow names see https://en.wikipedia.org/wiki/Arrow_(symbol)

icon_battery_empty="$icon_cylinder$icon_reverse_cylinder_max$icon_warn"
icon_battery_low="$icon_cylinder$icon_reverse_cylinder_large"
icon_battery_med="$icon_cylinder$icon_reverse_cylinder_med"
icon_battery_high="$icon_cylinder$icon_reverse_cylinder_small"
icon_battery="$icon_cylinder"


background_touch_right="M48 96a48 48 0 0 1 0-96h48v96z"
background_touch_left="M0 0h48a48 48 0 1 1 0 96h-48z"
background_touch_top="M0 0h96v48a48 48 0 0 1-96 0z"
background_touch_bottom="M0 96h96v-48a48 48 0 0 0-96 0z"
background_circle="M0 47v1a48 48 0 1 0 0-1z"
background_rect="M0 0h96v96h-96z"
background_rounded_rect="M0 6q0-6 6-6h84q6 0 6 6v84q0 6-6 6h-84q-6 0-6-6z"
background_rounded_rect2="M0 12q0-12 12-12h72q12 0 12 12v72q0 12-12 12h-72q-12 0-12-12z"
background_rounded_rect3="M0 18q0-18 18-18h60q18 0 18 18v60q0 18-18 18h-60q-18 0-18-18z"
background_rounded_rect4="M0 24q0-24 24-24h48q24 0 24 24v48q0 24-24 24h-48q-24 0-24-24z"
background_rounded_rect5="M0 30q0-30 30-30h36q30 0 30 30v36q0 30-30 30h-36q-30 0-30-30z"
background_rounded_rect6="M0 36q0-36 36-36h24q36 0 36 36v24q0 36-36 36h-24q-36 0-36-36z"
background_rounded_rect7="M0 42q0-42 42-42h12q42 0 42 42v12q0 42-42 42h-12q-42 0-42-42z"
background_rounded_rect8="M0 45q0-45 45-45h6q45 0 45 45v6q0 45-45 45h-6q-45 0-45-45z"
background_clear_button="M0 42q0-42 42-42h12q42 0 42 42v12q0 42-42 42h-12q-42 0-42-42zM0 48a48 48 0 1 0 0-0.1z"
#add more paths above here: ...

#normally this would be sourced from an external config file... for themes
num_colors=2
color0="#777"
color1="#bbb"

genicon(){
local color_count=0
echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">'
while [ "$1" ]; do
	local color=`eval echo \\${color$((color_count%num_colors))}`
#todo add more attributes: stroke, stroke-width, opacity, etc...
	echo "	<path fill=\"${color}\" d=\"${1}\"/>"
	color_count=$((1+color_count))
	shift
done
echo "</svg>"
}

rounded_rect(){
	x=0 y=0 width=96 height=96 rx=45 ry=45
	echo "<path d=\"M${x} $((y+ry))
q0-${ry} ${rx}-${ry}h$((width-2*rx))
q${rx} 0 ${rx} ${ry}v$((height-2*ry))
q0 ${ry}-${rx} ${ry}h-$((width-2*rx))
q-${rx} 0-${rx}-${ry}z\"/>"
}

#usage
genicon  "$background_rounded_rect8" "$icon_laptop"  >laptop.svg
#genicon "$icon_paper" "$icon_pencil" >notes2.svg
#rounded_rect

[technosaurus]

I started doing some 16x8 fonts to add to the icons... so far I am up to Q/q. They all use relative paths and use a move at the end to put it into the upper right corner so that if subsequent letters get pasted to the path, they render as actual text (on our 96px icons that would be up to 4 high by 8 wide)

Just to test them out I made this SVG text generator code
usage:
text2svg "The quick brown fox jumped over the lazy dog
Hello World" > my.svg

Code: Select all

#!/bin/sh
maxlength=0
length=0
height=16
text="$1"
while [ "$text" ]; do
	length=$((length+8))
	case "$text" in
		"	"*)S="${S}m16 0";length=$((length+8));;
		" "*)S="${S}m8 0";;
		!*)S="${S}m4 2v10m0 1v1m4-14";;
		\"*)S="${S}m3 3v3m2-3v3m3-6";;
		\#*)S="${S}m2 4v8m4-8v8m-5-2h6m-6-4h6m1-6";;
		\$*)S="${S}m2 12a2 3 0 1 0 2-4a2 3 0 1 1 2-4m-2-3v14m2-4";;
		%*)S="${S}m2 2v1m4-1l-4 12m4-1v1m2-14";;
		\&*)S="${S}m6 4a2 2 0 1 0-3 3a3 3 0 1 0 4 4m0 2l-4-6m5-7";;
		\'*)S="${S}m4 3v3m4-6";;
		\(*)S="${S}m4 14q-3-6 0-12m4-2";;
		\)*)S="${S}m4 14q3-6 0-12m4-2";;

		0*)S="${S}m2 7a2 4 0 1 1 4 0v2a2 4 0 1 1 -4 0zm2 0v2m2-8.1";;
		1*)S="${S}m3 4l1-1v11m4-14";;
		2*)S="${S}m2 4a2 3 0 1 1 3 5l-3 4h4m2-13";;
		3*)S="${S}m2 4a2 2 0 1 1 1 3m0 0a2 3 0 1 1-1 4m6-11";;
		4*)S="${S}m2 2v6h4v6-12l2-2";;
		5*)S="${S}m2 14h2a2 2 0 1 0 -2-6v-5h4m2-3";;
		6*)S="${S}m3 8a2 3 0 1 1 -1 1l4-7m2-2";;
		7*)S="${S}m2 3h4l-4 11m6-14";;
		8*)S="${S}m3.5 7a2 2 0 1 1 1 0a2 3 0 1 1 -1 0zm4.5-7";;
		9*)S="${S}m2 14l4-6a2 3 0 1 0 -1 1m3-9";;
		A*)S="${S}m1 14l3-12l3 12m-1-4h-4m6-10";;
		B*)S="${S}m2 2a3 2 0 1 1 0 5a2.5 2 0 1 1 0 7zm6-2";;
		C*)S="${S}m6 4a2.5 6 0 1 0 0 8m2-12";;
		D*)S="${S}m2 2a4 6 0 1 1 0 12zm6-2";;
		E*)S="${S}m6 14h-4v-12h4m-4 6h3m3-8";;
		F*)S="${S}m2 14v-12h4m-4 6h3m3-8";;
		G*)S="${S}m6 4a2.5 6 0 1 0 0 8v-2h-1m3-10";;
		H*)S="${S}m2 2v12-6h4v6-12m2-2";;
		I*)S="${S}m2 2h4-2v12h2-4m6-14";;
		J*)S="${S}m4 2h2v8q0 4-4 4m6-14";;
		K*)S="${S}m2 2v12-7l4 7-4-7 4-5m2-2";;
		L*)S="${S}m2 2v12h4m2-14";;
		M*)S="${S}m2 14v-12l2 6 2-6v12m2-14";;
		N*)S="${S}m2 14v-12l4 12v-12m2-2";;
		O*)S="${S}m6 8a2 6 0 1 0 0 .1zm2-8.1";;
		P*)S="${S}m2 2a3 2 0 1 1 0 5v7zm6-2";;
		Q*)S="${S}m6 8a2 6 0 1 0 0 .1zm-2-1.1l3 7m1-14";;
		R*)S="${S}m2 14v-12a3 2 0 1 1 0 5l4 7m2-14";;
		S*)S="${S}m2 12a2 3 0 1 0 2-4a2 3 0 1 1 2-4m2-4";;
		T*)S="${S}m1 2h6-3v12m4-14";;
		U*)S="${S}m2 2v10q2 4 4 0v-10m2-2";;
		V*)S="${S}m2 2l2 12 2-12m2-2";;
		W*)S="${S}m2 2l1 12 1-6 1 6 1-12m2-2";;
		X*)S="${S}m2 2l4 12m-4 0l4-12m2-2";;
		Y*)S="${S}m2 2l2 6v6-6l2-6m2-2";;
		Z*)S="${S}m6 14h-4l4-12h-4m6-2";;
		
		_*)S="${S}m1 15h6m1-15";;
		a*)S="${S}m6 9a2 3 0 1 0 0 3v2-7m2-7";;
		b*)S="${S}m2 9a2 3 0 1 1 0 3v2-12m6-2";;
		c*)S="${S}m6 9a2 3 0 1 0 0 3m2-12";;
		d*)S="${S}m6 9a2 3 0 1 0 0 3v2-12m2-2";;
		e*)S="${S}m6 12a2 3 0 1 1 0-2h-4m6-10";;
		f*)S="${S}m6 2q-4-0-4 4v1h2-2v7m6-14";;
		g*)S="${S}m6 9a2 3 0 1 0 0 3v-5 7q-2 2-4 0m6-14";;
		h*)S="${S}m2 2v12-4a2 2 0 1 1 4 0v4m2-14";;
		i*)S="${S}m4 6v1m0 1v6m4-13";;
		j*)S="${S}m4 7v1m0 1v5q0 2-2 2m4-14";;
		k*)S="${S}m2 2v12-4l4 4-4-4 4-2m2-8";;
		l*)S="${S}m4 2v12m4-14";;
		m*)S="${S}m2 8v6-4a1 2 0 1 1 2 0v4-4a1 2 0 1 1 2 0v4m2-14";;
		n*)S="${S}m2 8v6-4a2 2 0 1 1 4 0v4m2-14";;
		o*)S="${S}m6 10a2 3 0 1 0 0 .1zm2-10.1";;
		p*)S="${S}m2 9a2 3 0 1 1 0 3v4-8m6-8";;
		q*)S="${S}m6 9a2 3 0 1 0 0 3v4-8m2-8";;
		r*)S="${S}m2 8v6-4a2 2 0 1 1 4 0m2-10";;
		s*)S="${S}m2 13q4 0 2-2t2-2m2-9";;
		t*)S="${S}m4 6v8-6h2-4m6-8";;
		u*)S="${S}m2 8v4a2 2 0 1 0 4 0v2-6m2-8";;
		v*)S="${S}m2 8l2 6 2-6m2-8";;
		w*)S="${S}m2 8l1 6 1-4 1 4 1-6m2-8";;
		x*)S="${S}m2 8l4 6m-4 0l4-6m2-8";;
		y*)S="${S}m2 8l2 4l2-4-4 8m6-16";;
		z*)S="${S}m2 8h4l-4 6h4m2-12";;
		"
"*)S="${S}M0 $((height))"
		height=$((height+16))
		[ $length -gt $maxlength ] && maxlength=$((length-8))
		length=0
		;;
	esac
	text="${text#?}"
done
[ $length -gt $maxlength ] && maxlength=$length
echo "<svg viewBox=\"0 0 ${maxlength} ${height}\">
	<path stroke=\"#fff\" fill=\"none\" d=\"$S\"/>
</svg>"

Note: puppy's forum adds spaces at the ends of code block lines when you cut and paste it ... you'll have to remove them for some parts to work

If you just strip out the length and height bits and the svg xml, the path "$S" can be use to overlay another SVG. It can replace a text box with x and y offsets by prepending it with "M${x_offset} ${y_offset}"