About SVGs flexibility: dark mode

As an owner of a cheap Wacom tablet, it’s quite simple for me to create “handmade” SVG files using, for example, a vector graphics editor, like Inkscape, Adobe Illustrator or Affinity Designer. After creating the file, with a text editor or IDE you can open it and read its code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    width="100%"
    height="100%"
    viewBox="0 0 516 517"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve"
    xmlns:serif="http://www.serif.com/"
    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">

    <path d="M176.207,107.015c2.995,..."/>
    
    <path d="M180.577,208.347c6.706,-20.119 13.374,..."/>

    ...
</svg>

It turns out that you could change this code and adapt to your needs. For example, you can style it to adapt its color according to the dark mode option:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<svg>
    <style>
        path {
            fill: black;
        }
        body.dark path {
            fill: white;
        }
    </style>

    <path
        d="..."
        fill="currentcolor"
    />
<!-- ... -->
</svg>

In this code snippet, the CSS class dark is the class I use to activate the dark mode in the body.

The same SVG file with the dark mode option enabled and disabled