svg_pic_editor 3.2.3

A Flutter package for SVG editing and manipulation across multiple 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.

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: ^3.0.0

copied to clipboard

Or run the command:

flutter pub add svg_pic_editor

copied to clipboard

---

Usage

Import

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

import 'package:svg_pic_editor/svg_pic_editor.dart';

copied to clipboard

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');
            },
          ),
        ),
      ),
    );
  }
}

copied to clipboard

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'),
);

copied to clipboard

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'),
);

copied to clipboard

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'),
);

copied to clipboard

---

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;

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

copied to clipboard

---

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');
  },
);

copied to clipboard

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,
  getColor: (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}');
      });
    });
  },
);

copied to clipboard

---

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 you would like to support the development of this project, you can make a contribution through PayPal. Your support helps keep the development active and adds new features.

Contribute via Inter Pix

You can make your donation by scanning the QR code below: