how to use SVGKImage change SVG fill color?

Question

how to use SVGKImage change SVG fill color?

SVGKImage *svgImage = [SVGKImage imageNamed:@"card.svg"];
svgImage.size = self.bounds.size;

SVGKLayeredImageView *imageLayer = [[SVGKLayeredImageView alloc] initWithSVGKImage:svgImage];
SVGKLayer *layer = (SVGKLayer *)imageLayer.layer;
self.layer.mask = layer;

Here, I find a easy way to get the CAShapeLayer

SVGKImage *svgImage = [SVGKImage imageNamed:@"test.svg"]; CAShapeLayer *thisLayer = svgImage.CALayerTree; //thisLayer has the UIBezierPath info in test.svg,so,you can do anything with it.

Answer 1

You have to use the CALayer sub-layers to changing the color :

SVGKImage *svgImage = [SVGKImage imageNamed:@"Anchor.svg"];
SVGKLayeredImageView *svgImageView = [[SVGKLayeredImageView alloc] initWithSVGKImage:svgImage];
[capturedImageView addSubview:svgImageView];

CALayer* layer = svgImageView.layer;
for (CALayer *subLayer in layer.sublayers) {
    DLog(@"%@", [subLayer class]);

    for (CALayer *subSubLayer in subLayer.sublayers) {
        DLog(@"%@", [subSubLayer class]);

        for (CALayer *subSubSubLayer in subSubLayer.sublayers) {
            DLog(@"%@", [subSubSubLayer class]);

            if( [subSubSubLayer isKindOfClass:[CAShapeLayer class]]){
                CAShapeLayer* shapeLayer = (CAShapeLayer*)subSubSubLayer;
                shapeLayer.fillColor = [UIColor redColor].CGColor;
            }
        }
    }
}

Hope this helps.

Source : https://github.com/SVGKit/SVGKit/issues/98

Answer 2

I know a method that can change the color of an UIImage. So, we should get the UIImage from SVGKImage firstly.

UIImage *img = [SVGKImage imageNamed:@"imageName"].UIImage;

And then, we can define a method like this:

- (UIImage *)changeTintColorWithImage:(UIImage *)img color:(UIColor *)tintColor {
UIImage *imageIn = img;
CGRect rect = CGRectMake(0, 0, imageIn.size.width, imageIn.size.height);
CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageIn.CGImage);
BOOL opaque = alphaInfo == kCGImageAlphaNoneSkipLast
|| alphaInfo == kCGImageAlphaNoneSkipFirst
|| alphaInfo == kCGImageAlphaNone;
UIGraphicsBeginImageContextWithOptions(imageIn.size, opaque, imageIn.scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, imageIn.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGContextClipToMask(context, rect, imageIn.CGImage);
CGContextSetFillColorWithColor(context, tintColor.CGColor);
CGContextFillRect(context, rect);
UIImage *imageOut = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return imageOut;
}

OK. this method can help us change the color of an image.It mainly use some APIs in CoreGraphics. And I suggest you can create a category with UIImage, it will be convenient to use.

Answer 3

Now you can change the color of png image itself.

Objective C:

    UIImage *img = [UIImage imageNamed:@"imagename"];
    UIImage *tintedImage = [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIImageView *imgVw = [[UIImageView alloc] initWithImage:tintedImage];
    imgVw.frame = CGRectMake(0, 20, 100, 100);
    imgVw.tintColor = [UIColor greenColor];
    [self.view addSubview:imgVw];

SWIFT:

let img = UIImage(named: "imagename")
let tintedImage: UIImage? = img?.withRenderingMode(.alwaysTemplate)
let imgVw = UIImageView(image: tintedImage)
imgVw.frame = CGRect(x: 0, y: 20, width: 100, height: 100)
imgVw.tintColor = UIColor.green
view.addSubview(imgVw)

cheers!!!