Blind SVG Study Guide

Last Site Update: Oct 25, 2024

Oct 25 Change Log

Table of Contents

Table of Contents

Why This Site exists

Welcome to the Blind SVG Study Guide. This website is a reconstruction of a published Google Doc that was initially built to help teach blind and low-vision folks how to code their own graphics with SVG.

Here you will find a breakdown of the essential elements and skills you'll need to start creating art and graphics with an ultimate output goal of having them embossed into tactile graphics and forms. SVG is widely used to make embossed graphics with embossers, raised-line prints with Swell-Form printing, and can even be used to generate extrusion maps for 3D printers.

Rather than focusing on the more visual, interactive, and web-based functions of SVG, this tutorial aims to de-clutter all of the information currently out there which was written for a sighted and web developer audience.

Instead of inundating you with abstract code or throwing in lots of extra ideas not covered in the overall text, each element is broken down into understandable chunks without straying from the overall theme of the section. Best practices, tips and tricks, and practical applications will be called out along the journey through the tutorial.

Who am I?

Glad you asked! I'm Marco Salsiccia, a senior accessibility specialist and blind UX/UI and graphic designer. I'm fully blind, and lost my vision very suddenly in 2014. Prior to the vision loss, I was a senior animator, VFX artist, a motion designer, and also worked as a quality assurance engineer for an animation software development company.

I worked on a few national ad campaigns, made lots of corporate videos, had some film and TV work under my belt, and ultimately was just hyper visual in almost every way. When I wasn't working, I was animating and building my own artistic projects at home, constantly sketching, drawing, or lost in a creative flow with nothing but my Wacom tablet, Illustrator, After Effects, or Photoshop, and a great Mac Production rig.

After going blind, I thought I had to leave my entire visual design world behind. I put away my tablet, deleted Adobe Creative Suite, and moved on into the world of accessibility. This career combines UX/UI design with my QA engineering skills, and has just been a natural progression for me so far.

When I attended the National Federation of the Blind conference in 2022, I was introduced to tactile graphics creation by Chancey Fleet from the New York Public Library Dimensions lab, specifically on how SVG could be used to render vector graphics ready for tactile production. I jumped at the chance to explore all this coding flow had to offer as it tapped directly back into my vector graphics abilities again, just exchanging pen and pencil tools and bezier curves for some syntax and some numbers.

When I'm not busy teaching companies how to build accessible websites and apps, I love to code and draw in my spare time, both physically with a Sensational Blackboard, and digitally through the methods you'll find within this site. I build websites from scratch, and I love being able to impart anything and everything I learn to anyone willing to listen when it comes to exploring this kind of creative process, and learning from others as they come across new workflows and projects as well.

How to Use this Site

Every page of the tutorial is mapped in the header of the site, and you'll find a previous, current, and next page navigation landmark at the bottom of each tutorial page for easy stepped navigation. The Table of Contents at the top of this page has a full site map with links to each heading on every page.

Take your time going through and understanding each code snippet and concept. You'll start picking up patterns and best practices as you make your way through each page. As you learn the functional parts of building SVG drawings, keep thinking about how you can use this to draw and create a variety of projects.

Every code snippet can be copied directly from the browser, either with the supplied Copy control that you'll find directly after each snippet, or by focusing a screen reader on the code and using the Copy Last Utterance command of whichever one you happen to be using.

Applying SVG in the Real World

The ability to create SVG artwork by hand has a tremendous amount of potential for blind and low-vision creatives as it immediately gives us access to the building blocks used by digital artists who specialize in Adobe Illustrator, Inkscape, and other vector graphics applications which are largely inaccessible.

Having the ability to design and construct our own tactile imagery allows us to curb the gap in overall image poverty experienced by blind people around the world. No longer having to rely on sighted artists and designers opens up many more creative outlets for us on our own terms.

Knowing how to read and render SVG imagery has many applications in both personal and professional development which will be highlighted throughout the site. Create your own illustrations, schematics, blueprints, charts and graphs, work with wireframes and layout, create functional tactile graphics, maps, data plots, and much much more.

If you find any errors or want to give me feedback or want to provide more info or an update, please contact me via email.

Current Tactile Graphics Standards

While a set of robust standards for tactile graphics currently does not exist for SVG usage, the Blind SVG Study Group and the NYPL Dimensions Lab have come up with a few good best practices to follow which I'll list here. Note that you'll learn how to follow these concepts within the tutorial:

This list will stay updated as we find out more about this art form together.

References & Resources