SVG slike lahko barvamo na različne načine. Vzrok zato tiči v različnih implementacijah vstavljanja SVG vektorskih slik na spletno stran. V nadaljevanju si bomo pogledali, kako slednje pobarvati v specifično barvo.

Barvanje vstavljenih (inline) in simbol SVG slik je enostavno. Vse kar potrebujemo je CSS koda “fill: + barva” in že se naša SVG slika obarva v izbrano barvo. Težava nastane v primerih, ko imamo SVG sliko v obliki klasične slike, se pravi v znački “<IMG…”.

See the Pen
CSS filter generator to convert from black to target hex color by Ziga (@pomagalnik)
on CodePen.

V teh primerih moramo uporabiti CSS “filter: invert, sepia, saturate, hue-rotate, brightness, contrast” z ustreznimi vrednostnimi za določene barve. K sreči imamo na voljo orodje, ki nam pomaga preračunati te vrednosti, avtor orodja je Barrett Sonntag. Pri uporabi bodite pozorni, saj značka filter ni podprta v IE brskalnikih. Vsi modernejši brskalniki slednjo podpirajo.