Support SVG filters (blur, offset, feMerge) and alpha masks

• Added support for parsing and resolving SVG filters including feGaussianBlur, feOffset, and feMerge.
• Added support for alpha masks (mask-type=alpha).
• Updated vector_graphics, vector_graphics_codec, and vector_graphics_compiler packages to support encoding/decoding and rendering of paint blurs.
• Fixed handling of directional blurs where one axis is zero (e.g., stdDeviation="25 0").
• Fixed text rendering alignment shift by resolving filters at the TextPositionNode level.
• Addressed PR review feedback:
  - Supported comma-separated stdDeviation values.
  - Implemented default 'in' attribute for feMergeNode (fallback to previous primitive's result or SourceGraphic).
  - Preserved original fill/stroke opacity in SourceAlpha filters.
  - Added cycle detection during filter tracing to prevent stack overflow.
  - Refactored feMerge to be parsed as a primitive, enabling arbitrary DAG chaining (not just as final operation).
  - Implemented multi-layer filter support for group nodes (ParentNode) by duplicating children resolution per layer.
  - Removed redundant layers.isNotEmpty check in parser.
• Added comprehensive unit tests and updated the example app with a filter gallery.

TAG=agy
CONV=27cb188a-9ad9-4434-8918-8ef71bdba17c

Author: edwin-hollen

packages/vector_graphics/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 1.2.3
 
+* Adds support for SVG filters (blur) and mask-type=alpha.
 * Updates minimum supported SDK version to Flutter 3.38/Dart 3.10.
 
 ## 1.2.2

packages/vector_graphics/example/lib/main.dart

@@ -1,19 +1,139 @@
-// Copyright 2013 The Flutter Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
 import 'dart:developer';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:http/http.dart' as http;
 import 'package:vector_graphics/vector_graphics.dart';
-import 'package:vector_graphics_compiler/vector_graphics_compiler.dart';
+import 'package:vector_graphics_compiler/vector_graphics_compiler.dart' show encodeSvg;
 
 void main() {
   runApp(const MyApp());
 }
 
+const String _svgDropShadow = '''
+<!-- Feature: Classic Drop Shadow via feGaussianBlur, feOffset, and feMerge -->
+<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <!-- 1. Blur the original graphic source alpha channel -->
+      <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur" />
+      <!-- 2. Shift the blurred shadow down and right -->
+      <feOffset in="blur" dx="5" dy="8" result="offsetBlur"/>
+      <!-- 3. Layer the original graphic on top of the shadow -->
+      <feMerge>
+        <feMergeNode in="offsetBlur" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <rect x="50" y="40" width="300" height="100" rx="15" fill="#4F46E5" filter="url(#drop-shadow)" />
+</svg>
+''';
+
+const String _svgNeonText = '''
+<!-- Feature: Glowing Neon Text Effect using multiple layered feGaussianBlur outputs -->
+<svg width="500" height="200" viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="neon-glow" x="-50%" y="-50%" width="200%" height="200%">
+      <!-- Blur the graphic significantly to create the wide background glow -->
+      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur1" />
+      <!-- Create a sharper, more intense core glow -->
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur2" />
+      
+      <!-- Merge the layers: wide glow, sharp glow, then crisp original text -->
+      <feMerge>
+        <feMergeNode in="blur1" />
+        <feMergeNode in="blur2" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <rect width="100%" height="100%" fill="#0B0F19" />
+  <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" fill="#FFF" stroke="#FF2E93" stroke-width="2" font-family="Courier New" font-size="64" font-weight="bold" filter="url(#neon-glow)">
+    OPEN 24/7
+  </text>
+</svg>
+''';
+
+const String _svgMeshGradient = '''
+<!-- Feature: Smooth UI Background Gradient ("Mesh" Style) via high stdDeviation blur -->
+<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- High standard deviation blends the distinct shapes seamlessly -->
+    <filter id="heavy-blur">
+      <feGaussianBlur stdDeviation="80" />
+    </filter>
+  </defs>
+  
+  <!-- Base background color -->
+  <rect width="100%" height="100%" fill="#0F172A" />
+  
+  <!-- Blurring container holding the colored blobs -->
+  <g filter="url(#heavy-blur)">
+    <circle cx="150" cy="120" r="130" fill="#38BDF8" opacity="0.6" />
+    <circle cx="450" cy="280" r="160" fill="#EC4899" opacity="0.5" />
+    <circle cx="300" cy="200" r="110" fill="#6366F1" opacity="0.6" />
+  </g>
+</svg>
+''';
+
+const String _svgGlassmorphism = '''
+<!-- Feature: Glassmorphism / Frosted Glass Panel overlay using clipped feGaussianBlur shapes -->
+<svg width="500" height="350" viewBox="0 0 500 350" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- A standard background blur filter -->
+    <filter id="glass-blur">
+      <feGaussianBlur stdDeviation="20" />
+    </filter>
+    
+    <!-- Clip path to match our UI card dimensions -->
+    <clipPath id="card-shape">
+      <rect x="100" y="75" width="300" height="200" rx="20" />
+    </clipPath>
+  </defs>
+
+  <!-- Colorful backdrop layer -->
+  <rect width="100%" height="100%" fill="#1E1E2F" />
+  <circle cx="160" cy="130" r="90" fill="#FF5E62" />
+  <circle cx="360" cy="220" r="100" fill="#FF9966" />
+
+  <!-- The Frosted Glass Card Technique -->
+  <!-- 1. Duplicate background layer clipped and heavily blurred -->
+  <g clip-path="url(#card-shape)">
+    <rect width="100%" height="100%" fill="#1E1E2F" />
+    <circle cx="160" cy="130" r="90" fill="#FF5E62" filter="url(#glass-blur)" />
+    <circle cx="360" cy="220" r="100" fill="#FF9966" filter="url(#glass-blur)" />
+    
+    <!-- 2. Semi-transparent white tint fill for the frosted appearance -->
+    <rect x="100" y="75" width="300" height="200" fill="#FFFFFF" opacity="0.07" />
+  </g>
+
+  <!-- 3. Crisp white border stroke overlaying the card to establish depth -->
+  <rect x="100" y="75" width="300" height="200" rx="20" fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.25" />
+</svg>
+''';
+
+const String _svgMotionBlur = '''
+<!-- Feature: Directional Motion Blur using decoupled axes in stdDeviation="X Y" -->
+<svg width="500" height="150" viewBox="0 0 500 150" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- stdDeviation="Horizontal Vertical". Setting vertical to 0 creates a horizontal streak -->
+    <filter id="motion-blur-x" x="-50%" y="0%" width="200%" height="100%">
+      <feGaussianBlur stdDeviation="25 0" />
+    </filter>
+  </defs>
+
+  <rect width="100%" height="100%" fill="#111827" />
+
+  <!-- The trailing motion streak -->
+  <circle cx="300" cy="75" r="30" fill="#F59E0B" filter="url(#motion-blur-x)" opacity="0.8" />
+  
+  <!-- The crisp leading object -->
+  <circle cx="360" cy="75" r="30" fill="#F59E0B" />
+</svg>
+''';
+
 /// The main example app widget.
 class MyApp extends StatelessWidget {
   /// Creates a new [MyApp].
@@ -23,12 +143,70 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Vector Graphics Demo',
-      theme: ThemeData(primarySwatch: Colors.blue),
-      home: const Scaffold(
-        body: Center(
-          child: VectorGraphic(
-            loader: NetworkSvgLoader(
-              'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg',
+      theme: ThemeData.dark(),
+      home: Scaffold(
+        appBar: AppBar(title: const Text('Filter & Mask Gallery')),
+        body: const SingleChildScrollView(
+          child: Padding(
+            padding: EdgeInsets.all(16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text('0. Original Ghostscript Tiger (Network SVG Loader)', style: TextStyle(fontWeight: FontWeight.bold)),
+                SizedBox(height: 8),
+                SizedBox(
+                  height: 200,
+                  width: 200,
+                  child: VectorGraphic(
+                    loader: NetworkSvgLoader(
+                      'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg',
+                    ),
+                  ),
+                ),
+                Divider(height: 32),
+                Text('1. Classic Drop Shadow (feGaussianBlur, feOffset, feMerge)', style: TextStyle(fontWeight: FontWeight.bold)),
+                SizedBox(height: 8),
+                SizedBox(
+                  height: 200,
+                  width: 400,
+                  child: DecoratedBox(
+                    decoration: BoxDecoration(color: Colors.white),
+                    child: VectorGraphic(loader: _StringSvgLoader(_svgDropShadow)),
+                  ),
+                ),
+                Divider(height: 32),
+                Text('2. Glowing Neon Text (Multiple feGaussianBlur, feMerge)', style: TextStyle(fontWeight: FontWeight.bold)),
+                SizedBox(height: 8),
+                SizedBox(
+                  height: 200,
+                  width: 500,
+                  child: VectorGraphic(loader: _StringSvgLoader(_svgNeonText)),
+                ),
+                Divider(height: 32),
+                Text('3. Smooth UI Background Gradient (Mesh style blur on Group)', style: TextStyle(fontWeight: FontWeight.bold)),
+                SizedBox(height: 8),
+                SizedBox(
+                  height: 400,
+                  width: 600,
+                  child: VectorGraphic(loader: _StringSvgLoader(_svgMeshGradient)),
+                ),
+                Divider(height: 32),
+                Text('4. Glassmorphism (Clipped group with blur)', style: TextStyle(fontWeight: FontWeight.bold)),
+                SizedBox(height: 8),
+                SizedBox(
+                  height: 350,
+                  width: 500,
+                  child: VectorGraphic(loader: _StringSvgLoader(_svgGlassmorphism)),
+                ),
+                Divider(height: 32),
+                Text('5. Directional Motion Blur (stdDeviation="25 0")', style: TextStyle(fontWeight: FontWeight.bold)),
+                SizedBox(height: 8),
+                SizedBox(
+                  height: 150,
+                  width: 500,
+                  child: VectorGraphic(loader: _StringSvgLoader(_svgMotionBlur)),
+                ),
+              ],
             ),
           ),
         ),
@@ -37,6 +215,37 @@ class MyApp extends StatelessWidget {
   }
 }
 
+class _StringSvgLoader extends BytesLoader {
+  const _StringSvgLoader(this.svg);
+  final String svg;
+
+  @override
+  Future<ByteData> loadBytes(BuildContext? context) async {
+    return compute(
+      (String svgStr) {
+        final Uint8List compiledBytes = encodeSvg(
+          xml: svgStr,
+          debugName: 'custom-svg',
+          enableClippingOptimizer: false,
+          enableMaskingOptimizer: false,
+          enableOverdrawOptimizer: false,
+        );
+        return ByteData.sublistView(compiledBytes);
+      },
+      svg,
+      debugLabel: 'Load String Bytes',
+    );
+  }
+
+  @override
+  int get hashCode => svg.hashCode;
+
+  @override
+  bool operator ==(Object other) {
+    return other is _StringSvgLoader && other.svg == svg;
+  }
+}
+
 /// A [BytesLoader] that converts a network URL into encoded SVG data.
 class NetworkSvgLoader extends BytesLoader {
   /// Creates a [NetworkSvgLoader] that loads an SVG from [url].
@@ -60,7 +269,7 @@ class NetworkSvgLoader extends BytesLoader {
         );
         task.finish();
         // sendAndExit will make sure this isn't copied.
-        return compiledBytes.buffer.asByteData();
+        return ByteData.sublistView(compiledBytes);
       },
       url,
       debugLabel: 'Load Bytes',

packages/vector_graphics/lib/src/listener.dart

@@ -393,6 +393,11 @@ class FlutterVectorGraphicsListener extends VectorGraphicsCodecListener {
     _paints.add(paint);
   }
 
+  @override
+  void onPaintBlur(int paintId, double sigmaX, double sigmaY) {
+    _paints[paintId].imageFilter = ImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY);
+  }
+
   @override
   void onPathClose() {
     _currentPath!.close();

packages/vector_graphics/pubspec.yaml

@@ -2,7 +2,7 @@ name: vector_graphics
 description: A vector graphics rendering package for Flutter using a binary encoding.
 repository: https://github.com/flutter/packages/tree/main/packages/vector_graphics
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+vector_graphics%22
-version: 1.2.2
+version: 1.2.3
 
 environment:
   sdk: ^3.10.0

packages/vector_graphics/test/listener_test.dart

@@ -187,6 +187,39 @@ void main() {
     await listener.waitForImageDecode();
     expect(() => listener.onDrawImage(2, 10, 10, 100, 100, null), throwsAssertionError);
   });
+
+  test('Paint blur is applied to paint', () async {
+    final factory = TestPictureFactory();
+    final listener = FlutterVectorGraphicsListener(pictureFactory: factory);
+
+    listener.onPaintObject(
+      color: const ui.Color(0xff000000).toARGB32(),
+      strokeCap: null,
+      strokeJoin: null,
+      blendMode: BlendMode.srcIn.index,
+      strokeMiterLimit: null,
+      strokeWidth: null,
+      paintStyle: ui.PaintingStyle.fill.index,
+      id: 0,
+      shaderId: null,
+    );
+
+    listener.onPaintBlur(0, 5.0, 10.0);
+
+    listener.onPathStart(0, 0);
+    listener.onPathMoveTo(0, 0);
+    listener.onPathLineTo(10, 10);
+    listener.onPathFinished();
+
+    await listener.onDrawPath(0, 0, null);
+
+    final Invocation drawPath = factory.fakeCanvases.single.invocations.single;
+    expect(drawPath.isMethod, true);
+    expect(drawPath.memberName, #drawPath);
+    final paint = drawPath.positionalArguments[1] as ui.Paint;
+    expect(paint.imageFilter, isNotNull);
+    expect(paint.imageFilter, ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 10.0));
+  });
 }
 
 class TestPictureFactory implements PictureFactory {

packages/vector_graphics_codec/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 1.1.14
 
+* Adds support for SVG filters (blur) and mask-type=alpha.
 * Updates minimum supported SDK version to Flutter 3.38/Dart 3.10.
 
 ## 1.1.13

packages/vector_graphics_codec/lib/vector_graphics_codec.dart

@@ -126,6 +126,7 @@ class VectorGraphicsCodec {
   static const int _textPositionTag = 50;
   static const int _updateTextPositionTag = 51;
   static const int _pathTagHalfPrecision = 52;
+  static const int _paintBlurTag = 53;
 
   static const int _version = 1;
   static const int _magicNumber = 0x00882d62;
@@ -230,6 +231,9 @@ class VectorGraphicsCodec {
         case _updateTextPositionTag:
           _readUpdateTextPosition(buffer, listener);
           continue;
+        case _paintBlurTag:
+          _readPaintBlur(buffer, listener);
+          continue;
         default:
           throw StateError('Unknown type tag $type');
       }
@@ -959,6 +963,22 @@ class VectorGraphicsCodec {
     final Float64List? transform = buffer.getTransform();
     listener?.onPatternStart(patternId, x, y, width, height, transform!);
   }
+
+  /// Write a paint blur command to the buffer.
+  void writePaintBlur(VectorGraphicsBuffer buffer, int paintId, double sigmaX, double sigmaY) {
+    buffer._checkPhase(_CurrentSection.paints);
+    buffer._putUint8(_paintBlurTag);
+    buffer._putUint16(paintId);
+    buffer._putFloat32(sigmaX);
+    buffer._putFloat32(sigmaY);
+  }
+
+  void _readPaintBlur(_ReadBuffer buffer, VectorGraphicsCodecListener? listener) {
+    final int paintId = buffer.getUint16();
+    final double sigmaX = buffer.getFloat32();
+    final double sigmaY = buffer.getFloat32();
+    listener?.onPaintBlur(paintId, sigmaX, sigmaY);
+  }
 }
 
 /// Implement this listener class to support decoding of vector_graphics binary
@@ -1028,6 +1048,9 @@ abstract class VectorGraphicsCodecListener {
   /// Prepare to draw a new mask, until the next [onRestoreLayer] command.
   void onMask();
 
+  /// A paint blur has been decoded.
+  void onPaintBlur(int paintId, double sigmaX, double sigmaY) {}
+
   /// A radial gradient shader has been parsed.
   ///
   /// [focalX] and [focalY] are either both `null` or `non-null`.