vyuh_diagram_codec_svg 3.2.0

Export Vyuh Diagram drawings as SVG and import SVG paths and primitives as editable shapes. Pure Dart, headless on servers or inside Flutter.

vyuh_diagram_codec_svg

Export Vyuh Diagram drawings as SVG and import SVG paths and primitives as editable shapes.

Vyuh Diagram · Docs · Examples · API reference

Get a diagram out as SVG for the web, documents or print, and bring simple SVG artwork in as shapes you can edit. This package is pure Dart.

What you get

• Export: controller.exportSvg(SvgOptions(...)) renders the scene to SVG text. PNG needs a raster host, such as a mounted Flutter canvas.
• Import: DiagramSvgInput turns SVG paths and primitives into editable shapes and reports what it could not convert as warnings.
• Safe by default: import never runs scripts or fetches resources, rejects document types and entities, and refuses SVG over 10 MB.
• Server friendly: add PangoTextLayoutExtension to supply fonts and text layout without Flutter.

Install

dart pub add vyuh_diagram_codec_svg

Export a drawing

In Flutter, the canvas supplies text layout. Install SvgExtension() once:

import 'package:vyuh_diagram_codec_svg/vyuh_diagram_codec_svg.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final controller = DiagramController(
  configuration: DiagramConfiguration(extensions: [SvgExtension()]),
);
controller.createShape(Shapes.rectangle, at: DiagramPoint.zero, text: 'Hello');
// Mount DiagramCanvas(controller: controller) before exporting text.
final svg = await controller.exportSvg(
  SvgOptions(bounds: controller.scene.bounds),
);
print(svg.svg);

On a server, add PangoTextLayoutExtension to supply fonts and text layout. See headless text.

Import SVG

DiagramSvgInput from input.dart returns editable elements and warnings. Groups are flattened; text, images, filters, masks, CSS rules and references are not supported, and compound paths become separate editable paths. Add the elements inside one controller.batch for one undo step.

import 'package:vyuh_diagram_codec_svg/input.dart';

final result = const DiagramSvgInput().decode(svgSource, idPrefix: 'logo');
for (final warning in result.warnings) {
  print(warning);
}

Learn more

• SVG export and import
• Headless text

Where this fits

Vyuh Diagram is a diagram editor you embed in your own app. Five packages are open source (Apache-2.0) on pub.dev:

Package	What it is
vyuh_diagram_types	Immutable document model and geometry.
vyuh_diagram_core	Controller, edits and history, in pure Dart.
vyuh_diagram_flutter	Flutter canvas, input and rendering.
vyuh_diagram_codec_json	Save and load diagrams as JSON.
vyuh_diagram_codec_svg	Export diagrams as SVG; import SVG shapes.

Commercial extensions add the editor, shape libraries, automatic layout, rich text, tables, a minimap and more. They come from pub.vyuh.tech; see package access and the full package list.

License

Apache License, Version 2.0 (text). Third-party materials keep their own licenses; see the notices shipped in this package.