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.
SVBraille
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
- Replaced the list of x values with a full group of Use elements set up with the correct X values based on the 6.92mm cell spacing measurement. The group can be copied and pasted down in your drawing.
- Additional lines of braille can use the same Copy/Paste from the comment in the defs section, just add a transform="translate(0, 10.72mm)" attribute to the group object. Add 10.72mm more to the y value for each subsequent line you create. You can also use the Y attribute i the Use elements themselves to adjust their vertical position relative to the previous lines.n
- Make sure to wrap all your lines of braille in one master group element to control the overall placement of all the lines on the page or to add any other CSS styling or effects to the braille as a whole!
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.
| 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 | |
| #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
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.