SVG Projects

On This Page

Introduction

This page will highlight fun little research projects and tests that I've put together during my SVG studies. I'll also use this space to host the projects and creations of other creatives in this space! If you come up with something awesome that advances the use of SVG for tactile graphics and beyond, please Contact Me and I'll happily add your project to this page.

shapeCrafter Online SVG Editor

I created shapeCrafter as a means for anyone to jumpstart their SVG coding journey right within their browser. I wanted to build a blind-first and accessibility-first design system that let users quickly write, paste, or add in SVG shapes to an editor and bring up a rendered Embosser-ready view with the press of a button.

Key shapeCrafter Features:

Launch shapeCrafter (opens in new window)

Braille Converter Project

Oct 2025 - We can use the Tiger Braille29, Braille36, and other braille fonts directly in SVG using the Text shape. In order to get the braille to render correctly, we have to use the braille Unicode characters which are available in our operating system character palettes. In MacOS, I was painstakingly going into the character palette and grabbing one braille character at a time when adding braille to my SVG artwork, and eventually just built my own little text file that contained a quick reference guide so I could just go there to copy and paste the characters I needed when building braille words and phrases.

I started playing with Braille Blaster and noticed that I could type whole phrases and documents out and then export them as BRF files. BRF files are essentially braille ASCII files, so readable and printable by embossers, but not particularly useful for trying to depict and render braille in an SVG file. Then I searched for a means of converting BRF to Unicode on a whim, and sure enough, I found a command line tool that did just that!

Andrey Yakuboy created both a braille converter as a compilable app and also a hostable web service, where you can supply a BRF, Unicode, GOST, and a few other file types, and convert them seamlessly amongst each other. The whole page and service was written in Russian, so I used the translation feature of MacOS to help rewrite the HTML content, added my own styling and accessibility tweaks and features, and am now hosting an English version of his tool up on my personal site.

If you can export a BRF out of any braille typing tool, you can run that file through this converter to get the direct Unicode characters for the braille, then copy and paste all of those converted lines at once into an SVG text shape to put that braille into your projects. Text on paths, CSS effects, and much more can now be done using this method.

Braille Converter

This is a huge time saver, and absolutely replaces the need for the SVBraille project I built in lieu of not having the understanding of the use of braille unicode!

If you are interested in checking out the little braille unicode reference file I put together and just need a few braille characters here and there without having to go through the conversion process or your character palette, here's the link to download it directly:

Braille Unicode Text File - .txt Download

SVBraille (deprecated)

As mentioned back in the Text and Styling page, you can generally use fonts from your system to render text in your SVG drawings. However, I have not been able to utilize the Braille29 font on my Mac to get typed Braille to render when trying to add it to my projects.

Enter SVBraille! I took all of the Braille standards and measurements from the national Library Service and implemented them in a little SVG library that you can copy and paste directly into your own files. Instructions are written up in the file itself, but I'll reiterate them here.

Download SVBraille

Download the SVBraille.txt File - Updated Dec. 15th, 2023

Dec. 15th, 2023 Update Log

What is SVBraille?

SVBraille is just text set up within SVG Comments along with all the shapes and characters placed within a defs section. A group containing circle shapes set up with the exact measurements and dot spacing exists near the top of the file, and then there are individual groups referencing those dots with Use objects throughout the rest of the file in order to build all of the Grade 1 letters, symbols, and punctuation plus all of the single-character Grade 2 contractions.

To use the Braille, you'd paste all the contents of the SVBraille.txt file into your SVG file, create a new group object, and then start referencing the characters with individual Use objects. The individual dots can be referenced using the ids "#dot1", "#dot4", and so on. Each braille letter can be referenced with "#brl_a", "#brl_g", etc. The punctuation, Braille symbols, and Grade 2 characters are all near the end of the file.

How to Use SVBraille

Each Braille cell is spaced exactly 6.92mm apart from each other. When you use the Use objects to start building your line of Braille, we can think of them as an index of cells starting the count from 0. So the first character in the line would be 0, the second character would be an index of 1, the next would be an index of 2, and so on.

To get the exact cell placement on the X axis for the Use element, you multiply 6.92 by the index number of the cell and use that for the Use element X attribute. The following code will spell out "SVG" in all caps:

Note: In my latest update, I added a commented group in the defs section that contains 30 Use elements, all of them set to the correct x value to build a full line of braille. Just add the id of the character you want in the href attributes and delete any Use elements where you need a space.

