Can you add color, It is hard to change color variable in svg when You have 30 files

[zathras]

I don't understand what you're asking for.

[Hellomik2002]

in flutter_svg you can set the color and the whole svg will be that color, but in jovial svg I need to change SVG file and set currentColor to all colors

[Hellomik2002]

At the current moment I do that, but It will be better if package will have this feature as flutter svg

RegExp colorRegex = RegExp(
    r'(?:#|0x)([a-fA-F0-9]{3}|[a-fA-F0-9]{6})\b|(?:rgb|hsl)a?\([^\)]*\)',
    caseSensitive: false);

     svgLocal =
          svgLocal.replaceAllMapped(colorRegex, (match) => "currentColor");

[zathras]

Setting currentColor is already supported. See, for example, ScalableImage.modifyCurrentColor.

Note that there is a bug if the SVG has a transformation -- #71

[Hellomik2002]

That case won't work when You have this svg

<svg version="1.1" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
      <g fill="red" transform="translate(1 1)">
        <circle cx="25" cy="25" r="20" />
      </g>
    </svg>

[zathras]

Correct. So are you asking for support for currentColor, as per your first comment, or for a general ability to edit colors throughout the structure of an arbitrary SVG, as per your second comment? Or are you asking for something else?

Please be specific, and provide enough detail and a complete description of what you're asking for.

[Hellomik2002]

I am asking general ability to edit colors throughout the structure of an arbitrary SVG, For example I have SVG like that

<svg version="1.1" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
      <g fill="red" transform="translate(1 1)">
        <circle cx="25" cy="25" r="20" />
      </g>
    </svg>

But when use it like that

ScalableImageWidget.fromSISource(
          si: ScalableImageSource.fromSvg(
            rootBundle,
            assetPath,
            color: Colors.orange,
          ),
          fit: BoxFit.cover,
          reload: false,
        )

My circle should be orange

[zathras]

OK, that's covered under #19. I have no plans to add that kind of extension at this time, but if there's a compelling enough reason, I'm open to considering it.

If you're just interested in editing static SVG files, I'm sure you'll find many ways of doing that off-line, though.

[Hellomik2002]

let it be here If someone need, can work with HEX, and rbg but not with "red", "green", if someone need,

Not best solution

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:jovial_svg/jovial_svg.dart';

Map<String, String> _svgLocalMap = {};

class SvgLocalWidget extends StatefulWidget {
  final double? height;
  final double? width;

  final String assetPath;
  final Color? currentColor;

  const SvgLocalWidget({
    this.height,
    this.width,
    required this.assetPath,
    this.currentColor,
    super.key,
  });

  @override
  State<SvgLocalWidget> createState() => _SvgLocalWidgetState();
}

RegExp colorRegex = RegExp(
    r'(?:#|0x)([a-fA-F0-9]{3}|[a-fA-F0-9]{6})\b|(?:rgb|hsl)a?\([^\)]*\)',
    caseSensitive: false);

class _SvgLocalWidgetState extends State<SvgLocalWidget> {
  @override
  void initState() {
    init();
    super.initState();
  }

  ScalableImage? image;

  void init() async {
    _svgLocalMap[widget.assetPath] =
        await rootBundle.loadString(widget.assetPath);
    updateChild();
    setState(() {});
  }

  void updateChild() {
    if (_svgLocalMap[widget.assetPath] == null) {
      return;
    }
    String svgLocal = _svgLocalMap[widget.assetPath]!;
    if (widget.currentColor != null) {
      svgLocal =
          svgLocal.replaceAllMapped(colorRegex, (match) => "currentColor");
    }
    image = ScalableImage.fromSvgString(svgLocal,
        currentColor: widget.currentColor);
  }

  @override
  void didUpdateWidget(covariant SvgLocalWidget oldWidget) {
    if (oldWidget.assetPath != widget.assetPath ||
        oldWidget.currentColor != widget.currentColor) {
      updateChild();
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: SizedBox(
        height: widget.height,
        width: widget.width,
        child: image == null
            ? null
            : ScalableImageWidget(
                si: image!,
                fit: BoxFit.cover,
              ),
      ),
    );
  }
}