This is a guide on the whole pipeline used for utilizing Descriptive SVG/dsvg

dsvg is a proof of concept technology for easily adding the ability to describe sections of images

IMPORTANT: The Inkscape GUI may be slightly different for you, if you run into difficulties see if you can figure out what to do based on the steps I take and if you need more help check the Inkscape Learn page: https://inkscape.org/learn/

Requirements

A quick note on requirements

While I list Inkscape here this is just what I feel I can personally recommend, everything required for a descriptive svg can be accomplished in other programs and even in a text editor if you know how to handle xml

Note though that you may need to modify the Javascript as it is in this proof of concept if you use another program

Creating the SVG

Launch Inkscape

Open the image you'd like to describe

Screenshot showing the Inkscape start menu

First click the Open button

Screenshot showing the Inkscape file browser

Next navigate to and choose your image in the file browser, once you've done this click Open

Screenshot showing the options you are given after selecting a raster image in Inkscape

Next make sure to choose to embed the image, the other options are up to your taste but leaving them on default should cause no issues, once you're done, click OK

Add your section

Screenshot showing the Rectangle tool having drawn a black square over an image

Now you'll want to draw an element over the section you want to describe, Inkscape has multiple tools for this, for now we'll use the Rectangle tool and draw a section that will be used to describe the background

Well, now we can't see anything.

Screenshot showing a more transparent black square in the place of the old one

Let's drop the transparency in the Fill menu a bit

Screenshot showing a version of the black square with a black outline To make the boundaries a bit more clear let's also add a stroke to the section in the Stroke paint tab

Add your data

Screenshot showing the Object menu being clicked and Object properties being clicked in the submenu

Now we need to add some data to the section, first let's open up the Object properties menu

Screenshot showing the Object Properties menu

In the Object Properties Menu which will be displayed in the same panel as the Stroke options we worked with earlier needs to have the Properties section clicked so we can add our data

Screenshot showing the expanded Properties section

Now depending on the section you have created you will want to set an ID that starts with sect- and ends with a 3 digit count of the section, meaning that if this is the first section it should be labeled sect-001.

Next you'll want to decide on a Title and Description, note that these will be vital so really put some thought into it.

After you're done click Set.

Wrapping up in Inkscape

Well, earlier we made a mistake, a black overlay will not cooperate with our CSS code in a little, due to it recoloring using a hue shifting filter, so we need to adjust it.

Screenshot showing the image from earlier with a blue overlay instead of black

That's better, blue will hue shift better and give a more distinct visual effect for some users

Let's look at another example real quick

Screenshot showing a sky image with highlighted sections, one is green which is easier to see and some are blue which are harder to see against the sky

Here we made the mistake of making some of the overlay blue which makes it hard to make out the sections initially, changing it to green easily fixes this

Finally let's export

Screenshot showing the Export option being clicked in the submenu of File

Click File > Export

Screenshot showing the Export options

Select Page in the menu that appears on the right, then choose Plain SVG it should autoname the output based on the original filename but if you want to change it or the output location click the Folder icon next to the filename. When you're done click Export. This may take a second but Inkscape tells you it's rendering at the bottom of the screen and once this message is gone your SVG should be ready.

Using dsvg

Resources

How to

Once you've downloaded dsvg.css and dsvg.js you'll want to include them in the head of your page like this:

  <link rel="stylesheet" type="text/css" href="res/css/dsvg.css">
  <script src="res/js/dsvg.js"></script>

Note: The locations can be wherever you desire but make a note of the css location for a later step

Next you'll want to add your SVG, this can be done like so:

  <object class="descriptivesvg" type="image/svg+xml" data="res/img/ricky_test.svg"></object>

Note: the class descriptivesvg is required

Finally you'll want to set your page to run the SVG setup function after the rest of the page loads, we do this by adding this code just before the close of the body tag:

  <script>
    window.onload = (event) => {
      dsvg_load("res/css/dsvg.css");
    };
  </script>

Note: replace the argument in dsvg_load with the path of your dsvg.css from earlier

Now you should be ready to go, if you have issues you can ping me at me@agie.gay