插件详情v1.0.10

svg_to_paint

svg_to_paint 可以从 svg 文件生成 dart 代码。给定一个 xml 文件，您只需输入一条命令即可绘制它。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 35
喜欢数: 38
Pub 分数: 160

安装插件

flutter pub add svg_to_paint

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

svg_to_paint 是一个 Flutter/Dart 包，可将 SVG 文件转换为 Dart 代码，以便在 Flutter 应用中直接渲染矢量图形。通过运行一个简单的命令，开发者可以将基于 XML 的 SVG 转换为可重用的 Paint 对象，从而高效且可扩展地绘制图标和插图。该工具简化了 SVG 资产的集成，无需手动创建路径或复杂的解析逻辑。它支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

将 SVG 图标转换为 Flutter 兼容代码
在应用程序中自动化矢量图形生成
简化用户界面设计中的图标管理
集成可扩展图形而无需外部依赖
从 SVG 源创建动态插图

主要特点

命令行 SVG 转 Dart 代码转换
支持所有 Flutter 平台
生成干净、可读的 Dart 代码
所需设置最少
保留 SVG 的可伸缩性和质量

适合对象

Flutter 开发人员使用 SVG 资产
UI设计师集成矢量图形
需要轻量级图标渲染的项目
需要可扩展且与分辨率无关的视觉效果的应用程序
Teams 自动化资产处理工作流程

使用建议

需要命令行访问权限进行转换
生成的代码可能需要手动优化
不适用于运行时 SVG 解析
仅限静态 SVG
依赖外部工具进行初始设置

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

svg_to_paint generates dart code from a svg file. This package is an abstraction of NodeJs package svg_to_paint.

Requirements

Node.JS v10+

Install

$ flutter pub global activate svg_to_paint

Usage

Convert your xml svg in vector drawable (for example in https://svg2vector.com)
Type in terminal:

svg_to_paint source_file_path destination_path name_file command

Params

* - required

source_file_path * - is the path of your file, for example (/Users/user/Desktop/file.xml)
destination_path * - is the destination path of your dart generated files, for example (/Users/user/Desktop)
name_file * - is the name of your file, for example (icon)
command * - represents the coordinates type of svg. You can choose absolute or relative.

Example

Given the svg file icon.xml in the folder named test, we will generate dart files in the same folder.

svg_to_paint /User/dev/test/icon.xml /User/dev/test icon absolute

Generates:

dev
└───test
│   │   auto_painter.dart
│   │   icon_generated.dart

Generated icon_generated.dart:

// GENERATED CODE

import 'auto_painter.dart'; 

class IconGenerated extends CustomPainter { 

  final viewPortWidth = 24; 
  final viewPortHeight = 24; 

  String path0 = 'M,23.4,12.3,C,23.4,11.5,23.299999999999997,10.700000000000001,23.2,9.9,H,12,V,14.5,H,18.4,C,18.099999999999998,16,17.299999999999997,17.3,15.999999999999998,18.1,V,21.1,H,19.799999999999997,C,22.1,19,23.4,15.9,23.4,12.3,Z';
  String path1 = 'M,12,24,C,15.2,24,17.9,22.9,19.9,21.1,L,16.099999999999998,18.1,C,14.999999999999998,18.8,13.599999999999998,19.200000000000003,11.999999999999998,19.200000000000003,C,8.899999999999999,19.200000000000003,6.199999999999998,17.1,5.299999999999998,14.300000000000002,H,1.299999999999998,V,17.400000000000002,C,3.3,21.4,7.5,24,12,24,Z';
  String path2 = 'M,5.3,14.3,C,4.8,12.8,4.8,11.200000000000001,5.3,9.700000000000001,V,6.6,H,1.2999999999999998,C,-0.40000000000000013,10,-0.40000000000000013,14,1.2999999999999998,17.299999999999997,L,5.3,14.3,Z';
  String path3 = 'M,12,4.8,C,13.7,4.8,15.3,5.3999999999999995,16.6,6.6,L,16.6,6.6,L,20,3.2,C,17.8,1.2000000000000002,15,0.10000000000000009,12,0.10000000000000009,C,7.5,0,3.3,2.6,1.3,6.6,L,5.3,9.7,C,6.2,6.9,8.9,4.8,12,4.8,Z';

  @override
   void paint(Canvas canvas, Size size) {
    canvas.drawRect(Rect.fromLTRB(0, 0, size.width, size.height),
        Paint()..color = Color(0xFFffffff)); 

  canvas.drawPath(drawPath(path0, viewPortWidth, viewPortHeight, size), Paint()..color = Color(0xFF4285F4)); 
  canvas.drawPath(drawPath(path1, viewPortWidth, viewPortHeight, size), Paint()..color = Color(0xFF34A853)); 
  canvas.drawPath(drawPath(path2, viewPortWidth, viewPortHeight, size), Paint()..color = Color(0xFFFBBC04)); 
  canvas.drawPath(drawPath(path3, viewPortWidth, viewPortHeight, size), Paint()..color = Color(0xFFEA4335)); 
 }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false; 

}