AndroidSVG: How to dynamically change Inkscape svg color

Question

AndroidSVG allows for dynamic color change as explained here.

The following code works for 95% of my icon library ...

SVGImageView svgIV;
...... 
String color = "#FEFBDE"
svgIV.setCSS(String.format("* { fill:%s; }", color););

... but fails on Inkscape SVGs such as this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="64"
   height="64"
   id="svg2"
   style="display:inline">
  <defs
     id="defs4" />
  <g
     transform="translate(403.45398,-1106.6063)"
     id="layer1"
     style="display:inline">
    <g
       transform="matrix(7.6594323,0,0,7.6594323,2702.0005,-7795.5738)"
       id="g3766">
      <path
         d="m -401.264,1167.506 0,2.8346 1.41732,0"
         id="path4668"
         style="fill:none;stroke:#000000;stroke-width:0.53149605;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
      <path
         d="m -401.264,1162.5164 c 0,0 -0.5132,-0.012 -0.5132,0.6511 0,0.3318 0,0.1926 0,0.5423 0,0.3989 -0.64122,0.3626 -0.64122,1.0261 0,0.5996 0.047,0.4425 0,0.8135 -0.047,0.371 -0.76981,0.356 -0.76981,1.1045 0,0.9955 0.64122,0.8521 0.64122,0.8521 l 1.28301,0"
         id="path4711-1"
         style="fill:none;stroke:#000000;stroke-width:0.53149605;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
      <path
         d="m -401.264,1162.5164 c 0,0 0.5132,-0.012 0.5132,0.6511 0,0.3318 0,0.1926 0,0.5423 0,0.3989 0.64122,0.3626 0.64122,1.0261 0,0.5996 -0.047,0.4425 0,0.8135 0.047,0.371 0.76981,0.356 0.76981,1.1045 0,0.9955 -0.64122,0.8521 -0.64122,0.8521 l -1.28301,0"
         id="path4711-1-3"
         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.53149605;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
    </g>
  </g>
</svg>

What, if any, is the necessary CSS?

On reflection, this may be a more general CSS question: How to override part of a style?

score 1 · Answer 1 · answered Oct 23 '20 at 17:08

Normally (in CSS) the way you would achieve this would be via use of the !important flag.

svgIV.setCSS(String.format("* { fill:%s !important; }", color););

Unfortunately, the CSS system in AndroidSVG does not yet support !important. It's on my TODO list.

In the meantime, you will need to convert those SVGs to use either attributes (fill="whatever") or CSS. You can easily convert those files to use attribute form, by loading them into Inkscape and save as "Optimized SVG".

Bad Loser · Answer 2 · 2020-10-29T23:58:45.800

0

This fork was created in response to the question.

It allows full color control over any .svg via a user-defined callback and is great for users who do not wish to manually convert 2,735 Inkscape definitions to conform with the current restriction.

edited Oct 29 '20 at 23:58

answered Oct 29 '20 at 23:52

Bad Loser

3,065
1
19
31

AndroidSVG: How to dynamically change Inkscape svg color

2 Answers2