How to make a black&white SVG symbol where the black can be modified

Question

I would like to create a black&white SVG symbol where the black can be changed to another colour, while keeping the white (background) white.

I'm rather new to QGIS and don't have programming skills, so I will create it with Illustrator and modify the file code with TextEdit.

This is a follow-up to Creating svg symbols that have modifiable fill color, stroke color and stroke width

Here's the code of a black&white symbol I exported with Illlustrator:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 34.87 34.87">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }
    </style>
  </defs>
  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
  <g>
    <g id="Logos">
      <g>
        <g>
          <polygon class="cls-1" points=".43 .43 34.44 .43 34.44 34.44 .43 34.44 .43 .43 .43 .43"/>
          <path d="M34.87,34.87H0V0h34.87v34.87ZM.85,34.02h33.17V.85H.85v33.17Z"/>
        </g>
        <polyline points="3.06 3.57 31.92 3.57 31.92 3 3.06 3 3.06 3.57"/>
        <path d="M2.95,27.73l.52-3.64h6.23v4.3H3.52c-.32,0-.58-.26-.58-.58,0-.03,0-.05,0-.08h0"/>
        <path d="M10.85,26.95c0-1.67,1.36-3.03,3.03-3.03s3.03,1.36,3.03,3.03-1.36,3.03-3.03,3.03-3.03-1.36-3.03-3.03h0"/>
        <path d="M18.07,26.95c0-1.67,1.36-3.03,3.03-3.03s3.03,1.36,3.03,3.03-1.36,3.03-3.03,3.03-3.03-1.36-3.03-3.03h0"/>
        <polyline points="3.05 31.87 31.92 31.87 31.92 30.71 3.05 30.71 3.05 31.87"/>
        <polyline points="31.92 28.39 25.28 28.39 25.28 24.06 31.92 24.06 31.92 28.39"/>
        <path d="M18.1,11.23h13.86v-1.17h-11.26l3.33-2.31-6.5-3.76-6.5,3.76,3.32,2.31h-7.39c-.87,0-1.6.67-1.72,1.52l-1.57,11.21h28.29v-5.77l-13.86-.03c-.32,0-.58-.26-.58-.58s.26-.54.58-.54h13.86v-1.16h-13.86c-.32,0-.58-.26-.58-.58-.03-.19.26-.58.58-.58h13.86v-1.17h-13.86c-.32,0-.58-.26-.58-.58s.26-.58.58-.58ZM9.92,16.4c0,.32-.26.58-.58.58h-3.03c-.32,0-.58-.26-.58-.58,0-.03,0-.05,0-.08l.65-4.59c.07-.49.29-.51.58-.51h2.38c.32,0,.57.24.57.56v4.62ZM16.37,10.06l-3.19-2.22,4.35-2.5,4.35,2.51-3.2,2.22h-2.3Z"/>
      </g>
    </g>
  </g>
</svg>

Answer 1

To use the QGIS fill property, you must set the svg property to param(fill). So your first coloured polyline should look like this:

<polyline fill="param(fill) #000" points="3.06 3.57 31.92 3.57 31.92 3 3.06 3 3.06 3.57"/>

The "#000" after the parameter specifies the default value if the QGIS property is not set.

In addition, QGIS does not seem to support classes in SVG symbols. Therefore you have to define the fill colour, also for the white background:

<polygon fill="#fff" points=".43 .43 34.44 .43 34.44 34.44 .43 34.44 .43 .43 .43 .43"/>
<path fill="#fff" d="M34.87,34.87H0V0h34.87v34.87ZM.85,34.02h33.17V.85H.85v33.17Z"/>

Addition:

It is also possible to set the fill property of a group so that not every element has to be edited. To do this, all coloured elements must be enclosed in a group (in this case lines 19 - 25). The group would then be defined as follows:

<g fill="param(fill)">
...
</g>

The background colour can also be defined in the same way: <g fill="#fff"> (line 14)