<g id="svgGroup">
<use href="#dot6"/>
<use href="#dot6" x="6.92mm"/>
<use href="#brl_s" x="13.84mm"/>
<use href="#brl_v" x="20.76mm"/>
<use href="#brl_g" x="27.68mm"/>
</g>

You just add 6.92mm to the X attribute to get the position for every following cell in your line of Braille, and don't forget to account for spaces between the words!

You can add a transform attribute to the group object that contains the braille Use elements in order to move and position the Braille anywhere on your drawing. You can even make Braille purists mad by rotating the group or messing with the placements of the individual cells in a line just for fun!

When you start a new line of braille within the same group object, just copy and paste the line of Use elements again, but this time add a y="10.72mm" attribute to each one to move them down vertically in the canvas.

SVBraille ID Reference Table

Use this table for reference when picking the correct IDs for the Use href attributes for each of your Braille cells. If I missed a character, you can construct it by just directly referencing dot1-6 in separate Use elements with each of them set to the same X value.

SVBraille ID Reference
ID Value Definition
#dot1 - #dot6 Reference the individual dots of a braille cel.
#brl_a - #brl_z Braille letters. Just use #brl_ and follow it up with the letter you want.
#brl_num Braille Number character
#brl_ltr Braille Letter character
#brl_per Period
#brl_exc Exclamation Point
#brl_qst Question Mark
#brl_qt Quotation Mark
#brl_45, #brl_46, #brl_456 Braille operators for dots 4 and 5, dots 4 and 6, and dots 4, 5, and 6 respectively.
#brl_hyph Hyphen
#brl_semi Semicolon
#brl_cc Double Cs
#brl_en -en or Enough
#brl_in -in
#brl_ing -ing suffix
#brl_st, #brl_ch, #brl_ar, #brl_wh, #brl_gh, #brl_ou, #brl_ow, #brl_sh, #brl_ed, #brl_er, #brl_th, #brl_be Characters for st, ch, ar, wh,gh, ou, ow, sh, ed, er, th, and be.
#brl_with, #brl_of With and Of characters
#brl_for For character

Tactile Mapping Presentation Icons

If you attended the Sep. 7th, 2024 Tactile Mapping Event at the Lighthouse for the Blind in San Francisco, this is the entire SVG file that I created to demonstrate how tactile mapping icons and symbols could be created non-visually. This was part of the lightning talk Chancey Fleet and I gave on building tactile maps with SVG and non-visual design techniques.

The SVG file consists of 4 symbol drawings we tend to find on tactile maps; an elevator symbol, a compass rose, a stairwell, and a fence with fare gates.

The SVG Icons

Black on white tactile mapping symbols for an elevator, compass rose, stairwell, and a fence with fare gates.

Download the Tactile Mapping Icons SVG file

Tactile Map Icons SVG Code Explanation

Each icon in the file has a comment above the start of the code identifying each icon. The icons themselves are all wrapped in their own group element, using a translate transform to arrange them around the page in a 2x2 grid.

Note that by designing in this fashion, all of the coordinates can be written within the primary canvas space of a 200x200 unit square, and they do not have to be absolutely referencing the exact canvas coordinates on the other parts of the page. This makes it easier to construct elements by keeping the numbers small and easy to manage, then just using that translate to put the icons exactly where you want them to go.

The elevator is made up of one path object. The MoveTo coordinate starts off at the lower-left corner of the square, draws up, right, then down to create three edges of the square while leaving the bottom edge open. The crossing X lines in the middle of the square are made by setting the MoveTo points to one corner of the square, then drawing lines to the exact opposite corner coordinates.

The compass rose uses a circle to give tactile recognition of the element itself. The actual directional pointer is built out of a path with a straight line, then a separate MoveTo and LineTo section to draw the arrow point. A rotate transform is set on the base of the arrow to make it easy to rotate the arrow to the exact degree necessary to point to North in the map drawing.

The stairwell is built out of two path shapes, one to create the thick left, top, and right edges of the stairwell frame, and another path to build the horizontal riser lines. Individual MoveTo and Horizontal operators are used to create the stair riser lines themselves, spaced at even intervals vertically.

The fare gates and the fence are built out of a combination of a path and one rectangle shape, using the Use element to repeat the fare gate shape a few times horizontally. The path has two MoveTo and LineTo sections to make the left and right sections of the fence, with styling applied to make the line thick. One fare gate is created with one rounded rectangle shape, then the id of that rectangle is used by the Use elements to replicate the same shape across. This allows us to make quick changes to the first shape and have those changes get reflected in all of the other references to the gate shape.

