File talk:Digit 8 small.svg

The digit 8

Seven-segment digit

A subset of two to seven from seven possible segments (strokes) form each seven-segment digit,

digit	0	1	2	3	4	5	6	7	8	9
strokes	6	2	5	5	4	5	6	3	7	6

For the example at the right all seven hexagons are needed. The SVG coding may consist of the lines

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="300" height="500" viewBox="0 0 12 20">
<path fill="#D00" stroke="#FFF" stroke-width=".08" d="

followed by the commands for the needed strokes,
and then closed by the final "/> </svg>.

Strokes order

The common numbering order for the seven strokes is:

Digit		0	1	2	3	4	5	6	7	8	9
1 (a)	top line,	×		×	×		×	×	×	×	×
2 (b)	right upper,	×	×	×	×	×			×	×	×
3 (c)	right lower,	×	×		×	×	×	×	×	×	×
4 (d)	ground line,	×		×	×		×	×		×	×
5 (e)	left lower,	×		×				×		×
6 (f)	left upper,	×				×	×	×		×	×
7 (g)	middle line.			×	×	×	×	×		×	×
Segments		6	2	5	5	4	5	6	3	7	6

In this example, each outline of the strokes is drawn from one of the two points to the other one and then back.

This outline can be drawn either clockwise or counter-clockwise, and it can be drawn either from the left (or upper) point to the right (or lower) point, or the other direction.

4,2	10,2
3,10	9,10
2,18	8,18

There are six points where strokes may join. For this example,they are → → →

The coding for each one of the seven strokes may look like

№	stroke	left/upper to right/lower	z≙	right/lower to left/upper	z≙
a	top line	M4,2ℓ1-1h4ℓ1,1-1,1h-4z	-1-1	M10,2ℓ-1-1h-4ℓ-1,1 1,1h4z	ℓ1-1
b	right upper	M10,2ℓ-1,1-1,6 1,1 1-1 1-6z	-1-1	M9,10ℓ1-1 1-6-1-1-1,1-1,6z	ℓ1,1
c	right lower	M9,10ℓ1,1-1,6-1,1-1-1 1-6z	ℓ1-1	M8,18ℓ-1-1 1-6 1-1 1,1-1,6z	-1,1
d	ground line	M2,18ℓ1-1h4ℓ1,1-1,1h-4z	-1-1	M8,18ℓ-1-1h-4ℓ-1,1 1,1h4z	ℓ1-1
e	left lower	M3,10ℓ1,1-1,6-1,1-1-1 1-6z	ℓ1-1	M2,18ℓ-1-1 1-6 1-1 1,1-1,6z	-1,1
f	left upper	M4,2ℓ-1,1-1,6 1,1 1-1 1-6z	-1,1	M3,10ℓ1-1 1-6-1-1-1,1-1,6z	ℓ1,1
g	middle line	M3,10ℓ1-1h4ℓ1,1-1,1h-4z	-1-1	M9,10ℓ-1-1h-4ℓ-1,1 1,1h4z	ℓ1-1

When the next stroke is drawn from the end point of the previous one, no positioning command is needed.

The ℓ command after the first M-tupel is just for changing from absolute to relative adressing, and not needed when relative adressing is valid.

The digit 3

To draw e.g. the digit 3, it needs the five strokes (a-b-g-c-d) like

M10,2ℓ-1-1h-4ℓ-1,1 1,1h4z
M10,2ℓ-1,1-1,6 1,1 1-1 1-6z
M9,10ℓ-1-1h-4ℓ-1,1 1,1h4z
M8,18ℓ-1-1 1-6 1-1 1,1-1,6z
M8,18ℓ-1-1h-4ℓ-1,1 1,1h4z

or, better compressed to save 16 bytes

m10,2-1-1h-4ℓ-1,1 1,1h4zℓ-1,1-1,6 1,1 1-1
1-6zm-1,8-1-1h-4ℓ-1,1 1,1h4zm-1,8-1-1 1-6
1-1 1,1-1,6zℓ-1-1h-4ℓ-1,1 1,1h4z

