Descriptive SVG icon, a word bubble with some text pointing to the ocean in a simplistic black and white image of the sun beating down on the ocean
Author contact: me@agie.gay

Descriptive SVG (dsvg) Proof of Concept

What is this?

dsvg is an accessibility concept I've been stewing on for years, what if there was a way to give people more power to describe images by enabling the ability to describe specific sections?

How does it work?

dsvg leverages the built in features of svg that enable overlaying vector elements over raster graphics. This way in one file we can embed the image itself, the overlay vector graphics and utilize the vector graphics ability to embed data to create an interactive accessible experience with a fallback that screenreaders should be able to use

What's it going to cost?

If you know me you know there's no monetary cost (and if you don't you know now). All of the code is under 100 lines and there's absolutely nothing that should be computationally expensive, though I will do further tests on worse devices to get a more solid picture at some point.

Why do some of the overlays look janky?

I'm still pretty sick at the moment so setting up a drawing tablet was out of the question, regardless I wanted to show more customized sections so I just drew them with my mouse. You can most certainly create better smoother sections.

Do you have something weird you want to say about the project now?

I'm glad you asked! I do think I'd like to do a low end AR experiment with this where the descriptive tech can be overlaid on real images but as I'm working on other projects this will likely only materialize sooner rather than later if people express interest.

Find the guide here: guide.html

Example 1: Cat laying on a bed

Example 2: Untitled, 1969 by Mark Rothko

Example 3: Son of Man, 1946 by Rene Magritte

Example 4: Blue sky

Example 5: Cat laying on a couch

Example 6: Sign, 1925, Wassily Kandinsky, Oil on Cardboard