File talk:Braille8 Dots-4537.svg

Each Braille character consists of six (or eight) dot positions, arranged in a rectangle containing two columns of three (or four) dots each. Any dot may be raised at any position, which gives 2⁶=64 (or 2⁸=256) possible subsets.

Seen as a SVG drawing, the dots can be arranged in two groups of either raised or not-raised dots (one of these groups may be empty), representing each dot by either a black or white filled circle. Just by simple different arranging the 6 (or 8) dots within these groups, any of the 64 (or 256) characters can be drawn easily.

Braille U+285C

As an example, the present Braille character may be drawn with the following SVG code:

<?xml version="1.0" standalone="no"?>
<svg width="154" height="275" xmlns="...">
<g fill="white" stroke="black">
<rect width="154" height="275"/>
<circle cx="46.33" cy="46" r="14.5"/>
<circle cx="46.33" cy="107" r="14.5"/>
<circle cx="107.67" cy="168" r="14.5"/>
<circle cx="107.67" cy="229" r="14.5"/>
</g>
<circle cx="107.67" cy="107" r="15"/>
<circle cx="46.33" cy="229" r="15"/>
<circle cx="46.33" cy="168" r="15"/>
<circle cx="107.67" cy="46" r="15"/>
</svg>

One group comprises the outer rectangle and four of the dots, drawn with fill=white and stroke=black. The other group comprises the other dots, drawn with the (implied) fill=black and stroke=none.

Braille U+2800

The second group may also be drawn more efficiently as a single path when a majority of dots is raised:

<path stroke="#000" stroke-width="30" stroke-dasharray="0,61"
stroke-linecap="round" d="m107.67,46v62m-61.43,60v62"/>

This could be expanded to drawing only pathes instead of circles

<?xml version="1.0" standalone="no"?>
<svg width="154" height="275" xmlns="...">
<rect width="154" height="275" fill="white" stroke="black"/>
<path stroke="#000" stroke-width="30" stroke-dasharray="0,61"
stroke-linecap="round" d="m46.33,46v183m61.43-1V45"/>
<path stroke="#FFF" stroke-width="28" stroke-dasharray="0,61"
stroke-linecap="round" d="m46.33,46v183m61.43-1V45"/>
</svg>

Without the second path it gives the Braille letter U+28FF: .

The code could be a bit reduced by integer values for the "x" positions.

Transparent layout

To draw Braille graphics with no border and the background and the unraised dots transparent instead of colored white, six (eight) circles are needed arranged in two groups, as told above:

1. The raised dots need no attributes because «fill='black'» is the implied default attribute.
2. The unraised dots need the attributes «fill='none' stroke='black'» («stroke-width='1'» is implied default).

Braille U+2802

As an example, the code for U+2802 may consist of

<?xml version="1.0" standalone="no"?>
<svg width="154" height="275" xmlns="..."> 
<circle cx="108" cy="46" r="15"/>
<g stroke="#000" fill="none">
<circle cx="46" cy="46" r="15"/>
<circle cx="46" cy="108" r="15"/>
<circle cx="46" cy="169" r="15"/>
<circle cx="108" cy="108" r="15"/>
<circle cx="108" cy="169" r="15"/>
<circle cx="46" cy="229" r="15"/>
<circle cx="108" cy="229" r="15"/>
</g></svg>

with the first group comprising one dot. Simple moving circle commands from one group to another creates all 256 combinations.

Remark

To create raised and unraised dots with the same outer diameter, the above example would need r="14.5" instead of r="15" due to stroke-width="1" for unraised dots.

A valid SVG code for U+285C may therefore look like

<?xml version="1.0" standalone="no"?>
<svg width="154" height="275" xmlns="...">
<circle cx="108" cy="46" r="15" id="p4"/>
<circle cx="108" cy="108" r="15" id="p5"/>
<circle cx="46" cy="169" r="15" id="p3"/>
<circle cx="46" cy="229" r="15" id="p7"/>
<g stroke="#000" fill="none">
<circle cx="46" cy="46" r="14.5" id="p1"/>
<circle cx="46" cy="108" r="14.5" id="p2"/>
<circle cx="108" cy="169" r="14.5" id="p6"/>
<circle cx="108" cy="229" r="14.5" id="p8"/>
</g></svg>

If the name of an id attribute is just a number: (id="3") it will create an Invalid SVG.

 

W3C-validity not checked.