Tactile Bingo Card Generator

A black and white Bingo grid, the top row containing squares spelling out BINGO and a 5x5 grid of numbers underneath. Each cell has both print text and braille.

July 26, 2025: Chancey messaged me asking if it would be possible to create tactile Bingo cards for a patron, and I jumped at the chance to try out another dynamic SVG generator script. In less than a day, I designed the Bingo card to have both raised letters and numbers along with braille in each cell, a free space square in the center of the grid, and wrote a Python script that exported out SVG files ready for the embosser!

Online Bingo Card Generator

For folks who don't want to go through the rigamarole of installing Python and playing in the Terminal, I've created a fully accessible online version of the generator. Just go to the site, enter the orientation and fonts you'd like to use, enter how many cards you'd like, and it will build all the SVGs and download them to your computer as a .zip file!

There are a variety of tools out there you can use to turn all your SVGs into PDFs, and then batch your PDFs together into one large PDF file which can then be printed directly out to an embosser to get all the cards printing at once.

Tactile Bingo Online Card Generator

Tactile Bingo Generator System Requirements

While this currently runs as a very simple script in Terminal, I'm working on turning it into a basic MacOS app for the card creation prompt. Will update here once I have it built, and will also create a Windows version. Here's the link for the script and a link for a sample Tactile Bingo card:

Download the Bingo.py Tactile Bingo Generator Script Download a sample Tactile Bingo SBG file

Designing the Bingo SVG

I started off by thinking about how large the individual squares should be. To cover most of an 8.5x11in. sheet of paper, I went with each square being 160x160 SVG units. That gave me a grid 800 units wide and 960 units tall, plenty of space vertically to center the grid and just within the horizontal margins of the paper. This shape would also scale well if we wanted to output it on a full sheet of braille paper.

I started dialing in the font size and placement within the header row of the Bingo card. These go across the top of the grid and only contain the BINGO letters along with the corresponding braille. I made the letters 70pt and put them in the upper-left corner of the square, giving me ample space to place the 36pt. braille in the lower-right corner of the square. To make this easy, I used the text-anchor attribute set to end for the braille, so I could position the anchor in the lower-right corner and all text would extend outwards to the left from there. Better than than trying to guesstimate where the anchor on the left should be and trying to figure out how much space the braille characters would need without running off the square.

After some testing and running into issues with Chrome messing up the braille font, I tweaked the Bingo letter row to just center the letters at the top of the squares, and placed the braille directly underneath the letters. This creates a more symmetric experience with the letters matching the number squares. Both the letters and the braille now use the text-anchor value of 'middle' to center them, and the text-anchors are placed exactly at 80 units horizontally across the square.

The text itself is currently written in Helvetica, which lends itself decently well when being run through an embosser. I made the header row squares have a thicker border than the number grid, and then got to work on the numbers. Each number square has the number in text and the braille centered, with the text above the braille. The number text was set to 68pt to make more room for the two digits I'd need in most of the cells of the grid. The centered braille is the same 36pt used in the header row.

Anticipating changes, I made sure to create individual classes for the text, numbers, and braille so I only had to adjust numbers from one place in the SVG file. Much much easier to make sweeping changes to a CSS class rather than having to do it for every individual element in the document. If I need to change the font later on, can just do it straight in the CSS classes.

After iterating a few times through my embosser, I landed on the positioning numbers that I liked and considered the SVG part finished. I now had the design code ready to bring into my Python script.

Dynamically Generating SVG with Python

Each letter column in Bingo has specific ranges of numbers. B has numbers 1 through 15, I has 16 through 30, and so on. I made these lists in Python, then made a number dictionary to pair each of the 75 numbers up with the unicode strings needed to represent each number in braille. All of the static SVG code went into variables using multi-line notation, letting me paste the SVG code directly between triple quotation marks to preserve formatting.

The dynamic part of the script uses a for loop iterating over a 5 number range and using f strings to place the SVG code for each square in each letter column. The lists of numbers would be shuffled, then the first five numbers of the shuffled list would be used to create each square, and the number would be used as the key for the braille number dictionary to provide the value of the unicode characters. The loop would do this for each of the letter columns, then I placed each variable containing the final SVG code into one list that would basically create the SVG file line by line.

The static code would get written into the file, then each square of the grid would get written for each of the letter columns, then the final static text would get written to properly end the SVG file. After a little more iteration, I added in the ability to type in how many cards you want to export when running the script, and all of the files will get generated right within the directory from where the script is being run.

That's a Bingo!