Feature request: replace colours

[GoogleCodeExporter]

The svg-android library allows you to substitute one colour for another at 
parse time.  Each of the parser methods have a variant that takes two extra 
parameters: searchColor and replaceColor.

This feature has been requested in AndroidSVG as well.

Some additional thoughts:

1. Having just a single search and replace color seems a bit limiting.

  I would imagine that having a new method:

  SVG.replaceColour(searchColour, replaceColour);

  that could be called multiple times to build up a colour map would be more useful.  Or perhaps:

   SVG.getColourMap().add(searchColour, replaceColour);
   SVG.setColourMap(newColourMap);

2. Perhaps other colour transformation options like:

   SVG.setColourMatrix(colourMatrix);

   Would that be useful to anyone?

3. Another possibility would be adding support for SVG Parameters 
(http://www.w3.org/TR/SVGParamPrimer/)

Please upvote and comment if you need, or would use, colour mapping 
functionality.

Your feedback is appreciated.

Original issue reported on code.google.com by [email protected] on 19 Jul 2013 at 9:50

[GoogleCodeExporter]

ColourMap would be a good idea.

Perhaps adding function to change saturation or tinting if it's possible.

Original comment by [email protected] on 19 Jul 2013 at 10:20

[GoogleCodeExporter]

I was wondering if it would make sense to use the id value.

so for instance if you give a <path> element an id, say id="Element1" then you 
can use that to update various attributes, for example fill.

i.e. SVG.updateFillByID (String id, newColour);

I'm looking at the source code and seeing if I can implement something myself. 
although I'm not a very good coder.

Original comment by [email protected] on 20 Aug 2013 at 7:00

[GoogleCodeExporter]

When I implement this feature, I probably will add the ability to restrict the 
changes to a portion of the document. Probably by id or class.

I wouldn't want to implement osoto's suggestion exactly as described though.  
If I implement the ability to modify the attributes and style of elements, I 
would want to do it in a more standard way and implement partial support for 
the SVG DOM.

So osoto's example would be more like:

svg.getElementById(id).getStyle().setProperty("fill", newColour);

Implementing DOM support would be quite a big job though, as it would require a 
fair amount of refactoring of the code.

Original comment by [email protected] on 20 Aug 2013 at 9:22

[GoogleCodeExporter]

Yeah, totally makes sense.

I had a look at the code, and I see your point about needing to refactor to get 
a nice clean solution implemented.

I might do some dirty hacks to suit my needs, which I'll of course be happy to 
share, although they will probably not be good enough to go into the main 
branch. If I get more comfortable with the code, I might do something cleaner 
as well.

btw, thanks a lot for the library and your continued support. It's really 
appreciated!

Original comment by [email protected] on 20 Aug 2013 at 12:05

[GoogleCodeExporter]

Why not "simply" allow to add CSS stylesheet?

With two modes, "standard" mode (overridden by tag's attributes) and an 
"override mode" (which is applied after and override even tag's attributes), 
most of the code is already there and it's more versatile.

Original comment by [email protected] on 31 Aug 2013 at 1:53

[GoogleCodeExporter]

Overriding styles via CSS makes sense.  It's a bit more work for the developer 
using the library but is a much more "standard" and flexible way of doing 
things.  You would be able to adjust other style properties and not just 
colours.

Although I am not sure about your first mode ("standard").  It goes against the 
rules on the order that styles are applied (1. attributes, 2. CSS, 3. "style" 
attribute)

Original comment by [email protected] on 31 Aug 2013 at 3:39

[GoogleCodeExporter]

In the following example, if I want to make it red, a 4th rule should be added, 
otherwise, the rect will be green.

SVG:
<rect x="50" y="50" width="100" height="100" style="fill:green" fill="pink"/>

CSS:
rect {
  fill: red;
}

1. attributes
2. CSS
3. "style" attribute
4. CSS override (not standard) so you can override the green to red in the 
example

Original comment by [email protected] on 1 Sep 2013 at 11:54

[GoogleCodeExporter]

I don't see that situation as a particular problem.  If you are using this 
feature, you wouldn't, or shouldn't use the style attribute.

Original comment by [email protected] on 1 Sep 2013 at 1:36

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I m looking forward to DOM support for getting specific elements, but i saw 
your source code implementing the svg parser by SAX.

What's your intention to achieve this 
"svg.getElementById(id).getStyle().setProperty("fill", newColour);"? Change the 
parsing to "org.w3c.dom" or implement the dom-like cache by SAX?

For now, the library parse the SVG file as a whole, i guess using "org.w3c.dom" 
is a viable method

Original comment by [email protected] on 14 Nov 2013 at 8:02

[GoogleCodeExporter]

I don't know yet.  I haven't thought about that subject enough yet to make a 
decision.

At the moment I parse into an object tree that is not very DOM-like.  The most 
likely approach would be to change that to one that is.

Original comment by [email protected] on 14 Nov 2013 at 8:02

[GoogleCodeExporter]

Parsing the whole file into a tree is necessary to properly render documents.  
So that wouldn't change.

Original comment by [email protected] on 14 Nov 2013 at 8:04

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Any news on this?

Original comment by [email protected] on 7 Aug 2014 at 7:47

[GoogleCodeExporter]

This would be a cool feature! Is there anything I can test?

Original comment by [email protected] on 17 Aug 2014 at 7:04

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Sorry for the lack of progress on this feature everyone.  I have just been very 
busy with my day job.  Rest assured it has a high priority.  

Original comment by [email protected] on 22 Sep 2014 at 2:55

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Thanks for your effort. :) 

I am tracing the source code and already found a private method 
getElementById() :)

I also want to add a method public Array<SVGElement> getElementsByClass(String 
class) 
(Class is many-to-many. One element can hv multiple classes, seperated by 
space; and multiple elements can comply to one class)
To Implement that, maybe a Map<String, Array<SVGElement>> is enough, and the 
implementation should be similar to your getElementById(). 

And if you allow ppl to get elements by anything, all your non-abstract 
protected classes should turn public

Original comment by [email protected] on 24 Sep 2014 at 4:26

[GoogleCodeExporter]

https://code.google.com/r/wonson-androidsvg-2/source/browse/src/com/caverock/and
roidsvg/SVG.java

This is my clone

Original comment by [email protected] on 24 Sep 2014 at 5:04

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

If allow us to change color, save and restore state, and reset to original is 
needed. Maybe need to be Serializable with ByteArrayInputStream and 
ByteArrayOutputStream.

Original comment by [email protected] on 8 Oct 2014 at 8:04

[GoogleCodeExporter]

https://github.com/wonson/androidsvg

My patched androidsvg with ability to change attributes and serialization for 
push and pop(save and restore)

Original comment by [email protected] on 7 Nov 2014 at 8:29

[GoogleCodeExporter]

Btw wonson we noticed that this function was missing an addAll in the recursive 
call in your getElementsByTagName.

The fixed function is posted below:

    public List<SvgObject>  getElementsByTagName(SvgContainer obj, Class clazz)
    {
        List<SvgObject>  result = new ArrayList<SvgObject>();

        if (obj.getClass() == clazz)
            result.add((SvgObject) obj);
        for (SvgObject child: obj.getChildren())
        {
            if (child.getClass() == clazz)
                result.add(child);
            if (child instanceof SvgContainer)
                result.addAll(getElementsByTagName((SvgContainer) child, clazz));//append result of recursive call to result
        }
        return result;
    }

Original comment by [email protected] on 5 Feb 2015 at 9:26

[GoogleCodeExporter]

Thanks :D

Original comment by [email protected] on 6 Feb 2015 at 2:14

[GoogleCodeExporter]

The following patch may be of use to people until I get some free time to work 
on a new release.

It is by Gerrit van Niekerk and adds the ability to set a ColorFilter when 
rendering.

Original comment by [email protected] on 8 Apr 2015 at 1:13

Attachments:

• 275.patch