dnfield / flutter_svg

SVG parsing, rendering, and widget library for Flutter
MIT License
1.67k stars 459 forks source link

Change colors for multi color svg #372

Open Tonku opened 4 years ago

Tonku commented 4 years ago

Thanks for the awesome library first!.

I was wondering how can I change colours for a multi color svg for individual segments? Currently only one color is supported.

Thanks

Tonku commented 4 years ago

See this website, they can change the color of svg https://undraw.co/illustrations how can I achieve that in flutter_svg

RussellZornes commented 4 years ago

You have style css support listed as out of scope.

I hope you will consider at least supporting color styles as shown below. I have a bunch of svgs that are multi-color and the plugin renders them mono-colored. This is blocker for my use of this plugin and I've needed to revert all my svgs back to png 😩

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#333333;}
    .st1{fill:#9AC70A;}
</style>
<g>
    <path class="st0" d="M923.34,449.13v313.23c-58.44-10.63-105.78-53.08-123.25-108.69c-0.08-0.32-0.25-0.63-0.32-0.95
        c-4.57-14.88-7.09-30.63-7.09-47.02c0-16.31,2.52-32.13,7.09-47.02c0.16-0.47,0.32-0.95,0.47-1.42
        c11.03-34.5,33.48-63.95,63.01-83.72c6-4.02,12.21-7.64,18.75-10.87C894.91,456.38,908.77,451.81,923.34,449.13z"/>
    <polygon class="st1" points="744.84,426.1 588.97,471.85 438.61,515.96 198.01,586.53 188.24,553.13 174.34,505.64 182.74,505.17 
        182.81,505.17 296.54,498.86 728.93,372.06 727.9,368.52  "/>
</g>
</svg>
Tonku commented 4 years ago

I think probably extract the paths of SVG and convert that to flutter paths and render ?

dnfield commented 4 years ago

Supporting CSS is, quite frankly, a nightmare and a full time job. It is generally possible to preprocess any CSS away as well.

For the original request of this bug, I don't have any plans to support this but would be open to reviewing patches that added it in some reasonable way. However, in general you should be able to work with the Drawable* classes and transform the styles on them to your liking. It might be easier to do so if we surfaced some ID property on them that corresponded to the id attribute on elements.

Tonku commented 4 years ago

@dnfield that's what I wanted.. can you suggest a recommended way to hook the style of Drawable* class from outside of flutter_svg ? that's from my own code?

dnfield commented 4 years ago

From the readme:

import 'package:flutter_svg/flutter_svg.dart'; final String rawSvg = '''...'''; final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use final Picture picture = svgRoot.toPicture();

// Otherwise, if you want to draw it to a canvas: // Optional, but probably normally desirable: scale the canvas dimensions to // the SVG's viewbox svgRoot.scaleCanvasToViewBox(canvas);

// Optional, but probably normally desireable: ensure the SVG isn't rendered // outside of the viewbox bounds svgRoot.clipCanvasToViewBox(canvas); svgRoot.draw(canvas, size);

Tonku commented 4 years ago

Thanks so much

rgb1380 commented 3 years ago

// outside of the viewbox bounds svgRoot.clipCanvasToViewBox(canvas); svgRoot.draw(canvas, size);

Hi, fantastic lib, thanks heaps.

Quick question, I am using svgRoot.draw() and it draws the svg in black. How do we change the color to something else?

gimmixAT commented 3 years ago

We also came across this issue and solved it for now by loading the svg's markup directly from the DefaultAssetBundle and preprocess it by replacing the color code that should be changed. So you just have to make sure that the fill / stroke is set correctly in your svg. Especially if you want to replace black because many svg optimizers will remove that since it is the svg internal default color.

class Icon extends StatelessWidget {

  Icon(this.icon, {this.color = Colors.black});
  final String icon;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: DefaultAssetBundle.of(context).loadString("assets/icons/" + icon + ".svg"),
      builder: (context, snapshot) {
        return SvgPicture.string(
          (snapshot.data ?? "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"></svg>")
            .replaceAll("#000000", '#${this.color.value.toRadixString(16).padLeft(6, '0').toUpperCase()}'),
          width: 32,
        );
      }
    );
  }
}
Zujaj commented 2 years ago

See this website, they can change the color of svg https://undraw.co/illustrations how can I achieve that in flutter_svg

Do you mean something like this? I call it SVG colorization.

This is an image

This tutorial can help to solve your issue. Not only does it changes the color, but also allows the user to download the manipulated SVG code.

ultraon commented 1 year ago

Found great answer here https://stackoverflow.com/questions/73034225/flutter-svg-gradient-is-not-rendered-failed-to-find-definition-for-url : Just move <def> block to the top (just under <svg> element.

Chonli commented 1 year ago

You can create a custom ColorMapper supported many colors (see https://github.com/dnfield/flutter_svg/issues/856#issuecomment-1549320661) And juste use it in

SvgPicture(
      SvgAssetLoader(
        path,
        colorMapper: MyColorMapper(
          primaryColor: primaryColor,
          secondaryColor: secondaryColor,
        ),
      ),
Sumit258000 commented 1 year ago

SVG colorization

What if we want to change color of particular classes in svg depending upon user selection? is there any short usefull function for that or the only possibility is searching class in long svg string and than change fill property? @Zujaj @dnfield

Zujaj commented 1 year ago

SVG colorization

What if we want to change color of particular classes in svg depending upon user selection? is there any short usefull function for that or the only possibility is searching class in long svg string and than change fill property? @Zujaj @dnfield

Can you provide any working example?

Sumit258000 commented 1 year ago

Thanks for your message but I found the workaround by setting condition and changing color dynamically something like this. `<g id="Mask_Group_533" data-name="Midfield" transform="translate(193.433 1654.703)" clip-path="url(#clip-path)">

    </g>`

By this I am able to change color separately in full svg string depending upon condition.

RahaKmi commented 9 months ago

Widget build(BuildContext context) {

return FutureBuilder<String>(
    future: DefaultAssetBundle.of(context).loadString("packages/../assets/icons/${svgIcon.assetName}"),
    builder: (context, snapshot) {
      final String svgContent = snapshot.data ?? '';
      final String modifiedSvgContent = svgContent.replaceAll('#4e737a', Theme.of(context).primaryColor.toHexColor())
      .replaceAll('#f19926', 'red');
      return SvgPicture.string(
        modifiedSvgContent,
        height: size,
        width: size,
      );
    },
);

}

extension ColorHex on Color { String toHexColor() { return '#${value.toRadixString(16).substring(2)}'; } }

RahaKmi commented 9 months ago

enum MyIcons { icon1(assetName: "icon1.svg"), icon2(assetName: "icon2.svg"),

const MyIcons ({required this.assetName});

final String assetName; }

class MyIcons extends Icon { final MyIcons svgIcon;

const MyIcons ( this.svgIcon, { super.key, super.size = 24.0, }) : super(null);