Flutter SVG优化插件svg_optimizer的使用

SVG Optimizer

一个使用SVGO在构建时优化SVG文件的Dart包。

由Droids On Roids开发 ❤️

概述

该包旨在简化在Flutter项目中使用转换器优化SVG文件的过程。

前置条件

在使用此包之前，请确保完成以下所有前置条件：

1. 安装SVGO。
2. 确保将Node和SVGO添加到PATH环境变量中，以便SVG Optimizer能够运行它们。

使用

安装

要使用此插件，请在pubspec.yaml文件中将其作为依赖项添加。

dev_dependencies:
  svg_optimizer: ^0.0.1+1

或者运行以下命令：

flutter pub add svg_optimizer

示例用法

在pubspec.yaml文件中配置资源路径，并指定使用svg_optimizer插件：

  assets:
    - path: assets/svg/
      transformers:
        - package: svg_optimizer

使用自定义配置运行SVGO

若要使用自定义SVGO配置运行svg_optimizer，在转换器的参数中添加config键，并指定到svgo.config.mjs文件的路径。

  assets:
    - path: assets/svg/
      transformers:
        - package: svg_optimizer
          args: ['--config=path/to/svgo.config.mjs']

更多关于SVGO配置和自定义配置的信息，请参阅SVGO文档。

性能基准测试

该包包含一个性能基准测试工具，用于比较使用和不使用svg_optimizer生成的输出文件大小。

要运行基准测试，请使用/benchmark目录中的命令。

示例代码

以下是完整的示例代码，展示如何在Flutter应用中使用svg_optimizer插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Svg Optimizer demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Svg Optimizer'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('未优化的SVG:'),
              FutureBuilder(
                future: rootBundle.loadString('assets/svg_no_optimize/heart.svg'),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(snapshot.data!);
                  } else {
                    return const CircularProgressIndicator();
                  }
                },
              ),
              const Text('已优化的SVG:'),
              FutureBuilder(
                future: rootBundle.loadString('assets/svg/heart.svg'),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(snapshot.data!);
                  } else {
                    return const CircularProgressIndicator();
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}