{"id":32268469,"url":"https://github.com/dartfoundry/svg_provider","last_synced_at":"2026-02-22T03:03:03.608Z","repository":{"id":283956959,"uuid":"953397606","full_name":"dartfoundry/svg_provider","owner":"dartfoundry","description":"A Flutter package for efficiently displaying SVG images in your application with support for multiple sources and validation options.","archived":false,"fork":false,"pushed_at":"2025-04-08T07:17:57.000Z","size":56,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T22:24:58.890Z","etag":null,"topics":["flutter","imageprovider","oss","sbom","svg","validation"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/svg_provider","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dartfoundry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-23T09:14:42.000Z","updated_at":"2025-04-08T07:18:01.000Z","dependencies_parsed_at":"2025-03-23T10:33:48.638Z","dependency_job_id":null,"html_url":"https://github.com/dartfoundry/svg_provider","commit_stats":null,"previous_names":["dartfoundry/svg_provider"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dartfoundry/svg_provider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dartfoundry%2Fsvg_provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dartfoundry%2Fsvg_provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dartfoundry%2Fsvg_provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dartfoundry%2Fsvg_provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dartfoundry","download_url":"https://codeload.github.com/dartfoundry/svg_provider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dartfoundry%2Fsvg_provider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29704401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T23:35:04.139Z","status":"online","status_checked_at":"2026-02-22T02:00:08.193Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","imageprovider","oss","sbom","svg","validation"],"created_at":"2025-10-22T22:13:51.025Z","updated_at":"2026-02-22T03:03:03.601Z","avatar_url":"https://github.com/dartfoundry.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Provider\n\n[![Pub](https://img.shields.io/pub/v/svg_provider.svg?style=flat-square)](https://pub.dev/packages/svg_provider)\n[![Flutter Tests](https://github.com/dartfoundry/svg_provider/actions/workflows/flutter-tests.yml/badge.svg)](https://github.com/dartfoundry/svg_provider/actions/workflows/flutter-tests.yml)\n\nA Flutter package for efficiently displaying SVG images in your application with support for multiple sources and validation options.\n\n## Features\n\n- Support for multiple SVG sources (assets, files, network, package, raw strings)\n- Configurable validation options for SVG content\n- Color tinting support\n- Custom sizing control\n- Error handling and detailed validation feedback\n\n## Background\n\nThe [flutter_svg_provider](https://github.com/yang-f/flutter_svg_provider) package was created to bridge the gap between Flutter's Image widget and SVG files, using `flutter_svg` for parsing. While functional, the package had several **open unanswered issues** regarding image quality, particularly when rendering at different scales; and support for rendering SVGs from other packages.\n\n### The Problem\n\nThe original package used a direct approach to convert SVGs to raster images:\n\n```dart\nfinal image = pictureInfo.picture.toImage(\n  pictureInfo.size.width.round(),\n  pictureInfo.size.height.round(),\n);\n```\n\nThis implementation, while straightforward, led to quality issues:\n- Blurry/pixelated rendering\n- Inconsistent sizing\n- Poor scaling on high-DPI displays\n\n### The Solution\n\nThe key to fixing these issues was to take control of the rendering process using Flutter's Canvas API. I also improved the package's functionality by adding raw svg string and package asset support, SVG markup validation, and cleaner error handling.\n\nRead the following article to get an in-depth understanding of the solution: [Fixing SVG Rendering Quality in Flutter - A Deep Dive](https://djocubeit.medium.com/b857b3dc42ed).\n\n## Installation\n\nAdd this to your package's pubspec.yaml file:\n\n```yaml\ndependencies:\n  svg_provider: ^1.0.1\n```\n\n## Usage\n\n### Basic Usage\n\n```dart\nImage(\n  width: 32,\n  height: 32,\n  image: SvgProvider('assets/my_icon.svg'),\n);\n```\n\n### Advanced Usage\n\n#### From Network with Validation\n\n```dart\nImage(\n  width: 32,\n  height: 32,\n  image: SvgProvider(\n    'https://example.com/icon.svg',\n    source: SvgSource.network,\n    validationOptions: SvgValidationOptions.strict,\n  ),\n);\n```\n\n#### Custom Validation Options\n\n```dart\nImage(\n  width: 32,\n  height: 32,\n  image: SvgProvider(\n    'assets/icons/my_icon.svg',\n    validationOptions: SvgValidationOptions(\n      validateStructure: true,\n      validateViewBox: true,\n      maxDimension: 1000,\n    ),\n  ),\n);\n```\n\n#### From Package Assets\n\n```dart\nImage(\n  width: 32,\n  height: 32,\n  image: SvgProvider(\n    'assets/icons/my_icon.svg',\n    source: SvgSource.package,\n    package: 'my_package',\n  ),\n);\n```\n\n#### From Raw SVG String\n\n```dart\nImage(\n  width: 32,\n  height: 32,\n  image: SvgProvider(\n    '''\u003csvg xmlns=\"http://www.w3.org/2000/svg\" ...\u003e\u003c/svg\u003e''',\n    source: SvgSource.raw,\n  ),\n);\n```\n\n## API Reference\n\n### SvgProvider\n\n`SvgProvider` is an implementation of Flutter's `ImageProvider` that renders SVG images from various sources.\n\n#### Constructor\n\n```dart\nconst SvgProvider(\n  String path, {\n  Size? size,\n  double? scale,\n  Color? color,\n  SvgSource source = SvgSource.asset,\n  SvgStringGetter? svgGetter,\n  String? package,\n  SvgValidationOptions? validationOptions,\n});\n```\n\n#### Parameters\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `path` | `String` | Path to SVG file or asset, URL for network sources, or raw SVG string for `SvgSource.raw` |\n| `size` | `Size?` | Size in logical pixels to render. Useful for `DecorationImage`. If not specified, will use size from `Image`. If `Image` does not specify size either, will use default size 100x100. |\n| `scale` | `double?` | Image scale factor relative to the pixel density of the display |\n| `color` | `Color?` | Color to tint the SVG |\n| `source` | `SvgSource` | Source type of the SVG image. Defaults to `SvgSource.asset`. |\n| `svgGetter` | `SvgStringGetter?` | Optional custom function to retrieve the SVG string |\n| `package` | `String?` | The package name when using `SvgSource.package` |\n| `validationOptions` | `SvgValidationOptions?` | Optional configuration for SVG validation |\n\n#### Methods\n\n| Method | Description |\n|--------|-------------|\n| `obtainKey` | Creates an `SvgImageKey` based on the provider's configuration |\n| `loadImage` | Loads the image from the SVG content |\n| `getSvgString` | Static utility method to retrieve the SVG content string |\n| `getFilterColor` | Resolves the appropriate filter color |\n\n### SvgSource\n\nEnum defining possible image path sources:\n- `SvgSource.file` - Load SVG from a file on the device\n- `SvgSource.asset` - Load SVG from application assets\n- `SvgSource.network` - Load SVG from a network URL\n- `SvgSource.package` - Load SVG from another package's assets\n- `SvgSource.raw` - Use a raw SVG string directly\n\n### SvgValidationOptions\n\nConfiguration options for SVG validation with preset configurations for different validation levels.\n\n#### Constructor\n\n```dart\nconst SvgValidationOptions({\n  bool validateStructure = true,\n  bool validateViewBox = true,\n  bool validateDimensions = true,\n  bool validateAttributes = true,\n  bool validateElements = true,\n  double maxDimension = 10000,\n  double minDimension = 0,\n});\n```\n\n#### Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `validateStructure` | `bool` | `true` | Whether to perform structure validation (tags, namespace, etc.) |\n| `validateViewBox` | `bool` | `true` | Whether to validate viewBox attribute |\n| `validateDimensions` | `bool` | `true` | Whether to check for reasonable size dimensions |\n| `validateAttributes` | `bool` | `true` | Whether to check for malformed attributes |\n| `validateElements` | `bool` | `true` | Whether to check for unsupported elements |\n| `maxDimension` | `double` | `10000` | Maximum allowed dimension value |\n| `minDimension` | `double` | `0` | Minimum allowed dimension value |\n\n#### Preset Configurations\n\n- **`SvgValidationOptions.none`**: No validation checks\n- **`SvgValidationOptions.basic`**: Basic validation only (structure)\n- **`SvgValidationOptions.strict`**: Full validation with all checks\n\n### SvgValidator\n\nA utility class for validating SVG content with configurable options.\n\n#### Validation Checks\n\n1. **Structure Validation**: Checks for proper SVG structure, including:\n   - Presence of `\u003csvg\u003e` tag\n   - Correct namespace declaration\n   - Balanced tags\n   - Presence of content elements\n\n2. **ViewBox Validation**: Ensures proper `viewBox` attribute format and values.\n\n3. **Dimension Validation**: Validates width and height attributes against configured min/max values.\n\n4. **Attribute Validation**: Checks for malformed style and transform attributes.\n\n5. **Element Validation**: Verifies that all elements in the SVG are supported.\n\n#### Supported Elements\n\nThe validator recognizes SVG elements including: svg, path, rect, circle, ellipse, line, polyline, polygon, text, g, defs, use, symbol, clipPath, mask, linearGradient, radialGradient, stop, filter, feGaussianBlur, feOffset, feBlend, feColorMatrix, and more.\n\n### Example\n\n```dart\nfinal validator = SvgValidator(SvgValidationOptions.strict);\n\ntry {\n  validator.validate(svgString);\n  print('SVG is valid');\n} catch (e) {\n  print('SVG validation failed: $e');\n}\n```\n\n## Copyright\n\nCopyright (c) 2025 Dom Jocubeit\n\n## License\n\nApache License, Version 2.0\n\n## Testing\n\n```sh\nflutter test test/svg_provider_test.dart\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdartfoundry%2Fsvg_provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdartfoundry%2Fsvg_provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdartfoundry%2Fsvg_provider/lists"}