svg_pic_editor 5.1.0

A dependency-free Flutter widget to load, edit and render SVGs (CSS, @keyframes and SMIL animations included) across all platforms.

SvgPicEditor

SvgPicEditor is a Flutter widget that allows you to load and modify SVG files from various sources, such as local assets, SVG strings, or URLs. This widget also lets you modify specific SVG elements using the ElementEdit class, making it easy to change properties like color, opacity, transformations, and more. The new listenEdit and getColors features further expand the possibilities for manipulating and customizing SVGs.

Compatibility

Platforms	Android, iOS, Web, macOS, Windows, Linux
Dart SDK	>=3.4.0 <4.0.0
Flutter SDK	>=3.22.0
Dependencies	None. As of 5.0.0, svg_pic_editor depends only on the Flutter SDK — no flutter_svg, no xml, no http.

Starting with 5.0.0, SVG parsing, editing, networking and rendering are all implemented in-house (lib/src/xml, lib/src/net, lib/src/render), including a built-in <style> CSS resolver (selectors, cascade, @keyframes) and SMIL <animate>/<animateTransform> playback. See CHANGELOG.md for the full list of what's supported and the known gaps (<clipPath>/<mask>/<pattern>/<filter>, markers, <animateMotion>, etc.), and the example/ app for runnable demos of every feature.

Table of Contents

• Installation
• Usage
  • Import
  • Basic Example
  • Constructors
    • SvgPicEditor.asset
    • SvgPicEditor.network
    • SvgPicEditor.string
  • Widget Properties
  • Modification Example
  • New Feature Example
• Conclusion

---

Installation

To add SvgPicEditor to your Flutter project, include the following in your pubspec.yaml:

dependencies:
  svg_pic_editor: ^5.0.0

Or run the command:

flutter pub add svg_pic_editor

---

Usage

Import

To use SvgPicEditor, import the package into your Dart file:

import 'package:svg_pic_editor/svg_pic_editor.dart';

Basic Example

Here is a basic example of how to use SvgPicEditor inside a Flutter widget:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SvgPicEditor Example')),
        body: Center(
          child: SvgPicEditor.asset(
            'assets/example.svg',
            modifications: [
              ElementEdit(
                querySelector: '#element1',
                fillColor: Colors.red,
              ),
            ],
            width: 200.0,
            height: 200.0,
            fit: BoxFit.contain,
            listenEdit: (svgContent) {
              print('Edited SVG content: $svgContent');
            },
            onTap: (modifiedSvgString) {
              print('Tapped SVG: $modifiedSvgString');
            },
          ),
        ),
      ),
    );
  }
}

This example loads an SVG file from a local asset, modifies it, and adds the onTap callback to handle tap actions, printing either the modified SVG string or no value at all.

---

Constructors

SvgPicEditor.asset

Loads an SVG from a local asset:

SvgPicEditor.asset(
  'assets/your_file.svg',
  modifications: [/* List of ElementEdit */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '#yourID',
  color: Colors.red,
  listenEdit: (svgContent) => print('Updated SVG: $svgContent'),
  onTap: (modifiedSvgString) => print('Tapped SVG: $modifiedSvgString'),
);

SvgPicEditor.network

Loads an SVG from a URL:

SvgPicEditor.network(
  'https://example.com/your/svg.svg',
  modifications: [/* List of ElementEdit */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '.yourClass',
  color: Colors.red,
  listenEdit: (svgContent) => print('SVG content: $svgContent'),
  onTap: (modifiedSvgString) => print('Tapped SVG: $modifiedSvgString'),
);

SvgPicEditor.string

Loads an SVG from an SVG string:

SvgPicEditor.string(
  '<svg>...</svg>',
  modifications: [/* List of ElementEdit */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '[attribute="value"]',
  color: Colors.red,
  listenEdit: (svgContent) => print('Updated SVG: $svgContent'),
  onTap: (modifiedSvgString) => print('Tapped SVG: $modifiedSvgString'),
);

---

Widget Properties

Main properties of the SvgPicEditor widget:

• assetName (String?): The name of the asset containing the SVG.
• svgString (String?): A string representing the SVG content.
• svgUrl (String?): The URL of the SVG to be loaded.
• listenEdit (Function(String)?): A callback function to listen for changes in the SVG content.
• package (String?): The package name containing the asset.
• modifications (List: A list of modifications to apply to the SVG.
• width (double?): The width of the widget.
• height (double?): The height of the widget.
• fit (BoxFit): How the SVG should fit within the available space.
• querySelector (String?): A query selector to select specific elements.
• color (Color?): The color to apply to the SVG.
• onTap (Function(String)?): A callback function triggered when the SVG is tapped, receiving either the modified SVG string or no value at all.

---

Modification Example

The ElementEdit class allows you to make specific modifications to SVG elements, such as changing the color, opacity, or applying transformations.

class ElementEdit {
  final String? id;
  final Color? fillColor;
  final Color? strokeColor;
  final double? strokeWidth;
  final double? opacity;
  final String? transform;
  final String? querySelector;
  final List<String>? customAttributes;

  ElementEdit({
    this.id,
    this.fillColor,
    this.strokeColor,
    this.strokeWidth,
    this.opacity,
    this.transform,
    this.querySelector,
    this.customAttributes,
  });
}

Setting arbitrary attributes with customAttributes

For SVG attributes not covered by the typed fields above (preserveAspectRatio, clip-path, data-*, or anything else), pass "attributeName=value" strings via customAttributes. They're applied as raw XML attributes, after every other field, so they can also be used to override a typed field's result:

ElementEdit(
  id: 'icon',
  customAttributes: [
    'preserveAspectRatio=xMidYMid slice',
    'data-tag=hero',
  ],
)

---

New Feature Example

Using listenEdit to Track Changes

The listenEdit feature allows you to listen for edits made to the SVG content and get updates about the modified SVG.

SvgPicEditor.asset(
  'assets/example.svg',
  modifications: [
    ElementEdit(
      querySelector: '#element1',
      fillColor: Colors.red,
    ),
  ],
  width: 200.0,
  height: 200.0,
  fit: BoxFit.contain,
  listenEdit: (svgContent) {
    // Whenever the SVG is edited, the updated content will be printed
    print('Edited SVG content: $svgContent');
  },
);

Using getColors to Retrieve Colors from the SVG

The getColors feature allows you to extract color information from an SVG. It returns an SvgColorElement containing the color and the elements associated with it in the SVG.

SvgPicEditor.asset(
  'assets/example.svg',
  modifications: [
    ElementEdit(
      querySelector: '#element1',
      fillColor: Colors.red,
    ),
  ],
  width: 200.0,
  height: 200.0,
  fit: BoxFit.contain,
  getColors: (List<SvgColorElement> colors) {
    // Retrieve the colors and associated elements from the SVG
    colors.forEach((colorElement) {
      print('Color: ${colorElement.color}');
      colorElement.parts.forEach((part) { // List of associated elements
        print('Element: ${part.querySelector}');
      });
    });
  },
);

---

Conclusion

With the new listenEdit, getColors, and onTap features, SvgPicEditor becomes an even more powerful and flexible tool for manipulating and customizing SVGs in Flutter. Now, in addition to modifying SVG elements, you can track real-time edits, extract valuable information about the colors and elements within the SVG, and trigger actions when the SVG is tapped.

---

Support the Project

If svg_pic_editor has been useful to you, consider supporting its development on Patreon:

patreon.com/u40287002

Your support helps keep the project active, fix bugs faster, and build the next features. We truly appreciate it!

---

See CHANGELOG.md for the full release history.