Skip to main content
3 of 3
edited body; edited tags
PolyGeo
  • 65.4k
  • 29
  • 114
  • 345

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

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>