Você conhece o estilo SVG?

Se você usa alguma ferramenta de análise estática em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela também pode verificar se você está referenciando variáveis não declaradas. A maioria dos SVGs que você encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.

A coloração básica pode ser feita definindo dois atributos no nó: fill e stroke. fill define a cor dentro do objeto e stroke define a cor da linha desenhada ao redor do objeto. Você pode usar os mesmos esquemas de nomenclatura de cores CSS que você usa em HTML, independentemente de serem nomes de cores (que é red), Valores RGB (que são rgb(255,0,0)), valores de Hex, valores RGBA, etc.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

O fill="purple" acima é um exemplo de um atributo apresentacional. Curiosamente, e ao contrário de estilos embutidos como style="fill: purple" que também é um atributo, os atributos de apresentação podem ser sobrescritos pelo CSS definidos em uma folha de estilos. Daí se você fez algo como svg { fill: blue; } ele irá substituir o preenchimento roxo que foi definido.