Another example

all strokes

In the Red set all 128 possible stroke combinations are shown. Each one of the seven strokes is either grey or red. The number 8 consists of red strokes only, of course, while a grey-only drawing exists as well.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="192" height="320" viewBox="-1 -1 12 20">
<path stroke="#FFF" stroke-width=".25" fill="#F00"
d="M1,1 2,0 8,0 9,1 8,2 2,2M9,1 10,2 10,8 9,9
8,8 8,2M9,9 10,10 10,16 9,17 8,16 8,10M9,17 8,18
2,18 1,17 2,16 8,16M1,9 0,8 0,2 1,1 2,2 2,8M1,17
0,16 0,10 1,9 2,10 2,16M1,9 2,8 8,8 9,9 8,10 2,10"/>
</svg>

strokes e + g

All the other 126 drawings contain both colors and need two SVG paths.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="192" height="320" viewBox="-1 -1 12 20">
<g stroke="#FFF" stroke-width=".25" fill="#DDD">
<path d="M1,1 2,0 8,0 9,1 8,2 2,2
M9,1 10,2 10,8 9,9 8,8 8,2M9,9 10,10
10,16 9,17 8,16 8,10M9,17 8,18 2,18
1,17 2,16 8,16M1,9 0,8 0,2 1,1 2,2 2,8"/>
<path d="M1,17 0,16 0,10 1,9 2,10 2,16
M1,9 2,8 8,8 9,9 8,10 2,10" fill="#F00"/>
</g></svg>

no strokes

Relative coordinates allow a smaller file size:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="192" height="320" viewBox="0 0 12 20">
<path d="m10,2-1-1h-6l-1,1 1,1h6zl-1,1v6l1,1
1-1v-6zm0,16-1-1v-6l1-1 1,1v6zl-1-1h-6l-1,1
1,1h6zm-8-8-1,1v6l1,1 1-1v-6zl-1-1v-6l1-1
1,1v6zl1,1h6l1-1-1-1h-6z" fill="#DDD"
stroke="#FFF" stroke-width=".25"/>
</svg>

Previous version

create much larger file sizes because of much more complicated coding with a lot of redundancies:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="192px" height="320px" viewBox="-1 -1 12 20">
<g id="abcdefg" style="fill-rule:evenodd; stroke:#FFFFFF; stroke-width:0.25; stroke-opacity:1;
 stroke-linecap:butt; stroke-linejoin:miter;">
  <polygon id="a" points=" 1, 1  2, 0  8, 0  9, 1  8, 2  2, 2" fill="#FF0000"/>
  <polygon id="b" points=" 9, 1 10, 2 10, 8  9, 9  8, 8  8, 2" fill="#FF0000"/>
  <polygon id="c" points=" 9, 9 10,10 10,16  9,17  8,16  8,10" fill="#FF0000"/>
  <polygon id="d" points=" 9,17  8,18  2,18  1,17  2,16  8,16" fill="#FF0000"/>
  <polygon id="e" points=" 1,17  0,16  0,10  1, 9  2,10  2,16" fill="#FF0000"/>
  <polygon id="f" points=" 1, 9  0, 8  0, 2  1, 1  2, 2  2, 8" fill="#FF0000"/>
  <polygon id="g" points=" 1, 9  2, 8  8, 8  9, 9  8,10  2,10" fill="#FF0000"/>
</g>
</svg>

The previous versions

• define polygons instead of paths
• each one of the seven segments is defined separatly
• style-attributes fill-rule, stroke-opacity, stroke-linecap, stroke-linejoin repeat just the default
• color hex triplets are defined the long style
• fill value is defined not at group but at elementary level
• several descriptive ids are inserted for explanation
• units, indentions and spaces are used for better readability
• Wikimedia librsvg doesn't need DOCTYPE declarations

An identical output as from these ~958 bytes can be achieved with ~335 bytes.