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 |