init project

.gitignore

@@ -0,0 +1,20 @@
+pubspec.lock
+.DS_Store
+.atom/
+.dart_tool/
+.idea
+.vscode/
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+.flutter-plugins
+doc/api/
+coverage/
+.project
+
+# golden failure diffs
+test/failures
+# Flutter crash logs
+/flutter_*.log

.metadata

@@ -0,0 +1,8 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: 48bb5b7926452e2b138000c3d06a075273efbd90
+  channel: master

.travis.yml

@@ -0,0 +1,23 @@
+os:
+  - linux
+sudo: false
+addons:
+  apt:
+    # Flutter depends on /usr/lib/x86_64-linux-gnu/libstdc++.so.6 version GLIBCXX_3.4.18
+    sources:
+      - ubuntu-toolchain-r-test # if we don't specify this, the libstdc++6 we get is the wrong version
+    packages:
+      - libstdc++6
+      - fonts-droid-fallback
+before_script:
+  - git clone https://github.com/flutter/flutter.git -b master --single-branch
+  - ./flutter/bin/flutter doctor
+  - gem install coveralls-lcov
+script:
+  - ./flutter/bin/flutter analyze
+  - ./flutter/bin/flutter test --coverage
+after_success:
+  - coveralls-lcov coverage/lcov.info
+cache:
+  directories:
+    - $HOME/.pub-cache

CHANGELOG.md

@@ -0,0 +1,441 @@
+# CHANGES
+
+## 0.18.1
+
+- Bump the path_drawing dependency to 0.4.1+1
+- Expose clipBehavior from FittedBox
+- Expose SVG ids in `Drawable*` classes.
+- Change type of `alignment` to `AlignmentGeometry` on `SvgPicture`.
+- Fixed bug in transform parsing
+
+## 0.18.0
+
+- Drop DiagnosticbleMixin usage.
+- Bump XML dependency to ^4.1.0 and resolve deprecated API usages.
+- Await futures in tests.
+
+## 0.17.4
+
+- Allow `precachePicture` to take `null` for a `BuildContext`.
+- Provide a clearer error message when nested `<svg>` elements are used.
+
+## 0.17.3+1
+
+- Fixed regression in v0.17.3 for shape elements with no explicit fill but
+  explicit opacity.
+
+## 0.17.3
+
+- Be more permissive about whitespace in transform attributes.
+- Stop defaulting color to black when not present, fixing issue with colors
+  carried over from `use` elements.
+
+## 0.17.2
+
+- Bumped minimum Flutter version to 1.6.7 to pick up DiagnosticableMixin.
+- Allow more variations of whitespace in base64 encoded image data.
+
+## 0.17.1
+
+- Fix for issue with `use` elements refering to groups or other `use` elements
+  not correctly applying styles.
+
+## 0.17.0
+
+- Make ColorFiltering apply to whole layer instead of per paint operation.
+- **BREAKING** Remove `colorFilter` parameter from `VectorDrawable.draw`.
+- Fix color filtering for text.
+
+## 0.16.1
+
+- Support `image` tags in `defs`.
+- Make `DrawableRasterImage` implement `DrawableStyleable`.
+
+## 0.16.0
+
+- Move `transform` out of `DrawableStyle` and onto `DrawableStyleable`. Shapes
+  already worked this way, and the transform logic was handled in a confusingly
+  different way than all the other style attributes.
+- Support `<use/>` elements having `id`s.
+- Properly apply transforms to referenced use eleemnts.
+
+## 0.15.0
+
+- Respect transformations on `<image/>` tags.
+- Be more tolerant of malformed base64 data, similar to browsers (specifically,
+  having spaces present in the data). ## 0.14.4
+- Apply masks in the correct order when blend modes are involved in shapes.
+
+## 0.14.4
+
+- Support for masks on groups.
+- Update example project to Android X.
+
+## 0.14.3
+
+- Support for the `mix-blend-mode` attribute.
+
+## 0.14.2
+
+- Format, open up obtainKey for testing.
+
+## 0.14.1
+
+- Support for HSL colors (thanks to [@christianalfoni](https://github.com/christianalfoni))
+
+## 0.14.0
+
+- Added support for masks (thanks to [@krispypen](https://github.com/krispypen))
+- Allow for clearing of the picture cache
+
+## 0.13.1
+
+- Fix case where color filters were incorrectly getting created.
+
+## 0.13.0+2
+
+- Same fix for group opacity/saveLayer as in 0.12.4+2
+
+## 0.13.0+1
+
+- Bump path_drawing dependency, which includes bug fixes in parsing.
+
+## 0.13.0
+
+- Updated SDK constraint to support new error message formats
+- Updated error message formats
+- Misc. updates for new SDK features
+
+## 0.12.4+2
+
+- Changed version constraint to prevent pulling down from wrong flutter version.
+- Fixed group opacity/saveLayer bug.
+
+## 0.12.4+1
+
+- Bump dep on path_drawing which contains bugfixes for parsing.
+
+## 0.12.4
+
+- Fixed `opacity` handling, particularly for groups. Previously, opacities were
+  averaged together, which resulted in incorrect compositing (particularly if
+  overlapping shapes were drawn within a group). Now, a new layer is created
+  with the opacity applied to the whole. This may cause some performance
+  degredation, but is more correct.
+- Allow font-size to be specified in `px` (with an explicit postfix).
+- Add `excludeFromSemantics` property for purely decorative SVGs. The default
+  value is false.
+
+## 0.12.3
+
+- Fixed bug with stream completer unregistration.
+- Fixed bug with text transforms in new parsing.
+- Fixed bug with RGBA parsing for opacity
+
+## 0.12.2
+
+- Fixed bug with AVD parsing from strings.
+
+## 0.12.1
+
+- Support for `display="none"` and `visibility="hidden"`.
+
+## 0.12.0
+
+- **BREAKING** Avoid scaling based on devicePixelRatio. This turned out to be a
+  mistake, and caused rendering inconsistencies across devices. It was
+  particularly harmful on devices where the ratio was less than 1.0.
+- Add `precachePicture` method to allow for pre-caching of SVG assets. Similar
+  in functionality to `precacheImage` in the Flutter framework. Also added
+  improvements to error handling in the various related routines.
+
+## 0.11.0+1
+
+- Format source code
+- Remove unintentionally committed pubspec.lock
+
+## 0.11.0
+
+- Rewrote parsing logic to unpin dart-xml dependency, and bumped Dart XML
+  dependency.
+- Fix bug where unsupported elements could impact drawing. Unhandled elements
+  that have children will now be completely ignored. This is technically a
+  breaking change, as previously a child of an unsupported element could have
+  been drawn if it was supported. Fixes [#126](https://github.com/dnfield/flutter_svg/issues/126).
+
+## 0.10.4
+
+- Fix bug in transform logic [#122](https://github.com/dnfield/flutter_svg/issues/122)
+- Avoid defaulting to the rootBundle, using th DefaultAssetBundle instead when
+  resolving pictures [#118](https://github.com/dnfield/flutter_svg/pull/118)
+
+## 0.10.3
+
+- Pin dart-xml to 3.2.5, as 3.3.0 is a breaking change (next release will
+  address this).
+- Support `px` postfixes on many double literals.
+
+## 0.10.2
+
+- Added a `semanticsLabel` property to `SvgPicture`.
+- Updated tests to support async changes in Flutter's `Picture.toImage` method.
+  - This is breaking for tests - tests will now require a more recent version of
+    Flutter to run. It should not break consumers though.
+
+## 0.10.1
+
+This is technically a breaking release, but it also includes important fixes for
+v0.10.0. Rather than splitting the breaking parts out in to v0.11.0 so soon
+after the release of v0.10.0, I'm including some more breaking changes here.
+This will not normally be done.
+
+- Fix bug that caused `<stop>` elements that weren't self-closing to parse
+  improperly.
+- Many documentation updates/improvements.
+- Added support for gradients that use `xlink:href`
+- **BREAKING**: Changed some of the methods on `DrawableDefinitionServer` to
+  support gradients better.
+- **BREAKING**: Removed the `PaintServer` typedef, since this was only serving
+  gradients and we need to have more control there for `xlink:href` support.
+
+## 0.10.0+1
+
+- Fix bug that caused an empty `<defs/>` element prevent rendering.
+
+## 0.10.0
+
+- Rewrite parsing to be more space efficient.
+- Refactor parsing to enable more output possibilities.
+- Create a dedicated SVG parsing class (SvgParser).
+- Updates to text - better support for nested text/tspans.
+- Miscellaneous bug fixes.
+- Testing improvements.
+
+## 0.9.0+1
+
+- Fix inheritance issues with `text-anchor`.
+- Fix a few inconsistencies in text anchor processing/positioning.
+
+## 0.9.0
+
+- **BREAKING** Improvements to text positioning. Thanks to @krispypen!
+
+## 0.8.3
+
+- Implement support for `clipPath` outside of `defs` eleemnts.
+- Implement support for `use` in a `clipPath`.
+- Recommend `usvg` rather than `svgcleaner` per author's recommendation.
+
+## 0.8.2
+
+- Make `DrawableNoop` implement `DrawableStyleable` to avoid crashing with
+  certain unhandled elements.
+- Improve error reporting for certain `<style>` element scenarios.
+
+## 0.8.1
+
+- Revert changes made on 0.7.0 to attempt to utilize `width` and `height`. These
+  changes did not quite fix what they were intended to fix and caused problems
+  they weren't intended to case.
+
+## 0.8.0
+
+- Made parsing `async` to support image loading.
+- Added support for `<image>` elements.
+
+## 0.7.0+1
+
+- By default, `SvgPicture.asset` will now cache the asset. We already cached the
+  final picture, but the caching included any color filtering provided on the
+  image. This is problematic if the color is animated. See
+  [dnfield/flutter_svg#33](https://github.com/dnfield/flutter_svg/issues/33)
+
+## 0.7.0
+
+- **BREAKING** Correct erroneous `width` and `height` processing on the root
+  element.
+  - Previously, `width` and `height` were treated as synonyms for the width and
+    height of the `viewBox`. This is not correct, and resulted in meaningful
+    rendering errors in some scenarios compared to Chrome. Fixing this makes the
+    parser more conformant to the spec, but may make your SVGs look
+    significantly different if they specify `width` or `height`. If you want the
+    old behavior, you'll have to update your SVGs to not specify `width` and
+    `height` (only specify `viewBox`).
+- Use `MediaQuery.of(context).devicePixelRatio` if available before defaulting
+  to `window.devicePixelRatio` in places that need awareness of
+  devicePixelRatios.
+- Support for `<use>`, `<symbol>`, and shape/group elements in `<defs>`. There
+  are some limitations to this currently,
+
+## 0.6.3
+
+- Consume updated version of path_drawing.
+- Fix bug with fill-rule inheritance + example to test.
+
+## 0.6.2
+
+- Consume updated version of path_drawing, which fixes
+  [dnfield/flutter_svg#73](https://github.com/dnfield/flutter_svg/issues/73)
+
+## 0.6.1
+
+- Fixed an issue with stroke and fill inheritance (and added test)
+- General formatting/analyzer cleanup
+
+## 0.6.0
+
+- **BREAKING** Update Flutter version dependencies/package dependencies
+- Print unhandled errors only once, and only in debug mode (000e17f)
+- Add ability to specify a `BoxFit` and `Alignment` for SvgPictures (Thanks
+  @sroddy!).
+- Support `userSpaceOnUse` gradientUnits (@sroddy)
+- Miscellaneous bug fixes
+- Restructure project to match expectations of Flutter tooling
+
+## 0.5.5
+
+- Create a new class to encapsulate `Paint` and assist with inheriting all
+  painting properties.
+- Fixes regression introduced in v0.5.2 where some previously working
+  inheritance stopped working.
+- Support more complex stroke/fill property inheritance.
+
+## 0.5.4
+
+- Consume latest path_drawing (and path_parsing) packages to fix issue(s) with
+  smooth curve handling.
+
+## 0.5.3
+
+- Revert `HttpStatus.OK` change - not ready yet for Flutter beta channel
+
+## 0.5.2
+
+- Fix bug(s) in processing stroke and fill opacity when stroke/fill are
+  inherited.
+- Fix HTTP network headers for network pictures
+
+## 0.5.1
+
+- Consume latest change from path_drawing (fixes exponent validation)
+
+## 0.5.0
+
+- Minimum Flutter version is now 0.5.1 (latest beta as of release)
+  - Merge in support for Focal Pointed Radial Gradients
+  - Use asset directory references in pubspec.yaml
+- Better support for nested `<tspan>` styles
+- Support for `text-anchor` attribute
+- Fix `<ellipse>` parsing bug (ellipses were drawn at half the expected size)
+- Fix `<polyline>` parsing bug (polylines were incorrectly forced to be closed)
+
+## 0.4.1
+
+- Fix bug where widget caused exception in a `FittedBox`
+
+## 0.4.0
+
+- Added `width` and `height` properties to `SvgPicture`
+- Remove deprecated code related to `SvgImage`
+- Improved reporting of error conditions
+  - Unsupported style elements will report an error
+  - Unresolvable definitions will report an error
+- Fixed `matchesTextDirection`
+- Support for `text-anchor`
+
+## 0.3.3
+
+- Fix centering/scaling of canvas when viewBox is not square
+- Improved color parsing
+
+## 0.3.2
+
+- Bug fix around caching for tinting/coloring (color was not being properly
+  included in cache keys)
+
+## 0.3.1
+
+- Support for tinting/coloring the output
+- Documentation updates
+
+## 0.3.0
+
+- This version represents a major rewrite of the widget(s) involved in rendering
+  SVG drawings. This is primarily to support caching and better performance in
+  rendering.
+- New method on DrawableRoot toPicture to create a ui.Picture object from the
+  SVG.
+- Support for caching of Pictures, similar to how framework caches images. This
+  will eventually be configurable, but is not as of this release.
+
+### BREAKING CHANGES
+
+- BREAKING CHANGE: `SvgImage`, `AvdImage`, and `VectorDrawableImage` have been
+  deprecated. They relied on methods that are less efficient than those now
+  surfaced in `SvgPicture`.
+- BREAKING CHANGE: Size is no longer passed to `SvgPicture` - its size is
+  determined by parent size.
+- BREAKING CHANGE: `clipToViewBox` is now called `allowDrawingOutsideViewBox`.
+  It defaults to false. It should not ordinarily be set to true, as it can allow
+  unexpected memory usage if your vector graphic tries to draw far outside of
+  the viewBox bounds.
+- BREAKING CHANGE: `SvgPicture` does not support custom `ErrorWidgetBuilder`s at
+  this point in time. However, errors will be properly logged to the console.
+  This is a result of improvements in the loading/caching of drawings.
+
+## 0.2.0
+
+- Fix bug(s) in inheritance (better rendering of Ghostscript_Tiger.svg)
+- Support for `<clipPath>`s
+- Refactoring of how gradients are handled to enable clipPaths
+- Refactor of SVG shape -> path logic
+
+## 0.1.4
+
+- Fix bugs in `<radialGradient>` percentage handling.
+- Add error widget on error.
+- Add ability to specify error/placeholder widgets.
+- Minor improvement on flutter logo SVG (add missing gradient).
+- Improve docs, unit tests.
+
+## 0.1.3
+
+- Add more unit tests and rendering tests (!).
+- Add top level flutter_svg.dart.
+- Fix bugs found in transform matrix logic for skewX and skewY.
+- Minor improvements in handling inheritance for PathFillType.
+- Support gradient spread types (TileModes in Flutter).
+
+## 0.1.2
+
+- Bump to path_drawing 0.2.3 (fix arc defect).
+- Handle 'none' in dasharray without throwing exception.
+- Better handling of inheritance and 'none' in fill/stroke/dasharray
+
+## 0.1.1
+
+- Handle opacity on groups and inherited/blended opacity.
+- Fixes elements that have both opacity and stroke-opacity or fill-opacity.
+- Improvements for inheritance.
+- Fixes related to unspecified fills on shapes.
+
+## 0.1.0
+
+Bumping minor version due to internal breaking changes and new support. Works on
+dev channel as of release (Flutter >= 0.3.6).
+
+- Refactor `DrawableRoot` to support top level style definition.
+- Support for dash paths.
+- Support for more inherited attributes.
+- Initial support for `@style` attributes.
+- Support for `rgb()` color attribute/styles.
+- Change painting order from stroke first, then fill to fill first, then stroke
+  (matches Chrome rendering of `assets/simple/style_attr.svg`).
+
+## 0.0.2
+
+Initial text support.  Relies on flutter 0.3.6.
+
+## 0.0.1
+
+Initial release.  Relies on pre-released master.

CONTRIBUTING.md

@@ -0,0 +1,64 @@
+# Contributing to Flutter SVG
+
+Found a bug? Want an enhancement?  Feel free to submit a pull request for it!
+
+## Creating a Pull Request
+
+Contributions are welcome in this repo. Before submitting, please ensure that
+your request will pass CI:
+
+```bash
+flutter format .
+flutter analyze .
+flutter test
+```
+
+If you're adding a feature that impacts rendering, please add an SVG asset to
+the `assets/` folder, and then run `flutter test tool/gen_golden.dart` to
+update the golden image files.  Note that this has not been tested in Windows
+platforms. If you're unable to run it, let me know and I'll work with you to
+update the goldens.
+
+Passing the golden tests is critical to ensure backward compatibility, and that
+your code has not unintentionally broken a previously working feature. While
+sometimes such changes are necessary to fix a broken rendering method, they
+should not be introduced without care.
+
+If you're fixing a bug, please make sure to include some tests that fail before
+applying your fix and now succeed. This might be a regular Dart unit test, or
+it could be a SVG in the `assets/` folder and a corresponding PNG in `goldens/`
+that now renders correctly because of your fix.
+
+For the PR to be incorporated into the package, it must be compatible with
+the the latest `beta` channel for Flutter (or, the latest stable/mainline
+release). If it someday becomes possible to conditionally pre-process the
+Dart code based on Flutter/Dart version, this can be relaxed.
+
+## Opening an issue
+
+If you've got an issue and you're not able to fix it yourself, or you're
+looking for feedback before doing any coding work for a PR, feel free to open
+an issue about it.
+
+If the issue is related to rendering or a specific SVG feature, be sure to
+include at least one sample SVG. The smaller/simpler the example, the better.
+
+If the issue is related to architecture/project structure/coding standards,
+consider including some kind of example of what you're trying to achieve. For
+example, instead of saying
+
+> This project should use Design Pattern X to solve Problem Y! I love pattern
+X and when we used it on Project Z it made everything better.
+
+consider
+
+> Here's an example of implementing this feature using Deisgn Pattern X.
+This memory/time benchmark shows that it makes rendering perform 10% faster
+on Phone Model W....
+
+or
+
+> It's very difficult to implement feature A in the current codebase. Applying
+Pattern X could help solve this, as in the following example....
+
+which will be received better.

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018 Dan Field
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,178 @@
+# flutter_svg
+
+[![Pub](https://img.shields.io/pub/v/flutter_svg.svg)](https://pub.dartlang.org/packages/flutter_svg) [![Build Status](https://travis-ci.org/dnfield/flutter_svg.svg?branch=master)](https://travis-ci.org/dnfield/flutter_svg) [![Coverage Status](https://coveralls.io/repos/github/dnfield/flutter_svg/badge.svg?branch=master)](https://coveralls.io/github/dnfield/flutter_svg?branch=master)
+
+<!-- markdownlint-disable MD033 -->
+<img src="/../master/example/assets/flutter_logo.svg?sanitize=true" width="200px" alt="Flutter Logo which can be rendered by this package!">
+<!-- markdownlint-enable MD033 -->
+
+Draw SVG (and _some_ Android VectorDrawable (XML)) files on a Flutter Widget.
+
+## Getting Started
+
+This is a Dart-native rendering library. Issues/PRs will be raised in Flutter
+and flutter/engine as necessary for features that are not good candidates for
+Dart implementations (especially if they're impossible to implement without
+engine support). However, not everything that Skia can easily do needs to be
+done by Skia; for example, the Path parsing logic here isn't much slower than
+doing it in native, and Skia isn't always doing low level GPU accelerated work
+where you might think it is (e.g. Dash Paths).
+
+All of the SVGs in the `assets/` folder (except the text related one(s)) now
+have corresponding PNGs in the `golden/` folder that were rendered using
+`flutter test tool/gen_golden.dart` and compared against their rendering output
+in Chrome. Automated tests will continue to compare these to ensure code changes
+do not break known-good renderings.
+
+Basic usage (to create an SVG rendering widget from an asset):
+
+```dart
+final String assetName = 'assets/image.svg';
+final Widget svg = SvgPicture.asset(
+  assetName,
+  semanticsLabel: 'Acme Logo'
+);
+```
+
+You can color/tint the image like so:
+
+```dart
+final String assetName = 'assets/up_arrow.svg';
+final Widget svgIcon = SvgPicture.asset(
+  assetName,
+  color: Colors.red,
+  semanticsLabel: 'A red up arrow'
+);
+```
+
+The default placeholder is an empty box (`LimitedBox`) - although if a `height`
+or `width` is specified on the `SvgPicture`, a `SizedBox` will be used instead
+(which ensures better layout experience). There is currently no way to show an
+Error visually, however errors will get properly logged to the console in debug
+mode.
+
+You can also specify a placeholder widget. The placeholder will display during
+parsing/loading (normally only relevant for network access).
+
+```dart
+// Will print error messages to the console.
+final String assetName = 'assets/image_that_does_not_exist.svg';
+final Widget svg = SvgPicture.asset(
+  assetName,
+);
+
+final Widget networkSvg = SvgPicture.network(
+  'https://site-that-takes-a-while.com/image.svg',
+  semanticsLabel: 'A shark?!',
+  placeholderBuilder: (BuildContext context) => Container(
+      padding: const EdgeInsets.all(30.0),
+      child: const CircularProgressIndicator()),
+);
+```
+
+If you'd like to render the SVG to some other canvas, you can do something like:
+
+```dart
+import 'package:flutter_svg/flutter_svg.dart';
+final String rawSvg = '''<svg viewBox="...">...</svg>''';
+final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
+
+// If you only want the final Picture output, just use
+final Picture picture = svgRoot.toPicture();
+
+// Otherwise, if you want to draw it to a canvas:
+// Optional, but probably normally desirable: scale the canvas dimensions to
+// the SVG's viewbox
+svgRoot.scaleCanvasToViewBox(canvas);
+
+// Optional, but probably normally desireable: ensure the SVG isn't rendered
+// outside of the viewbox bounds
+svgRoot.clipCanvasToViewBox(canvas);
+svgRoot.draw(canvas, size);
+```
+
+The `SvgPicture` helps to automate this logic, and it provides some convenience
+wrappers for getting assets from multiple sources and caching the resultant
+`Picture`. _It does not render the data to an `Image` at any point_; you
+certainly can do that in Flutter, but you then lose some of the benefit of
+having a vector format to begin with.
+
+While I'm making every effort to avoid needlessly changing the API, it's not
+guarnateed to be stable yet (hence the pre-1.0.0 version). To date, the biggest
+change is deprecating the `SvgImage` widgets in favor of `SvgPicture` - it
+became very confusing to maintain that name, as `Picture`s are the underlying
+mechanism for rendering rather than `Image`s.
+
+See [main.dart](/../master/example/lib/main.dart) for a complete sample.
+
+## Use Cases
+
+- Your designer creates a vector asset that you want to include without
+  converting to 5 different raster format resolutions.
+- Your vector drawing is meant to be static and non (or maybe minimally)
+  interactive.
+- You want to load SVGs dynamically from network sources at runtime.
+- You want to paint SVG data and render it to an image.
+
+## TODO
+
+This list is not very well ordered. I'm mainly picking up things that seem
+interesting or useful, or where I've gotten a request to fix something/example
+of something that's broken.
+
+- Text support (partially implemented).
+- Support Radial gradients that use percentages in the offsets.
+- Dash path with percentage dasharray values (need good examples).
+- Display/visibility support. My hunch is that this is usually used more for SVG
+  specific interactivity, which isn't supported or planned.
+- Inheritance of inheritable properties (~~necessary? preprocess?~~ significant
+  progress, still some rough edges, particularly for definitions).
+- Support for minimal CSS/styles? See also [usvg](https://github.com/RazrFalcon/resvg/tree/master/usvg)
+  (partial style attribute mostly supported).
+- Markers.
+- Filters/effects (will require upstream engine changes, but doable).
+- Android Vector Drawable support beyond PoC - I'm willing to put more time into
+  this if there's actually demand, but it doesn't come up often.
+
+## Probably out of scope/non-goals
+
+- SMIL animations. That just seems crazy. I think it'll be possible to animate
+  the SVG but probably in a more Flutter driven way.
+- Interactivity/events in SVG.
+- Full (any?) CSS support - preprocess your SVGs (perhaps with [usvg](https://github.com/RazrFalcon/resvg/tree/master/usvg) or [scour](https://github.com/scour-project/scour) to get rid of all CSS?).
+- Scripting in SVGs
+- Foreign elements
+- Rendering properties/hints
+
+## Recommended Adobe Illustrator SVG Configuration
+- In Styling: choose Presentation Attributes instead of Inline CSS because CSS is not fully supported.
+- In Images: choose Embded not Linked to other file to get a single svg with no dependency to other files.
+- In Objects IDs: choose layer names to add every layer name to svg tags or you can use minimal,it is optional.
+![Export configuration](https://user-images.githubusercontent.com/2842459/62599914-91de9c00-b8fe-11e9-8fb7-4af57d5100f7.png)
+## SVG sample attribution
+
+SVGs in `/assets/w3samples` pulled from [W3 sample files](https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/)
+
+SVGs in `/assets/deborah_ufw` provided by @deborah-ufw
+
+SVGs in `/assets/simple` are pulled from trivial examples or generated to test
+basic functionality - some of them come directly from the SVG 1.1 spec. Some
+have also come or been adapted from issues raised in this repository.
+
+SVGs in `/assets/wikimedia` are pulled from [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)
+
+Android Drawables in `/assets/android_vd` are pulled from Android Documentation
+and examples.
+
+The Flutter Logo created based on the Flutter Logo Widget © Google.
+
+The Dart logo is from
+[dartlang.org](https://github.com/dart-lang/site-shared/blob/master/src/_assets/images/dart/logo%2Btext/horizontal/original.svg)
+© Google
+
+SVGs in `/assets/noto-emoji` are from [Google i18n noto-emoji](https://github.com/googlei18n/noto-emoji),
+licensed under the Apache license.
+
+Please submit SVGs this can't render properly (e.g. that don't render here the
+way they do in chrome), as long as they're not using anything "probably out of
+scope" (above).

analysis_options.yaml

@@ -0,0 +1,168 @@
+# Specify analysis options.
+#
+# Until there are meta linter rules, each desired lint must be explicitly enabled.
+# See: https://github.com/dart-lang/linter/issues/288
+#
+# For a list of lints, see: http://dart-lang.github.io/linter/lints/
+# See the configuration guide for more
+# https://github.com/dart-lang/sdk/tree/master/pkg/analyzer#configuring-the-analyzer
+#
+# There are other similar analysis options files in the flutter repos,
+# which should be kept in sync with this file:
+#
+#   - analysis_options.yaml (this file)
+#   - packages/flutter/lib/analysis_options_user.yaml
+#   - https://github.com/flutter/plugins/blob/master/analysis_options.yaml
+#   - https://github.com/flutter/engine/blob/master/analysis_options.yaml
+#
+# This file contains the analysis options used by Flutter tools, such as IntelliJ,
+# Android Studio, and the `flutter analyze` command.
+
+analyzer:
+  strong-mode:
+    implicit-casts: false
+    implicit-dynamic: false
+  errors:
+    # treat missing required parameters as a warning (not a hint)
+    missing_required_param: warning
+    # treat missing returns as a warning (not a hint)
+    missing_return: warning
+    # allow having TODOs in the code
+    todo: ignore
+  exclude:
+    - 'flutter/**'
+
+linter:
+  rules:
+    # these rules are documented on and in the same order as
+    # the Dart Lint rules page to make maintenance easier
+    # https://github.com/dart-lang/linter/blob/master/example/all.yaml
+    - always_declare_return_types
+    - always_put_control_body_on_new_line
+    # - always_put_required_named_parameters_first # we prefer having parameters in the same order as fields https://github.com/flutter/flutter/issues/10219
+    - always_require_non_null_named_parameters
+    - always_specify_types
+    - annotate_overrides
+    # - avoid_annotating_with_dynamic # conflicts with always_specify_types
+    # - avoid_as # conflicts with implicit-casts: false
+    # - avoid_bool_literals_in_conditional_expressions # not yet tested
+    # - avoid_catches_without_on_clauses # we do this commonly
+    # - avoid_catching_errors # we do this commonly
+    - avoid_classes_with_only_static_members
+    # - avoid_double_and_int_checks # only useful when targeting JS runtime
+    - avoid_empty_else
+    - avoid_field_initializers_in_const_classes
+    - avoid_function_literals_in_foreach_calls
+    # - avoid_implementing_value_types # not yet tested
+    - avoid_init_to_null
+    # - avoid_js_rounded_ints # only useful when targeting JS runtime
+    - avoid_null_checks_in_equality_operators
+    # - avoid_positional_boolean_parameters # not yet tested
+    # - avoid_private_typedef_functions # we prefer having typedef (discussion in https://github.com/flutter/flutter/pull/16356)
+    - avoid_relative_lib_imports
+    - avoid_renaming_method_parameters
+    - avoid_return_types_on_setters
+    # - avoid_returning_null # there are plenty of valid reasons to return null
+    - avoid_returning_null_for_void
+    # - avoid_returning_this # there are plenty of valid reasons to return this
+    # - avoid_setters_without_getters # not yet tested
+    # - avoid_single_cascade_in_expression_statements # not yet tested
+    - avoid_slow_async_io
+    - avoid_types_as_parameter_names
+    # - avoid_types_on_closure_parameters # conflicts with always_specify_types
+    - avoid_unused_constructor_parameters
+    - avoid_void_async
+    - await_only_futures
+    - camel_case_types
+    - cancel_subscriptions
+    # - cascade_invocations # not yet tested
+    # - close_sinks # not reliable enough
+    # - comment_references # blocked on https://github.com/flutter/flutter/issues/20765
+    # - constant_identifier_names # needs an opt-out https://github.com/dart-lang/linter/issues/204
+    - control_flow_in_finally
+    # - curly_braces_in_flow_control_structures # not yet tested
+    - directives_ordering
+    - empty_catches
+    - empty_constructor_bodies
+    - empty_statements
+    # - file_names # not yet tested
+    - flutter_style_todos
+    - hash_and_equals
+    - implementation_imports
+    # - invariant_booleans # too many false positives: https://github.com/dart-lang/linter/issues/811
+    - iterable_contains_unrelated_type
+    # - join_return_with_assignment # not yet tested
+    - library_names
+    - library_prefixes
+    # - lines_longer_than_80_chars # not yet tested
+    - list_remove_unrelated_type
+    # - literal_only_boolean_expressions # too many false positives: https://github.com/dart-lang/sdk/issues/34181
+    - no_adjacent_strings_in_list
+    - no_duplicate_case_values
+    - non_constant_identifier_names
+    # - null_closures  # not yet tested
+    # - omit_local_variable_types # opposite of always_specify_types
+    # - one_member_abstracts # too many false positives
+    # - only_throw_errors # https://github.com/flutter/flutter/issues/5792
+    - overridden_fields
+    - package_api_docs
+    - package_names
+    - package_prefixed_library_names
+    # - parameter_assignments # we do this commonly
+    - prefer_adjacent_string_concatenation
+    - prefer_asserts_in_initializer_lists
+    - prefer_collection_literals
+    - prefer_conditional_assignment
+    - prefer_const_constructors
+    - prefer_const_constructors_in_immutables
+    - prefer_const_declarations
+    - prefer_const_literals_to_create_immutables
+    # - prefer_constructors_over_static_methods # not yet tested
+    - prefer_contains
+    - prefer_equal_for_default_values
+    # - prefer_expression_function_bodies # conflicts with https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#consider-using--for-short-functions-and-methods
+    - prefer_final_fields
+    - prefer_final_locals
+    - prefer_foreach
+    # - prefer_function_declarations_over_variables # not yet tested
+    - prefer_generic_function_type_aliases
+    - prefer_initializing_formals
+    # - prefer_int_literals # not yet tested
+    # - prefer_interpolation_to_compose_strings # not yet tested
+    - prefer_is_empty
+    - prefer_is_not_empty
+    - prefer_iterable_whereType
+    # - prefer_mixin # https://github.com/dart-lang/language/issues/32
+    - prefer_single_quotes
+    - prefer_typing_uninitialized_variables
+    - prefer_void_to_null
+    # - public_member_api_docs # enabled on a case-by-case basis; see e.g. packages/analysis_options.yaml
+    - recursive_getters
+    - slash_for_doc_comments
+    - sort_constructors_first
+    - sort_pub_dependencies
+    - sort_unnamed_constructors_first
+    - public_member_api_docs
+    - test_types_in_equals
+    - throw_in_finally
+    # - type_annotate_public_apis # subset of always_specify_types
+    - type_init_formals
+    # - unawaited_futures # too many false positives
+    - unnecessary_brace_in_string_interps
+    - unnecessary_const
+    - unnecessary_getters_setters
+    # - unnecessary_lambdas # has false positives: https://github.com/dart-lang/linter/issues/498
+    - unnecessary_new
+    - unnecessary_null_aware_assignments
+    - unnecessary_null_in_if_null_operators
+    - unnecessary_overrides
+    - unnecessary_parenthesis
+    - unnecessary_statements
+    - unnecessary_this
+    - unrelated_type_equality_checks
+    - use_rethrow_when_possible
+    # - use_setters_to_change_properties # not yet tested
+    # - use_string_buffers # has false positives: https://github.com/dart-lang/sdk/issues/34182
+    # - use_to_and_as_if_applicable # has false positives, so we prefer to catch this by code-review
+    - valid_regexps
+    # - void_checks # not yet tested

example/.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+.dart_tool/
+
+.packages
+.pub/
+
+build/
+
+.flutter-plugins
+
+flutter_export_environment.sh
+
+flutter_*.log

example/.metadata

@@ -0,0 +1,8 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: d194c25bef494053b0fb6c5be4b9d46f909cad3a
+  channel: hide_fab

example/README.md

@@ -0,0 +1,8 @@
+# example
+
+A new Flutter project.
+
+## Getting Started
+
+For help getting started with Flutter, view our online
+[documentation](https://flutter.io/).

example/android/.gitignore

@@ -0,0 +1,10 @@
+gradle-wrapper.jar
+/.gradle
+/captures/
+/gradlew
+/gradlew.bat
+/local.properties
+.DS_Store
+/build
+.idea
+GeneratedPluginRegistrant.java

example/android/app/build.gradle

@@ -0,0 +1,67 @@
+def localProperties = new Properties()
+def localPropertiesFile = rootProject.file('local.properties')
+if (localPropertiesFile.exists()) {
+    localPropertiesFile.withReader('UTF-8') { reader ->
+        localProperties.load(reader)
+    }
+}
+
+def flutterRoot = localProperties.getProperty('flutter.sdk')
+if (flutterRoot == null) {
+    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
+}
+
+def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
+if (flutterVersionCode == null) {
+    flutterVersionCode = '1'
+}
+
+def flutterVersionName = localProperties.getProperty('flutter.versionName')
+if (flutterVersionName == null) {
+    flutterVersionName = '1.0'
+}
+
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
+
+android {
+    compileSdkVersion 28
+
+    sourceSets {
+        main.java.srcDirs += 'src/main/kotlin'
+    }
+
+    lintOptions {
+        disable 'InvalidPackage'
+    }
+
+    defaultConfig {
+        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
+        applicationId "com.example.example"
+        minSdkVersion 16
+        targetSdkVersion 28
+        versionCode flutterVersionCode.toInteger()
+        versionName flutterVersionName
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+
+    buildTypes {
+        release {
+            // TODO: Add your own signing config for the release build.
+            // Signing with the debug keys for now, so `flutter run --release` works.
+            signingConfig signingConfigs.debug
+        }
+    }
+}
+
+flutter {
+    source '../..'
+}
+
+dependencies {
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    testImplementation 'junit:junit:4.12'
+    androidTestImplementation 'androidx.test:runner:1.1.1'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
+}

example/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.example">
+    <!-- Flutter needs it to communicate with the running application
+         to allow setting breakpoints, to provide hot reload, etc.
+    -->
+    <uses-permission android:name="android.permission.INTERNET"/>
+</manifest>

example/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,32 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.example">
+    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
+         calls FlutterMain.startInitialization(this); in its onCreate method.
+         In most cases you can leave this as-is, but you if you want to provide
+         additional functionality it is fine to subclass or reimplement
+         FlutterApplication and put your custom class here. -->
+    <application
+        android:name="io.flutter.app.FlutterApplication"
+        android:label="example"
+        android:icon="@mipmap/ic_launcher">
+        <activity
+            android:name=".MainActivity"
+            android:launchMode="singleTop"
+            android:theme="@style/LaunchTheme"
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
+            android:hardwareAccelerated="true"
+            android:windowSoftInputMode="adjustResize">
+            <!-- This keeps the window background of the activity showing
+                 until Flutter renders its first frame. It can be removed if
+                 there is no splash screen (such as the default splash screen
+                 defined in @style/LaunchTheme). -->
+            <meta-data
+                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
+                android:value="true" />
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>

example/android/app/src/main/kotlin/com/example/example/MainActivity.kt

@@ -0,0 +1,12 @@
+package com.example.example
+
+import android.os.Bundle
+import io.flutter.app.FlutterActivity
+import io.flutter.plugins.GeneratedPluginRegistrant
+
+class MainActivity: FlutterActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        GeneratedPluginRegistrant.registerWith(this)
+    }
+}

example/android/app/src/main/res/drawable/launch_background.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@android:color/white" />
+
+    <!-- You can insert your own image assets here -->
+    <!-- <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@mipmap/launch_image" />
+    </item> -->
+</layer-list>

example/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <!-- Show a splash screen on the activity. Automatically removed when
+             Flutter draws its first frame -->
+        <item name="android:windowBackground">@drawable/launch_background</item>
+    </style>
+</resources>

example/android/app/src/profile/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.example">
+    <!-- Flutter needs it to communicate with the running application
+         to allow setting breakpoints, to provide hot reload, etc.
+    -->
+    <uses-permission android:name="android.permission.INTERNET"/>
+</manifest>

example/android/build.gradle

@@ -0,0 +1,31 @@
+buildscript {
+    ext.kotlin_version = '1.3.50'
+    repositories {
+        google()
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.5.0'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+allprojects {
+    repositories {
+        google()
+        jcenter()
+    }
+}
+
+rootProject.buildDir = '../build'
+subprojects {
+    project.buildDir = "${rootProject.buildDir}/${project.name}"
+}
+subprojects {
+    project.evaluationDependsOn(':app')
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

example/android/example_android.iml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="android" name="Android">
+      <configuration>
+        <option name="ALLOW_USER_CONFIGURATION" value="false" />
+        <option name="GEN_FOLDER_RELATIVE_PATH_APT" value="/gen" />
+        <option name="GEN_FOLDER_RELATIVE_PATH_AIDL" value="/gen" />
+        <option name="MANIFEST_FILE_RELATIVE_PATH" value="/app/src/main/AndroidManifest.xml" />
+        <option name="RES_FOLDER_RELATIVE_PATH" value="/app/src/main/res" />
+        <option name="ASSETS_FOLDER_RELATIVE_PATH" value="/app/src/main/assets" />
+        <option name="LIBS_FOLDER_RELATIVE_PATH" value="/app/src/main/libs" />
+        <option name="PROGUARD_LOGS_FOLDER_RELATIVE_PATH" value="/app/src/main/proguard_logs" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/app/src/main/java" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/app/src/main/kotlin" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/gen" isTestSource="false" generated="true" />
+    </content>
+    <orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="Flutter for Android" level="project" />
+    <orderEntry type="library" name="KotlinJavaRuntime" level="project" />
+  </component>
+</module>

example/android/gradle.properties

@@ -0,0 +1,4 @@
+org.gradle.jvmargs=-Xmx1536M
+android.enableR8=true
+android.useAndroidX=true
+android.enableJetifier=true

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,6 @@
+#Fri Jun 23 08:50:38 CEST 2017
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip

example/android/settings.gradle

@@ -0,0 +1,15 @@
+include ':app'
+
+def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
+
+def plugins = new Properties()
+def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
+if (pluginsFile.exists()) {
+    pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
+}
+
+plugins.each { name, path ->
+    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
+    include ":$name"
+    project(":$name").projectDir = pluginDirectory
+}

example/assets/android_vd/battery_charging.xml

@@ -0,0 +1,22 @@
+<!-- res/drawable/battery_charging.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+   <group
+         android:name="rotationGroup"
+         android:pivotX="10.0"
+         android:pivotY="10.0"
+         android:rotation="15.0" >
+      <path
+        android:name="vect"
+        android:fillColor="#FF000000"
+        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
+        android:fillAlpha=".3"/>
+      <path
+        android:name="draw"
+        android:fillColor="#FF000000"
+        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
+   </group>
+</vector>

example/assets/dart.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 439 137.29" enable-background="new 0 0 439 137.29" xml:space="preserve">
+<g>
+	<g opacity="0.54">
+		<path d="M207.08,20.2h27.55c9.35,0,17.51,1.93,24.49,5.8c6.97,3.87,12.33,9.25,16.07,16.13c3.74,6.89,5.61,14.79,5.61,23.72
+			s-1.87,16.83-5.61,23.72s-9.1,12.26-16.07,16.13c-6.97,3.87-15.13,5.8-24.49,5.8h-27.55V20.2z M234.63,101.19
+			c10.8,0,19.36-3.1,25.7-9.31c6.33-6.21,9.5-14.88,9.5-26.02s-3.17-19.81-9.5-26.02c-6.33-6.21-14.9-9.31-25.7-9.31H217.8v70.65
+			h16.83V101.19z"/>
+		<path d="M297.49,110.75c-3.74-1.87-6.63-4.44-8.67-7.72c-2.04-3.27-3.06-6.99-3.06-11.16c0-6.89,2.59-12.26,7.78-16.13
+			c5.18-3.87,11.73-5.8,19.64-5.8c3.91,0,7.54,0.43,10.9,1.28s5.93,1.83,7.72,2.93V70.2c0-4.85-1.7-8.74-5.1-11.67
+			c-3.4-2.93-7.7-4.4-12.88-4.4c-3.66,0-7.01,0.79-10.08,2.36c-3.06,1.57-5.48,3.76-7.27,6.57l-8.16-6.12
+			c2.55-3.91,6.06-6.97,10.52-9.18c4.46-2.21,9.42-3.32,14.86-3.32c8.84,0,15.79,2.32,20.85,6.95c5.06,4.64,7.59,10.95,7.59,18.94
+			v41.19H331.8v-9.31h-0.51c-1.87,3.15-4.68,5.82-8.42,8.03c-3.74,2.21-7.95,3.32-12.63,3.32
+			C305.49,113.56,301.24,112.62,297.49,110.75z M321.47,101.19c3.14-1.87,5.65-4.38,7.52-7.52s2.81-6.59,2.81-10.33
+			c-2.04-1.36-4.55-2.47-7.52-3.32c-2.98-0.85-6.12-1.28-9.44-1.28c-5.95,0-10.44,1.23-13.45,3.7c-3.02,2.47-4.53,5.66-4.53,9.56
+			c0,3.57,1.36,6.46,4.08,8.67c2.72,2.21,6.16,3.32,10.33,3.32C314.92,103.99,318.33,103.06,321.47,101.19z"/>
+		<path d="M353.57,47.5h10.33v10.33h0.51c1.53-3.83,4.12-6.8,7.78-8.93c3.65-2.12,7.65-3.19,11.99-3.19c1.87,0,3.44,0.13,4.72,0.38
+			v11.1c-1.45-0.34-3.4-0.51-5.87-0.51c-5.53,0-10.01,1.83-13.45,5.48c-3.44,3.66-5.17,8.42-5.17,14.28v36.09h-10.84V47.5
+			L353.57,47.5z M420.89,112.26c-2.25-0.86-4.14-2.03-5.68-3.51c-1.7-1.64-2.98-3.55-3.83-5.71c-0.85-2.16-1.28-4.8-1.28-7.92V56.3
+			h-11.35v-9.82h11.35V28.12h10.84v18.36h15.81v9.82h-15.81v36.24c0,3.65,0.68,6.34,2.04,8.08c1.61,1.91,3.95,2.87,7.01,2.87
+			c2.46,0,4.85-0.72,7.14-2.17v10.59c-1.28,0.59-2.57,1.02-3.89,1.28s-3,0.38-5.04,0.38C425.59,113.56,423.15,113.12,420.89,112.26z
+			"/>
+	</g>
+	<g>
+		<path fill="#01579B" d="M29.64,108.94L6.36,85.66c-2.76-2.84-4.48-6.84-4.48-10.75c0-1.81,1.02-4.64,1.79-6.27l21.49-44.77
+			L29.64,108.94z"/>
+		<path fill="#40C4FF" d="M109.34,28.35L86.06,5.07c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87
+			L109.34,28.35z"/>
+		<polygon fill="#40C4FF" points="57.4,136.7 113.82,136.7 113.82,112.52 71.73,99.09 33.23,112.52 		"/>
+		<path fill="#29B6F6" d="M25.17,96.41c0,7.18,0.9,8.95,4.48,12.54l3.58,3.58h80.59l-39.4-44.77L25.17,23.88V96.41z"/>
+		<path fill="#01579B" d="M96.8,23.87H25.16l88.65,88.65h24.18V57l-28.65-28.65C105.32,24.31,101.74,23.87,96.8,23.87z"/>
+		<path opacity="0.2" fill="#FFFFFF" enable-background="new    " d="M30.54,109.84c-3.58-3.6-4.48-7.14-4.48-13.43V24.77l-0.9-0.9
+			V96.4C25.17,102.7,25.17,104.44,30.54,109.84l2.69,2.69l0,0L30.54,109.84z"/>
+		<polygon opacity="0.2" fill="#263238" enable-background="new    " points="137.1,56.11 137.1,111.63 112.92,111.63
+			113.82,112.52 138,112.52 138,57.01 		"/>
+		<path opacity="0.2" fill="#FFFFFF" enable-background="new    " d="M109.34,28.35c-4.44-4.44-8.08-4.48-13.43-4.48H25.17l0.9,0.9
+			h69.85C98.58,24.77,105.33,24.32,109.34,28.35L109.34,28.35z"/>
+
+			<radialGradient id="SVGID_1_" cx="69.955" cy="60.8864" r="68.065" gradientTransform="matrix(1 0 0 -1 0 129.5328)" gradientUnits="userSpaceOnUse">
+			<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
+			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+		</radialGradient>
+		<path opacity="0.2" fill="url(#SVGID_1_)" enable-background="new    " d="M137.1,56.11l-27.76-27.76L86.06,5.07
+			c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87L3.68,68.64c-0.77,1.63-1.79,4.46-1.79,6.27
+			c0,3.91,1.72,7.91,4.48,10.75l21.46,21.3c0.51,0.63,1.11,1.27,1.83,1.98l0.9,0.9l2.69,2.69l23.28,23.28l0.9,0.9h55.52h0.9v-24.18
+			h24.18v-0.06V57.01L137.1,56.11z"/>
+	</g>
+</g>
+</svg>

example/assets/deborah_ufw/new-action-expander.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<path d="M13.203,21.79639c-0.22903,0-0.45807-0.08487-0.63598-0.25664c-0.364-0.35071-0.37474-0.93045-0.02352-1.29548
+		l5.27751-5.47536l-5.27649-5.38845c-0.35429-0.36196-0.34815-0.9417,0.01329-1.29548
+		c0.36196-0.35378,0.9417-0.34764,1.29548,0.01329l5.89917,6.02443c0.34713,0.35378,0.34918,0.92023,0.00511,1.27707
+		l-5.89508,6.11645C13.68305,21.70233,13.44277,21.79639,13.203,21.79639z"/>
+	<path d="M15,29.00383C7.27826,29.00383,0.99617,22.72174,0.99617,15S7.27826,0.99617,15,0.99617S29.00383,7.27826,29.00383,15
+		S22.72174,29.00383,15,29.00383z M15,2.82845C8.28847,2.82845,2.82845,8.28847,2.82845,15S8.28847,27.17155,15,27.17155
+		S27.17155,21.71153,27.17155,15S21.71153,2.82845,15,2.82845z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-camera.svg

@@ -0,0 +1,21 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<path d="M14.43339,18.88085c2.15923,0,3.91203-1.7476,3.91203-3.91226c0-2.15805-1.7528-3.90566-3.91723-3.90566
+		c-0.74107,0-1.43221,0.21538-2.02332,0.57576c0.18598-0.05526,0.37562-0.09493,0.58084-0.09493
+		c1.09756,0,1.98365,0.88609,1.98365,1.98235c0,1.09248-0.88608,1.98376-1.98365,1.98376
+		c-1.09627,0-1.98235-0.88608-1.98235-1.98376c0-0.20499,0.03979-0.39486,0.09493-0.58096
+		c-0.36027,0.59135-0.57576,1.28236-0.57576,2.02344C10.52254,17.13325,12.27026,18.88085,14.43339,18.88085z"/>
+	<path d="M24.55235,1.00006H5.44812C2.99534,1.00006,1,2.99563,1,5.44747v19.10459c0,2.45278,1.99533,4.44788,4.44812,4.44788
+		h19.10423c2.45243,0,4.44765-1.9951,4.44765-4.44788V5.44747C29,2.99563,27.00479,1.00006,24.55235,1.00006z M27.32951,24.55206
+		c0,1.53175-1.246,2.77774-2.77715,2.77774H5.44812c-1.53151,0-2.77751-1.246-2.77751-2.77774v-8.83719h4.08065
+		c0.37644,3.90943,3.67563,6.97482,7.67705,6.97482c4.00709,0,7.3065-3.06539,7.68295-6.97482h5.21824V24.55206z M8.36366,14.96859
+		c0-3.34831,2.7161-6.06418,6.06453-6.06418c3.35469,0,6.07079,2.71587,6.07079,6.06418c0,3.35492-2.7161,6.07079-6.07079,6.07079
+		C11.07977,21.03938,8.36366,18.32351,8.36366,14.96859z M27.32951,13.75472h-5.28579
+		c-0.58568-3.67705-3.77116-6.5006-7.61541-6.5006c-3.83882,0-7.02383,2.82356-7.60951,6.5006H2.67061V5.44747
+		c0-1.53128,1.246-2.7768,2.77751-2.7768h19.10423c1.53116,0,2.77715,1.24552,2.77715,2.7768V13.75472z"/>
+	<path d="M24.06196,5.11637h-1.75185c-0.48236,0-0.87593,0.39345-0.87593,0.87569v1.75186
+		c0,0.48225,0.39356,0.87616,0.87593,0.87616h1.75186c0.47776,0,0.87038-0.39392,0.87038-0.87616V5.99205
+		C24.93234,5.50982,24.53972,5.11637,24.06196,5.11637z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-gif-button.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M15,1.0129c-7.71274,0-13.98709,6.27439-13.98709,13.98709C1.01291,22.71273,7.28726,28.9871,15,28.9871
+			c7.7127,0,13.98709-6.27437,13.98709-13.98711C28.98709,7.28729,22.7127,1.0129,15,1.0129L15,1.0129z M15,28.05345
+			c-7.1987,0-13.05346-5.85476-13.05346-13.05346C1.94654,7.80131,7.8013,1.94655,15,1.94655
+			c7.19868,0,13.05344,5.85476,13.05344,13.05344C28.05344,22.19869,22.19868,28.05345,15,28.05345L15,28.05345z"/>
+	</g>
+</g>
+<g>
+	<path d="M12.89883,14.61384v3.33755c-0.41494,0.3079-0.85674,0.53361-1.3262,0.67593
+		c-0.46946,0.14272-0.9718,0.21408-1.50741,0.21408c-0.66711,0-1.27168-0.10464-1.8125-0.31391
+		c-0.54122-0.20887-1.00307-0.49993-1.38554-0.87277c-0.38287-0.37284-0.67793-0.81785-0.8852-1.33502
+		c-0.20727-0.51737-0.3111-1.08204-0.3111-1.69443c0-0.62,0.09983-1.18849,0.29988-1.70586
+		c0.19965-0.51717,0.48349-0.96218,0.85113-1.33502c0.36763-0.37264,0.81344-0.6617,1.33743-0.86716s1.11212-0.3081,1.76479-0.3081
+		c0.33155,0,0.64185,0.02666,0.9301,0.07998c0.28865,0.05312,0.55606,0.12649,0.80302,0.2195
+		c0.24696,0.09321,0.47227,0.20647,0.67593,0.33957c0.20366,0.1331,0.39048,0.27943,0.56007,0.43919l-0.43539,0.69598
+		c-0.06815,0.11045-0.15675,0.178-0.2658,0.20266c-0.10945,0.02466-0.22852-0.00281-0.35641-0.08279
+		c-0.12468-0.07216-0.24896-0.14453-0.37324-0.21669c-0.12468-0.07236-0.263-0.13511-0.41574-0.18843
+		c-0.15275-0.05312-0.32433-0.09682-0.51476-0.1311s-0.41013-0.05132-0.65869-0.05132c-0.40371,0-0.76854,0.06835-1.09448,0.20526
+		c-0.32634,0.13691-0.60417,0.33295-0.83429,0.58773c-0.23012,0.25478-0.40732,0.56107-0.5316,0.91848
+		c-0.12429,0.35762-0.18684,0.75692-0.18684,1.19812c0,0.47167,0.06695,0.89282,0.20085,1.26366s0.32233,0.68455,0.56568,0.94153
+		c0.24335,0.25658,0.53641,0.45263,0.87959,0.58733c0.34278,0.13511,0.72564,0.20286,1.1478,0.20286
+		c0.30188,0,0.57129-0.03247,0.80903-0.09702c0.23734-0.06495,0.46946-0.15234,0.69557-0.26259v-1.49478h-1.02953
+		c-0.09782,0-0.17439-0.02746-0.22892-0.08279c-0.05452-0.05513-0.08219-0.12268-0.08219-0.20246v-0.86716h2.71496V14.61384z"/>
+	<path d="M15.89601,18.75h-1.52705v-8.24967h1.52705V18.75z"/>
+	<path d="M19.25,11.7213v2.44172h3.06534v1.22678H19.25V18.75h-1.52705v-8.24967h5.15807v1.22096H19.25V11.7213z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-gif.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<path d="M10.0508,15.8147c0,0.08809,0.03023,0.16236,0.09098,0.2227c0.06034,0.06034,0.14518,0.09057,0.2537,0.09057h1.14037
+		v1.64198c-0.25086,0.12074-0.50781,0.21697-0.77089,0.28794c-0.26303,0.07097-0.56159,0.10604-0.89565,0.10604
+		c-0.46778,0-0.89193-0.07339-1.27168-0.22188c-0.3801-0.14843-0.70477-0.36381-0.97435-0.6452
+		c-0.26917-0.28221-0.47799-0.62648-0.62648-1.03433c-0.14802-0.40703-0.22229-0.86955-0.22229-1.38751
+		c0-0.48455,0.06896-0.92257,0.20682-1.31489c0.13786-0.39321,0.33399-0.72927,0.58893-1.00906
+		c0.25447-0.27979,0.56242-0.49511,0.92381-0.6452c0.36133-0.15008,0.76552-0.22518,1.2121-0.22518
+		c0.27572,0,0.5192,0.01877,0.7301,0.05632c0.21083,0.03749,0.40089,0.08561,0.57016,0.14353
+		c0.16886,0.05875,0.3226,0.12806,0.46046,0.20723c0.13786,0.07911,0.27531,0.15823,0.41317,0.23817
+		c0.14193,0.08726,0.27365,0.11743,0.3948,0.09057c0.12115-0.02692,0.21939-0.1012,0.29449-0.2227l0.48248-0.76434
+		c-0.18804-0.17535-0.3948-0.33606-0.62034-0.48207c-0.22559-0.14601-0.47516-0.26999-0.74846-0.37278
+		c-0.27365-0.10196-0.57016-0.18273-0.88992-0.24148c-0.31935-0.05792-0.66273-0.08726-1.03026-0.08726
+		c-0.72272,0-1.37405,0.11259-1.95483,0.33854c-0.58037,0.22512-1.0743,0.54241-1.48133,0.95191
+		c-0.40744,0.40951-0.72148,0.89807-0.94294,1.4658c-0.22146,0.56773-0.33198,1.19256-0.33198,1.87289
+		c0,0.67294,0.11501,1.29293,0.34462,1.86061c0.22961,0.56856,0.55634,1.05718,0.98049,1.46586
+		c0.42373,0.40951,0.9352,0.72921,1.53476,0.95847c0.59914,0.23002,1.26843,0.34503,2.00785,0.34503
+		c0.593,0,1.14934-0.07829,1.66937-0.23492c0.51997-0.15664,1.00983-0.40378,1.46905-0.74232v-3.66494H10.0508V15.8147z"/>
+	<rect x="15.00012" y="10.34618" width="1.69139" height="9.05848"/>
+	<polygon points="19.0281,19.40466 20.7195,19.40466 20.7195,15.71439 24.11486,15.71439 24.11486,14.36762 20.7195,14.36762 
+		20.7195,11.68641 24.74134,11.68641 24.74134,10.34618 19.0281,10.34618 	"/>
+	<path d="M24.5523,1H5.44806C2.99522,1,1,2.99522,1,5.44723v19.10471C1,27.00472,2.99522,29,5.44806,29H24.5523
+		C27.00472,29,29,27.00472,29,24.55194V5.44723C29,2.99522,27.00472,1,24.5523,1z M27.32939,24.55194
+		c0,1.53187-1.24599,2.77745-2.77709,2.77745H5.44806c-1.53151,0-2.77751-1.24558-2.77751-2.77745V5.44723
+		c0-1.5311,1.24599-2.77668,2.77751-2.77668H24.5523c1.5311,0,2.77709,1.24558,2.77709,2.77668V24.55194z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-image.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<path d="M9.53769,6.50666c-2.31327,0-4.20026,1.88062-4.20026,4.20026c0,2.30967,1.88699,4.19495,4.20026,4.19495
+		c2.31434,0,4.19643-1.88528,4.19643-4.19495C13.73412,8.38729,11.85203,6.50666,9.53769,6.50666z M9.53775,13.23481
+		c-1.39791,0-2.53313-1.13382-2.53313-2.52771c0-1.39932,1.13523-2.53338,2.53313-2.53338
+		c1.39395,0,2.52925,1.13405,2.52925,2.53337C12.06699,12.101,10.9317,13.23481,9.53775,13.23481z"/>
+	<path d="M24.46853,1H5.36382C2.91139,1,0.91617,2.99522,0.91617,5.44723v19.10471C0.91617,27.00478,2.91139,29,5.36382,29h19.10471
+		c2.45243,0,4.44765-1.99522,4.44765-4.44806V5.44724C28.91618,2.99522,26.92096,1,24.46853,1z M5.36382,27.3294
+		c-0.43985,0-0.85042-0.11212-1.22049-0.29485l6.83619-7.61016l8.47032,7.90501H5.36382z M27.24557,24.55195
+		c0,1.53187-1.246,2.77745-2.77703,2.77745h-2.57435l-7.27416-6.78017l5.27156-5.20992l7.35398,6.63215V24.55195z
+		 M27.24557,19.71723l-6.82421-6.15044c-0.32708-0.29526-0.83117-0.28144-1.14686,0.02857l-5.8743,5.80457l-1.89774-1.78155
+		c-0.16768-0.15168-0.3879-0.22754-0.61101-0.22347c-0.21857,0.00898-0.43146,0.10846-0.58485,0.27571L2.93768,25.8758
+		c-0.21662-0.39564-0.35093-0.84222-0.35093-1.32387V5.44724c0-1.5311,1.246-2.77668,2.77709-2.77668h19.10471
+		c1.53104,0,2.77703,1.24558,2.77703,2.77668L27.24557,19.71723L27.24557,19.71723z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-mention.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<path d="M29.41459,11.61098c0-3.00446-1.10299-5.631-3.2782-7.80573c-2.17521-2.17568-4.80174-3.2782-7.80668-3.2782h-6.77709
+	c-3.00446,0-5.631,1.10063-7.80668,3.27062C1.57073,5.96672,0.46821,8.5961,0.46821,11.61098v6.77709
+	c0,3.00541,1.10299,5.63195,3.2782,7.80668c2.17615,2.17568,4.8079,3.2782,7.82231,3.2782h11.10051v-1.9332H11.56872
+	c-2.53466,0-4.72076-0.91782-6.49625-2.72789c-1.77218-1.80533-2.67058-3.9668-2.67058-6.42379v-6.77709
+	c0-2.53466,0.91782-4.71792,2.72836-6.48915c1.8058-1.7665,3.9668-2.66158,6.42237-2.66158h6.77709
+	c2.52519,0,4.7056,0.91782,6.4811,2.72789c1.77171,1.80628,2.67011,3.96775,2.67011,6.42285v6.77709
+	c0,1.52875-0.87709,2.40584-2.40584,2.40584H22.9477c-1.74803,0-1.98908-1.15651-1.98908-2.40584V8.8793
+	c-0.04404-0.88751-0.7819-1.59885-1.67983-1.60737h-5.53107c-1.65331,0-3.04472,0.58157-4.25427,1.77692
+	c-1.20766,1.19345-1.79491,2.59149-1.79491,4.27274v3.35682c0,1.70209,0.58631,3.10392,1.79254,4.28506
+	c1.19345,1.17072,2.42289,1.7646,3.65518,1.7646l0.36751,0.00379c0.40776,0.00474,1.01964,0.01705,1.09305,0.00852
+	c0.87567-0.03883,1.55954-0.26995,2.0336-0.68671c0.51148-0.44897,0.80747-1.12336,0.90456-2.06202l0.01989-0.19323
+	c-0.75206,0.66113-1.64289,0.99549-2.65306,0.99549l-0.09519,0.00095c-0.07814,0.00189-0.15487,0.00284-0.23111-0.00284
+	c-0.04073-0.00189-0.25858-0.00663-0.51148-0.01231c-0.6455-0.01326-0.88514-0.01989-0.94245-0.02747
+	c-0.87851-0.12408-1.65189-0.51811-2.29881-1.17072c-0.79705-0.80321-1.20103-1.7807-1.20103-2.90312v-3.35682
+	c0-1.12336,0.40729-2.10085,1.21097-2.90501c0.80226-0.80416,1.77976-1.21145,2.90501-1.21145h4.10083
+	c0.64977,0,1.1783,0.52948,1.1783,1.18019l-0.00521,9.62527c0.22022,1.87069,1.04237,2.71747,2.66442,2.71747h5.06743
+	c0.74306,0,1.35826-0.25764,1.88016-0.789c0.52569-0.53326,0.78095-1.14609,0.78095-1.87258V11.61098z"/>
+</svg>

example/assets/deborah_ufw/new-pause-button.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M15,1.0129c-7.71274,0-13.98709,6.27439-13.98709,13.98709C1.01291,22.71273,7.28726,28.9871,15,28.9871
+			c7.7127,0,13.98709-6.27437,13.98709-13.98711C28.98709,7.28729,22.7127,1.0129,15,1.0129L15,1.0129z M15,28.05345
+			c-7.1987,0-13.05346-5.85476-13.05346-13.05346C1.94654,7.80131,7.8013,1.94655,15,1.94655
+			c7.19868,0,13.05344,5.85476,13.05344,13.05344C28.05344,22.19869,22.19868,28.05345,15,28.05345L15,28.05345z"/>
+	</g>
+</g>
+<g>
+	<path d="M13.68774,10.55273c0.23438,0.23438,0.35156,0.51562,0.35156,0.84375v7.20703c0,0.32812-0.11719,0.60938-0.35156,0.84375
+		s-0.51562,0.35156-0.84375,0.35156c-0.33594,0-0.62109-0.11719-0.85547-0.35156s-0.35156-0.51562-0.35156-0.84375v-7.20703
+		c0-0.32812,0.11719-0.60938,0.35156-0.84375s0.51953-0.35156,0.85547-0.35156
+		C13.17212,10.20117,13.45337,10.31836,13.68774,10.55273z M18.01147,10.55273c0.23438,0.23438,0.35156,0.51562,0.35156,0.84375
+		v7.20703c0,0.32812-0.11719,0.60938-0.35156,0.84375s-0.51953,0.35156-0.85547,0.35156c-0.32812,0-0.60938-0.11719-0.84375-0.35156
+		s-0.35156-0.51562-0.35156-0.84375v-7.20703c0-0.32812,0.11719-0.60938,0.35156-0.84375s0.51562-0.35156,0.84375-0.35156
+		C17.49194,10.20117,17.7771,10.31836,18.01147,10.55273z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-play-button.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M15,1.0129c-7.71274,0-13.98709,6.27439-13.98709,13.98709C1.01291,22.71273,7.28726,28.9871,15,28.9871
+			c7.7127,0,13.98709-6.27437,13.98709-13.98711C28.98709,7.28729,22.7127,1.0129,15,1.0129L15,1.0129z M15,28.05345
+			c-7.1987,0-13.05346-5.85476-13.05346-13.05346C1.94654,7.80131,7.8013,1.94655,15,1.94655
+			c7.19868,0,13.05344,5.85476,13.05344,13.05344C28.05344,22.19869,22.19868,28.05345,15,28.05345L15,28.05345z"/>
+	</g>
+</g>
+<g>
+	<path d="M12.20037,21.06741V8.84744l8.96273,6.10998L12.20037,21.06741z"/>
+</g>
+</svg>

example/assets/deborah_ufw/new-send-circle.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M15,1.0129c-7.71274,0-13.98709,6.27439-13.98709,13.98709C1.01291,22.71273,7.28726,28.9871,15,28.9871
+				c7.7127,0,13.98709-6.27437,13.98709-13.98711C28.98709,7.28729,22.7127,1.0129,15,1.0129L15,1.0129z M15,28.05345
+				c-7.1987,0-13.05346-5.85476-13.05346-13.05346C1.94654,7.80131,7.8013,1.94655,15,1.94655
+				c7.19868,0,13.05344,5.85476,13.05344,13.05344C28.05344,22.19869,22.19868,28.05345,15,28.05345L15,28.05345z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path d="M23.57283,8.36778c-0.10666-0.13444-0.27859-0.20381-0.43839-0.18296c-0.03496,0.00216-0.06956,0.00863-0.10559,0.01833
+				L6.08328,12.84731c-0.21367,0.05967-0.36205,0.25018-0.36954,0.477c-0.00464,0.22322,0.13341,0.42128,0.346,0.49353
+				l6.03507,1.99138l-0.53363,4.29945c-0.02461,0.20309,0.07348,0.40007,0.24827,0.50036
+				c0.17015,0.09921,0.40201,0.08339,0.55574-0.03666l2.09457-1.61683l1.86413,2.68226
+				c0.09239,0.13515,0.24541,0.21567,0.44374,0.21567c0,0,0.00107,0,0.00179,0c0.17621-0.01222,0.33459-0.1179,0.41199-0.2739
+				l6.44671-12.66074C23.72087,8.74161,23.69911,8.52522,23.57283,8.36778z M21.89775,10.10287L16.6699,20.36927l-3.31271-4.76818
+				L21.89775,10.10287z M13.88476,18.12519l-1.17677,0.90834l0.27395-2.20814L13.88476,18.12519z M7.96525,13.38074
+				l12.14256-3.32712l-7.53287,4.84905L7.96525,13.38074z"/>
+		</g>
+	</g>
+</g>
+</svg>

example/assets/deborah_ufw/numeric_25.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
+<title>icon-font/25/numeric_25</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<path id="path-1_1_" d="M16.7,17.00189v1.81558H9.97263v-1.81558h2.26947v-5.95737c0-0.14995,0.0027-0.30395,0.00811-0.45795
+		c0.0054-0.154,0.01351-0.30935,0.02432-0.46605l-1.34547,1.11853c-0.11888,0.09186-0.2364,0.14725-0.35258,0.16616
+		c-0.11617,0.01891-0.2256,0.01891-0.32826,0c-0.10267-0.01891-0.19453-0.05404-0.27558-0.10537s-0.14049-0.10402-0.17832-0.15805
+		L9,10.08811L12.67979,7h2.07495v10.00189H16.7z M2,4.27637C2,3.64746,2.22217,3.11084,2.6665,2.6665S3.64746,2,4.27637,2h16.44727
+		c0.62891,0,1.16553,0.22217,1.60986,0.6665S23,3.64746,23,4.27637v16.46285c0,0.62891-0.22217,1.16211-0.6665,1.59961
+		c-0.44434,0.4375-0.98095,0.65625-1.60986,0.65625H10.4082H4.52246H4.27637c-0.62891,0-1.16553-0.21875-1.60986-0.65625
+		C2.22217,21.90133,2,21.36813,2,20.73922V4.27637z M3.71,5.00114v14.97241c0,0.37079,0.1258,0.68198,0.37741,0.93359
+		c0.25161,0.25161,0.55618,0.37741,0.91373,0.37741h14.89773c0.35755,0,0.66212-0.1258,0.91373-0.37741
+		c0.25161-0.25161,0.37741-0.5628,0.37741-0.93359V5.00114c0-0.35755-0.1258-0.66212-0.37741-0.91373
+		C20.56098,3.8358,20.25641,3.71,19.89886,3.71H5.00114c-0.35755,0-0.66212,0.1258-0.91373,0.37741S3.71,4.64359,3.71,5.00114z"/>
+</g>
+</svg>

example/assets/flutter_logo.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 166 202">
+    <defs>
+        <linearGradient id="triangleGradient">
+            <stop offset="20%" stop-color="#000000" stop-opacity=".55" />
+            <stop offset="85%" stop-color="#616161" stop-opacity=".01" />
+        </linearGradient>
+        <linearGradient id="rectangleGradient" x1="0%" x2="0%" y1="0%" y2="100%">
+            <stop offset="20%" stop-color="#000000" stop-opacity=".15" />
+            <stop offset="85%" stop-color="#616161" stop-opacity=".01" />
+        </linearGradient>
+    </defs>
+    <path fill="#42A5F5" fill-opacity=".8" d="M37.7 128.9 9.8 101 100.4 10.4 156.2 10.4"/>
+    <path fill="#42A5F5" fill-opacity=".8" d="M156.2 94 100.4 94 79.5 114.9 107.4 142.8"/>
+    <path fill="#0D47A1" d="M79.5 170.7 100.4 191.6 156.2 191.6 156.2 191.6 107.4 142.8"/>
+    <g transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, -77.667, 98.057)">
+        <rect width="39.4" height="39.4" x="59.8" y="123.1" fill="#42A5F5" />
+        <rect width="39.4" height="5.5" x="59.8" y="162.5" fill="url(#rectangleGradient)" />
+    </g>
+    <path d="M79.5 170.7 120.9 156.4 107.4 142.8" fill="url(#triangleGradient)" />
+</svg>

example/assets/noto-emoji/emoji_u1f600.svg

@@ -0,0 +1,48 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol viewBox="-64.5 -64.5 129 129">
+        <g fill="none" stroke="#4285F4" stroke-miterlimit="10">
+            <rect x="-64" y="-64" width="128" height="128"/>
+            <path d="M36.95,37.82C27.32,46.32,14.2,51,0,51 c-14.27,0-27.39-4.62-36.96-13.01C-47.45,28.79-53,15.65-53,0c0-15.58,5.55-28.69,16.04-37.92C-27.36-46.35-14.24-51,0-51 c14.17,0,27.29,4.71,36.95,13.25C47.45-28.45,53-15.4,53,0C53,15.47,47.45,28.55,36.95,37.82z"/>
+            <path d="m0 55c-29.59 0-57-19.01-57-55 0-35.8 27.41-55 57-55s57 19.69 57 55c0 35.51-27.41 55-57 55z"/>
+            <path d="M0-43c-12.29,0-23.54,3.94-31.68,11.09 C-40.39-24.25-45-13.21-45,0c0,29.7,22.6,43,45,43c21.67,0,45-13.46,45-43S21.67-43,0-43L0-43z"/>
+            <line x1="-.01" x2="-.01" y1="51" y2="-51"/>
+            <line x1="-16" x2="-16" y1="48.95" y2="-48.93"/>
+            <line x1="15.99" x2="15.99" y1="48.91" y2="-48.93"/>
+            <line x1="53" x2="-53" y1=".08" y2=".08"/>
+        </g>
+    </symbol>
+    <linearGradient id="e" x1="64" x2="64" y1="19.717" y2="107.7" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FEE133" offset=".5"/>
+        <stop stop-color="#FEDE32" offset=".6118"/>
+        <stop stop-color="#FCD32F" offset=".7076"/>
+        <stop stop-color="#FAC12B" offset=".7975"/>
+        <stop stop-color="#F7A924" offset=".8834"/>
+        <stop stop-color="#F6A323" offset=".9"/>
+    </linearGradient>
+    <path d="M64,119.89C36.07,119.89,6,102.4,6,64S36.07,8.11,64,8.11c15.48,0,29.81,5.12,40.36,14.43 C115.9,32.72,122,47.06,122,64c0,16.86-6.1,31.17-17.64,41.39C93.78,114.74,79.45,119.89,64,119.89z" fill="url(#e)"/>
+    <path d="m64 10.11c14.99 0 28.86 4.95 39.03 13.93 11.1 9.79 16.97 23.61 16.97 39.96 0 16.27-5.87 30.07-16.97 39.89-10.21 9.03-24.07 14-39.03 14-15.04 0-28.9-4.91-39.04-13.82-11.1-9.75-16.96-23.61-16.96-40.07 0-16.54 5.86-30.42 16.96-40.15 10.11-8.86 23.97-13.74 39.04-13.74m0-4c-31.15 0-60 20-60 57.89 0 37.68 28.85 57.89 60 57.89s60-20.73 60-57.89c0-37.37-28.85-57.89-60-57.89z" fill="#EB8F00"/>
+    <defs>
+        <path id="d" d="m63.47 62.53c-15.71 0-30.31-1.32-42.49-3.57-3.02-0.56-5.69 2.1-5.08 5.11 4.04 19.81 23.55 36.08 47.55 36.08 26.27 0 43.94-16.8 47.61-36.15 0.57-2.99-2.1-5.6-5.09-5.04-12.18 2.25-26.78 3.57-42.5 3.57z"/>
+    </defs>
+    <clipPath id="a">
+        <use xlink:href="#d"/>
+    </clipPath>
+    <path d="m63.47 62.53c-15.71 0-30.31-1.32-42.49-3.57-3.02-0.56-5.69 2.1-5.08 5.11 4.04 19.81 23.55 36.08 47.55 36.08 26.27 0 43.94-16.8 47.61-36.15 0.57-2.99-2.1-5.6-5.09-5.04-12.18 2.25-26.78 3.57-42.5 3.57z" clip-path="url(#a)" fill="#242424"/>
+    <path d="M116.72,61.38V46.49H10.24v14.89C26.61,71,44.6,76.35,63.48,76.35 S100.34,71,116.72,61.38z" clip-path="url(#a)" fill="#fff"/>
+    <path d="m63.48 86.42c-11.78 0-22.05 6.42-27.53 15.95 7.12 3.89 16.83 6.29 27.53 6.29s20.41-2.4 27.53-6.29c-5.48-9.53-15.75-15.95-27.53-15.95z" clip-path="url(#a)" fill="#ED7770"/>
+    <g clip-path="url(#a)">
+        <defs>
+            <path id="c" d="m10.24 46.49v14.89c16.38 9.62 34.36 14.97 53.24 14.97s36.86-5.35 53.24-14.97v-14.89h-106.48zm53.24 39.93c-11.78 0-22.05 6.42-27.53 15.95 7.12 3.89 16.83 6.29 27.53 6.29 10.71 0 20.41-2.4 27.53-6.29-5.48-9.53-15.75-15.95-27.53-15.95z"/>
+        </defs>
+        <clipPath id="b">
+            <use xlink:href="#c"/>
+        </clipPath>
+        <g clip-path="url(#b)">
+            <path d="m106.79 62.88c0.16 0 0.26 0.11 0.29 0.14 0.08 0.1 0.07 0.18 0.06 0.23-1.69 8.9-6.63 17.06-13.92 22.97-8.01 6.49-18.3 9.92-29.76 9.92-10.51 0-20.73-3.47-28.8-9.76-7.76-6.06-13.03-14.27-14.83-23.11-0.01-0.05-0.03-0.13 0.06-0.23 0.03-0.03 0.13-0.15 0.29-0.15 0.03 0 0.05 0 0.08 0.01 12.85 2.38 27.8 3.64 43.22 3.64 15.43 0 30.38-1.26 43.24-3.64 0.02-0.02 0.04-0.02 0.07-0.02m0-4c-0.27 0-0.54 0.02-0.81 0.08-12.18 2.26-26.79 3.58-42.51 3.58-15.71 0-30.31-1.32-42.49-3.57-0.27-0.05-0.54-0.08-0.81-0.08-2.67 0-4.83 2.44-4.27 5.18 4.04 19.81 23.55 36.08 47.55 36.08 26.27 0 43.94-16.8 47.61-36.15 0.52-2.72-1.63-5.12-4.27-5.12z" fill="#EB8F00"/>
+        </g>
+    </g>
+    <path d="m82.74 30.19c4.19 0 8 3.54 8 9.42s-3.81 9.42-8 9.42-8-3.54-8-9.42 3.81-9.42 8-9.42z" fill="#242424"/>
+    <path d="m45.2 30.19c-4.19 0-8 3.54-8 9.42s3.81 9.42 8 9.42 8-3.54 8-9.42-3.81-9.42-8-9.42z" fill="#242424"/>
+</svg>

example/assets/simple/blend_and_mask.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient x1="46.9782516%" y1="60.9121966%" x2="60.4227947%" y2="90.6839734%" id="linearGradient-3">
+      <stop stop-color="white" offset="0%"/>
+      <stop stop-color="blue" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <mask id="mask-2" fill="white">
+    <circle cx="50" cy="50" r="40"  fill="url(#linearGradient-3)" opacity="0.599190848" />
+  </mask>
+  <circle fill="lightblue" cx="50" cy="50" r="50" />
+  <circle cx="50" cy="50" r="50"  fill="url(#linearGradient-3)" opacity="0.599190848" style="mix-blend-mode: multiply;" mask="url(#mask-2)"/>
+</svg>

example/assets/simple/blend_mode_devil.svg

@@ -0,0 +1,198 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 157 149">
+  <defs>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_252" cx="385.45" cy="25858.51" r="30.5" gradientTransform="translate(-593.45 -11130.67) scale(1.74 0.44)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#4d4d4d"/>
+      <stop offset="0.14" stop-color="#515151"/>
+      <stop offset="0.29" stop-color="#5e5e5e"/>
+      <stop offset="0.45" stop-color="#737373"/>
+      <stop offset="0.6" stop-color="#909090"/>
+      <stop offset="0.76" stop-color="#b5b5b5"/>
+      <stop offset="0.91" stop-color="#e3e3e3"/>
+      <stop offset="1" stop-color="#fff"/>
+    </radialGradient>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_3" cx="419.87" cy="-288.79" r="12.66" gradientTransform="translate(-593.45 529.48) scale(1.74)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e16500"/>
+      <stop offset="1" stop-color="#e81e00"/>
+    </radialGradient>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113" cx="-171.66" cy="1207.87" r="6.89" gradientTransform="matrix(1.84, -1.06, 0.22, 0.38, 190.4, -607.54)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="0.08" stop-color="#f1f1f1"/>
+      <stop offset="0.23" stop-color="#cecece"/>
+      <stop offset="0.44" stop-color="#939393"/>
+      <stop offset="0.69" stop-color="#444"/>
+      <stop offset="0.89"/>
+    </radialGradient>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_3-2" cx="-1500.94" cy="-288.79" r="12.66" gradientTransform="matrix(-1.74, 0, 0, 1.74, -2597.52, 529.48)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_3"/>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113-2" cx="-1536.02" cy="-2632.21" r="6.89" gradientTransform="matrix(-1.84, -1.06, -0.22, 0.38, -3381.37, -607.54)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113"/>
+    <linearGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_7" x1="89.08" y1="134.95" x2="67.69" y2="13.65" gradientTransform="translate(75.5 -33.66) rotate(45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e81e00"/>
+      <stop offset="1" stop-color="#e75400"/>
+    </linearGradient>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_5" cx="385.45" cy="-261.15" r="34.47" gradientTransform="translate(-593.45 529.48) scale(1.74)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e16500"/>
+      <stop offset="0.25" stop-color="#e35000"/>
+      <stop offset="0.74" stop-color="#e72c00"/>
+      <stop offset="1" stop-color="#e81e00"/>
+    </radialGradient>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113-3" cx="-48.85" cy="308.87" r="8.29" gradientTransform="matrix(2.23, -1.07, 0.68, 1.41, -40.98, -454.3)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113"/>
+    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113-4" cx="-463.25" cy="712.92" r="5.4" gradientTransform="matrix(0.98, -1.89, 1.06, 0.55, -272.04, -1207.86)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113"/>
+    <linearGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_241" x1="444.54" y1="-125.06" x2="460.02" y2="-104.91" gradientTransform="translate(-363.6 -3.86) rotate(30.29)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.44"/>
+      <stop offset="0.5" stop-color="#140e0d"/>
+      <stop offset="0.62" stop-color="#47342e"/>
+      <stop offset="0.8" stop-color="#997062"/>
+      <stop offset="1" stop-color="#ffbaa4"/>
+    </linearGradient>
+    <clipPath id="clip-path">
+      <path d="M84.48,69.78c2.34-3.86,16.52-16.85,30.17-16.21,9,.42,9.08,16.27,7.18,20.35-3.43,7.32-7.39,9.17-13.26,10.55-7.49,1.76-22,.32-25.23-7C81.72,73.85,83.63,71.19,84.48,69.78Z" style="fill:none"/>
+    </clipPath>
+    <linearGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_239" x1="-349.04" y1="75.4" x2="-348.92" y2="81.53" gradientTransform="matrix(-1, 0, 0, 1, -257.89, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.49"/>
+      <stop offset="0.53" stop-color="#030809"/>
+      <stop offset="0.6" stop-color="#0d1f20"/>
+      <stop offset="0.69" stop-color="#1c4547"/>
+      <stop offset="0.79" stop-color="#32797d"/>
+      <stop offset="0.9" stop-color="#4dbac0"/>
+      <stop offset="1" stop-color="#66f7ff"/>
+    </linearGradient>
+    <clipPath id="clip-path-2">
+      <path d="M75.56,69.6c-2.32-3.75-16.45-16.37-30.09-15.7-9,.44-9.14,15.89-7.25,19.86,3.4,7.13,7.35,8.91,13.21,10.24,7.48,1.69,22,.24,25.25-6.88C78.31,73.56,76.41,71,75.56,69.6Z" style="fill:none"/>
+    </clipPath>
+    <linearGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_239-2" x1="191.81" y1="74.84" x2="191.92" y2="80.97" gradientTransform="translate(-123.06)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_239"/>
+  </defs>
+  <title>3Asset 23</title>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1">
+      <path d="M152.42,135.88c0,7.25-33.15,13.12-74,13.12s-74-5.87-74-13.12,33.15-13.13,74-13.13S152.42,128.63,152.42,135.88Z" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_252)"/>
+      <path d="M120.83,29.5S152.49,27,147.22.82c0,0,27.84,21.12-12.13,50.6C135.09,51.42,116.24,49,120.83,29.5Z" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_3)"/>
+      <path d="M135.19,51.78l-.14,0c-.34,0-8.29-1.12-12.62-7.37-2.7-3.9-3.35-8.94-1.93-15l0-.24.25,0c.16,0,15.64-1.36,22.91-11,3.48-4.63,4.55-10.44,3.17-17.28L146.7,0l.72.55c.1.07,9.66,7.46,9.58,19.38-.08,10.51-7.37,21.2-21.7,31.77Zm-14.08-22c-1.3,5.73-.66,10.49,1.89,14.18,3.86,5.56,10.94,6.89,12,7.06,14.07-10.4,21.23-20.87,21.31-31.13.07-9.65-6.38-16.25-8.58-18.22,1.14,6.63,0,12.3-3.48,16.88C137.32,27.78,123.17,29.6,121.11,29.82Z" style="fill:#42210b"/>
+      <path d="M151.57,22.87c.78,1.35-4.76,6-12.36,10.4S124.8,40.13,124,38.78s4.76-6,12.37-10.39S150.8,21.52,151.57,22.87Z" style="mix-blend-mode:screen;fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113)"/>
+      <path d="M36.16,29.5S4.5,27,9.78.82c0,0-27.84,21.12,12.12,50.6C21.9,51.42,40.75,49,36.16,29.5Z" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_3-2)"/>
+      <path d="M21.81,51.78l-.11-.08C7.37,41.13.07,30.44,0,19.93-.08,8,9.47.62,9.57.55L10.3,0l-.18.89c-1.38,6.84-.31,12.66,3.17,17.28,7.27,9.64,22.75,11,22.9,11l.25,0,.06.24c1.42,6,.77,11.07-1.94,15-4.33,6.25-12.28,7.33-12.62,7.37ZM9.26,1.71C7.06,3.68.62,10.28.69,19.93.76,30.19,7.93,40.66,22,51.06c1.06-.17,8.16-1.5,12-7.07,2.55-3.68,3.18-8.45,1.89-14.17-2.07-.22-16.21-2-23.15-11.23C9.3,14,8.13,8.34,9.26,1.71Z" style="fill:#42210b"/>
+      <path d="M5.42,22.87c-.78,1.35,4.76,6,12.37,10.4S32.2,40.13,33,38.78s-4.76-6-12.37-10.39S6.2,21.52,5.42,22.87Z" style="mix-blend-mode:screen;fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113-2)"/>
+      <circle cx="78.38" cy="74.3" r="61.57" transform="translate(-29.58 77.19) rotate(-45)" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_7)"/>
+      <path d="M78.38,136.3a62,62,0,1,1,62-62A62.06,62.06,0,0,1,78.38,136.3Zm0-123.15A61.16,61.16,0,1,0,139.54,74.3,61.22,61.22,0,0,0,78.38,13.15Z" style="fill:#74000a"/>
+      <circle cx="78.38" cy="74.3" r="60.09" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_5)"/>
+      <path d="M80.36,25.32c2.92,6.07-3.7,15.31-14.77,20.63S43.17,50.67,40.25,44.6,43.94,29.29,55,24,77.44,19.24,80.36,25.32Z" style="mix-blend-mode:screen;fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113-3)"/>
+      <path d="M38.89,46.57c3,1.54,2.82,7.74-.34,13.86s-8.13,9.83-11.1,8.3S24.64,61,27.8,54.87,35.92,45,38.89,46.57Z" style="mix-blend-mode:screen;fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_113-4)"/>
+      <g style="mix-blend-mode:screen">
+        <path d="M136.13,87.08c-9.76,22.74-42.39,35.15-77.4,28.14a94.63,94.63,0,0,1-32.7-13,58.62,58.62,0,0,0,110.1-15.13Z" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_241)"/>
+      </g>
+      <g style="clip-path:url(#clip-path)">
+        <rect x="81.72" y="52.93" width="42.01" height="33.3" style="fill:#cfd9dc"/>
+        <path d="M84.93,67c-1.25,12.12,5.84,22.79,15.84,23.83a16.72,16.72,0,0,0,13.47-5.09,25.48,25.48,0,0,0,3.21-31,18.36,18.36,0,0,0-5.27-5.3v2.81H91.84v-.18A24.51,24.51,0,0,0,84.93,67Z" style="fill:#cfd9dc"/>
+        <path d="M85.31,67.06C84.08,78.93,91,89.37,100.82,90.39s18.72-7.77,20-19.63-5.71-22.32-15.5-23.34v4.82H98.19V48.39a18.08,18.08,0,0,0-6.11,4A24,24,0,0,0,85.31,67.06Z" style="fill:#d4dde0"/>
+        <path d="M85.69,67.1c-1.21,11.62,5.59,21.84,15.17,22.84s18.33-7.61,19.54-19.22-5.6-21.84-15.18-22.84v4.36H98.29V48.83a17.79,17.79,0,0,0-6,3.93A23.53,23.53,0,0,0,85.69,67.1Z" style="fill:#d8e0e3"/>
+        <path d="M86.06,67.14C84.89,78.5,91.54,88.5,100.91,89.48S118.84,82,120,70.68s-5.47-21.37-14.85-22.34a15.68,15.68,0,0,0-12.63,4.77A23.06,23.06,0,0,0,86.06,67.14Z" style="fill:#dce4e6"/>
+        <ellipse cx="103.04" cy="68.91" rx="20.22" ry="16.69" transform="translate(24 164.4) rotate(-84.16)" style="fill:#e0e7e9"/>
+        <path d="M86.82,67.22C85.7,78.08,92.05,87.63,101,88.57s17.13-7.12,18.25-18S114,50.19,105.08,49.25,87.94,56.36,86.82,67.22Z" style="fill:#e4e9eb"/>
+        <path d="M87.2,67.26c-1.1,10.6,5.1,19.94,13.85,20.85s16.74-7,17.84-17.55S113.78,50.62,105,49.71,88.29,56.66,87.2,67.26Z" style="fill:#e7eced"/>
+        <path d="M87.57,67.3c-1.07,10.35,5,19.46,13.53,20.35s16.34-6.78,17.41-17.13-5-19.46-13.53-20.35S88.65,57,87.57,67.3Z" style="fill:#e9eeef"/>
+        <ellipse cx="103.04" cy="68.91" rx="18.38" ry="15.17" transform="matrix(0.1, -0.99, 0.99, 0.1, 24, 164.4)" style="fill:#ecf0f1"/>
+        <path d="M88.33,67.38c-1,9.84,4.74,18.51,12.87,19.36s15.53-6.45,16.55-16.3S113,51.93,104.89,51.08,89.35,57.53,88.33,67.38Z" style="fill:#eef2f3"/>
+        <path d="M88.71,67.42c-1,9.59,4.62,18,12.53,18.86S116.38,80,117.38,70.4s-4.62-18-12.54-18.86S89.7,57.82,88.71,67.42Z" style="fill:#f0f3f4"/>
+        <path d="M89.08,67.46c-1,9.34,4.5,17.56,12.21,18.36S116,79.7,117,70.36,112.5,52.8,104.79,52,90.05,58.11,89.08,67.46Z" style="fill:#f2f5f6"/>
+        <path d="M89.46,67.5c-.94,9.08,4.38,17.09,11.88,17.87s14.34-6,15.28-15.05-4.37-17.09-11.88-17.87S90.4,58.41,89.46,67.5Z" style="fill:#f4f6f7"/>
+        <path d="M89.84,67.53c-.92,8.84,4.25,16.62,11.54,17.38s14-5.79,14.87-14.63S112,53.67,104.7,52.91,90.75,58.7,89.84,67.53Z" style="fill:#f5f7f8"/>
+        <path d="M90.21,67.57c-.88,8.59,4.14,16.14,11.22,16.88S115,78.83,115.87,70.24s-4.14-16.14-11.22-16.87S91.1,59,90.21,67.57Z" style="fill:#f7f8f9"/>
+        <ellipse cx="103.04" cy="68.91" rx="15.17" ry="12.52" transform="translate(24.01 164.4) rotate(-84.16)" style="fill:#f8f9fa"/>
+        <ellipse cx="103.04" cy="68.91" rx="14.71" ry="12.14" transform="translate(24.01 164.4) rotate(-84.16)" style="fill:#f9fafb"/>
+        <path d="M91.35,67.69c-.81,7.83,3.77,14.72,10.22,15.39s12.36-5.13,13.17-13S111,55.41,104.51,54.74,92.16,59.87,91.35,67.69Z" style="fill:#fafbfb"/>
+        <ellipse cx="103.04" cy="68.91" rx="13.79" ry="11.38" transform="translate(24 164.4) rotate(-84.16)" style="fill:#fbfcfc"/>
+        <path d="M92.1,67.77c-.76,7.32,3.53,13.77,9.57,14.4s11.55-4.8,12.31-12.12-3.52-13.77-9.57-14.4S92.86,60.45,92.1,67.77Z" style="fill:#fbfcfc"/>
+        <path d="M92.48,67.81c-.73,7.07,3.4,13.29,9.24,13.9S112.87,77.08,113.6,70s-3.4-13.29-9.23-13.9S93.21,60.74,92.48,67.81Z" style="fill:#fcfdfd"/>
+        <path d="M92.86,67.85c-.71,6.82,3.28,12.82,8.9,13.4S112.52,76.79,113.23,70s-3.29-12.82-8.91-13.4S93.56,61,92.86,67.85Z" style="fill:#fcfdfd"/>
+        <path d="M93.23,67.89c-.68,6.56,3.16,12.34,8.58,12.9s10.36-4.3,11-10.86S109.69,57.59,104.27,57,93.91,61.32,93.23,67.89Z" style="fill:#fdfdfd"/>
+        <path d="M93.61,67.93c-.65,6.31,3,11.87,8.25,12.41s10-4.14,10.61-10.45-3-11.87-8.25-12.41S94.26,61.62,93.61,67.93Z" style="fill:#fdfefe"/>
+        <path d="M94,68c-.63,6.06,2.91,11.39,7.92,11.91s9.56-4,10.19-10-2.92-11.39-7.92-11.91S94.61,61.91,94,68Z" style="fill:#fefefe"/>
+        <path d="M94.36,68c-.6,5.8,2.8,10.91,7.59,11.41s9.17-3.8,9.77-9.61-2.8-10.92-7.59-11.41S95,62.2,94.36,68Z" style="fill:#fefefe"/>
+        <path d="M94.74,68.05C94.17,73.6,97.42,78.49,102,79s8.77-3.64,9.34-9.2-2.67-10.44-7.26-10.92S95.32,62.49,94.74,68.05Z" style="fill:#fefefe"/>
+        <path d="M95.12,68.08c-.55,5.31,2.55,10,6.93,10.43S110.41,75,111,69.73s-2.55-10-6.92-10.42S95.67,62.78,95.12,68.08Z" style="fill:#fefeff"/>
+        <path d="M95.5,68.12c-.53,5,2.43,9.5,6.59,9.93s8-3.31,8.5-8.36-2.44-9.49-6.6-9.92S96,63.07,95.5,68.12Z" style="fill:#feffff"/>
+        <path d="M95.87,68.16c-.49,4.8,2.31,9,6.27,9.43s7.57-3.14,8.07-7.93-2.31-9-6.27-9.44S96.37,63.37,95.87,68.16Z" style="fill:#fff"/>
+        <path d="M96.25,68.2c-.47,4.55,2.19,8.55,5.94,8.94s7.17-3,7.64-7.52-2.19-8.55-5.94-8.94S96.72,63.66,96.25,68.2Z" style="fill:#fff"/>
+        <path d="M96.63,68.24c-.45,4.29,2.06,8.07,5.61,8.44s6.77-2.81,7.21-7.1-2.06-8.07-5.6-8.44S97.07,64,96.63,68.24Z" style="fill:#fff"/>
+        <path d="M97,68.28c-.42,4,1.94,7.6,5.27,7.94s6.38-2.64,6.8-6.68-2-7.6-5.28-7.94S97.42,64.24,97,68.28Z" style="fill:#fff"/>
+        <path d="M97.38,68.32c-.39,3.79,1.83,7.12,5,7.45s6-2.48,6.37-6.27-1.82-7.12-5-7.45S97.77,64.53,97.38,68.32Z" style="fill:#fff"/>
+        <path d="M97.76,68.36c-.37,3.53,1.7,6.65,4.62,7S108,73,108.32,69.46s-1.7-6.65-4.62-6.95S98.13,64.82,97.76,68.36Z" style="fill:#fff"/>
+        <path d="M98.14,68.4c-.34,3.28,1.58,6.17,4.29,6.45s5.18-2.15,5.52-5.43-1.58-6.17-4.29-6.45S98.48,65.12,98.14,68.4Z" style="fill:#fff"/>
+        <path d="M98.51,68.44c-.31,3,1.46,5.69,4,6s4.78-2,5.1-5-1.46-5.7-4-6S98.83,65.41,98.51,68.44Z" style="fill:#fff"/>
+        <path d="M98.89,68.48c-.29,2.77,1.34,5.22,3.63,5.46s4.38-1.82,4.67-4.6-1.34-5.22-3.63-5.46S99.18,65.7,98.89,68.48Z" style="fill:#fff"/>
+        <path d="M99.27,68.52c-.26,2.52,1.21,4.74,3.3,5s4-1.65,4.24-4.18-1.21-4.74-3.3-5S99.53,66,99.27,68.52Z" style="fill:#fff"/>
+        <path d="M99.65,68.56c-.24,2.27,1.09,4.27,3,4.46s3.58-1.48,3.82-3.76-1.1-4.27-3-4.46S99.88,66.28,99.65,68.56Z" style="fill:#fff"/>
+        <path d="M100,68.6c-.21,2,1,3.79,2.64,4s3.19-1.33,3.4-3.35-1-3.79-2.64-4S100.23,66.58,100,68.6Z" style="fill:#fff"/>
+        <path d="M100.4,68.63a2.7,2.7,0,1,0,3-2.92A3,3,0,0,0,100.4,68.63Z" style="fill:#fff"/>
+        <path d="M100.78,68.67a2.31,2.31,0,1,0,2.55-2.5A2.55,2.55,0,0,0,100.78,68.67Z" style="fill:#fff"/>
+        <path d="M101.15,68.71a1.94,1.94,0,1,0,2.13-2.09A2.15,2.15,0,0,0,101.15,68.71Z" style="fill:#fff"/>
+        <path d="M101.53,68.75a1.71,1.71,0,0,0,1.32,2,1.7,1.7,0,0,0,1.7-1.67,1.55,1.55,0,1,0-3-.32Z" style="fill:#fff"/>
+        <path d="M101.91,68.79a1.16,1.16,0,1,0,1.27-1.25A1.27,1.27,0,0,0,101.91,68.79Z" style="fill:#fff"/>
+        <path d="M102.29,68.83a.84.84,0,0,0,.66,1,.93.93,0,0,0,.19-1.82A.84.84,0,0,0,102.29,68.83Z" style="fill:#fff"/>
+        <path d="M102.66,68.87a.45.45,0,0,0,.33.5.47.47,0,1,0-.33-.5Z" style="fill:#fff"/>
+      </g>
+      <path d="M101.87,85.68c-7.4,0-16.41-2.08-19-8-1.63-3.68.08-6.45,1-7.94l.17-.27c2.46-4.06,16.83-17.12,30.65-16.47a7.48,7.48,0,0,1,6.25,4c3.24,5.35,2.73,14.26,1.39,17.13-3.39,7.26-7.25,9.35-13.61,10.85A31.26,31.26,0,0,1,101.87,85.68Zm11.78-31.6c-13.09,0-26.39,12.14-28.71,16l-.18.28c-.87,1.42-2.34,3.78-.93,7,3,6.77,16.81,8.49,24.62,6.66,6-1.42,9.68-3.39,12.89-10.26,1.29-2.76,1.61-11.26-1.33-16.12a6.47,6.47,0,0,0-5.39-3.47Z" style="fill:#68141f"/>
+      <path d="M85.31,73.76c-.15,4.57,2.38,8.36,5.65,8.47s6.05-3.51,6.19-8.08-2.38-8.37-5.65-8.47S85.46,69.19,85.31,73.76Z"/>
+      <path d="M87.83,69.13c0,1.53,1.5,2.82,3.46,2.88s3.6-1.12,3.65-2.65-1.5-2.81-3.47-2.88S87.88,67.6,87.83,69.13Z" style="fill:#fff"/>
+      <path d="M87.23,78.24a3.89,3.89,0,0,0,7.71.25,3.31,3.31,0,0,0,0-.44,10.48,10.48,0,0,1-4,.57,10.86,10.86,0,0,1-3.7-.73C87.25,78,87.24,78.12,87.23,78.24Z" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_239)"/>
+      <g style="clip-path:url(#clip-path-2)">
+        <rect x="36.33" y="53.23" width="41.98" height="32.46" style="fill:#cfd9dc"/>
+        <path d="M75.12,66.91c1.21,11.81-5.91,22.23-15.91,23.28a16.85,16.85,0,0,1-13.45-4.91A24.34,24.34,0,0,1,42.66,55a18.49,18.49,0,0,1,5.28-5.19v2.69H68.26v-.19A23.45,23.45,0,0,1,75.12,66.91Z" style="fill:#cfd9dc"/>
+        <path d="M74.74,67C75.93,78.51,69,88.72,59.16,89.75S40.47,82.24,39.28,70.67s5.79-21.77,15.58-22.8v4.67h7.07V48.8A17.81,17.81,0,0,1,68,52.69,23,23,0,0,1,74.74,67Z" style="fill:#d4dde0"/>
+        <path d="M74.37,67C75.53,78.31,68.7,88.3,59.12,89.3S40.82,82,39.66,70.63s5.67-21.3,15.25-22.31A16.2,16.2,0,0,1,67.8,53,22.55,22.55,0,0,1,74.37,67Z" style="fill:#d8e0e3"/>
+        <ellipse cx="57.01" cy="68.81" rx="17.07" ry="20.15" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#dce4e6"/>
+        <ellipse cx="57.01" cy="68.81" rx="16.69" ry="19.7" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#e0e7e9"/>
+        <path d="M73.23,67.11C74.32,77.69,67.94,87,59,88s-17.1-6.88-18.19-17.46,5.3-19.91,14.26-20.85S72.15,56.53,73.23,67.11Z" style="fill:#e4e9eb"/>
+        <ellipse cx="57.01" cy="68.81" rx="15.93" ry="18.81" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#e7eced"/>
+        <ellipse cx="57.01" cy="68.81" rx="15.55" ry="18.36" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#e9eeef"/>
+        <path d="M72.1,67.23c1,9.84-4.92,18.53-13.26,19.4S42.93,80.24,41.92,70.4,46.85,51.87,55.18,51,71.09,57.39,72.1,67.23Z" style="fill:#ecf0f1"/>
+        <ellipse cx="57.01" cy="68.81" rx="14.79" ry="17.46" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#eef2f3"/>
+        <ellipse cx="57.01" cy="68.81" rx="14.41" ry="17.02" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#f0f3f4"/>
+        <path d="M71,67.35c.93,9.1-4.56,17.13-12.26,17.94S44,79.38,43.06,70.28s4.55-17.14,12.26-18S70,58.24,71,67.35Z" style="fill:#f2f5f6"/>
+        <ellipse cx="57.01" cy="68.81" rx="13.65" ry="16.12" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#f4f6f7"/>
+        <path d="M70.22,67.43c.88,8.61-4.31,16.21-11.61,17s-13.92-5.59-14.8-14.2,4.31-16.21,11.6-17S69.33,58.81,70.22,67.43Z" style="fill:#f5f7f8"/>
+        <path d="M69.84,67.47C70.7,75.83,65.65,83.21,58.57,84s-13.52-5.44-14.38-13.8,4.18-15.75,11.27-16.49S69,59.1,69.84,67.47Z" style="fill:#f7f8f9"/>
+        <path d="M69.46,67.5c.83,8.12-4.06,15.29-10.94,16s-13.12-5.27-14-13.39,4.07-15.29,10.94-16S68.63,59.39,69.46,67.5Z" style="fill:#f8f9fa"/>
+        <ellipse cx="57.01" cy="68.81" rx="12.14" ry="14.33" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#f9fafb"/>
+        <ellipse cx="57.01" cy="68.81" rx="11.76" ry="13.88" transform="translate(-6.37 5.82) rotate(-5.53)" style="fill:#fafbfb"/>
+        <path d="M68.33,67.62c.76,7.38-3.7,13.9-9.94,14.56S46.45,77.38,45.7,70s3.69-13.9,9.94-14.55S67.57,60.24,68.33,67.62Z" style="fill:#fbfcfc"/>
+        <path d="M68,67.66c.73,7.14-3.57,13.44-9.61,14.07S46.81,77.09,46.07,70s3.58-13.43,9.62-14.07S67.22,60.53,68,67.66Z" style="fill:#fbfcfc"/>
+        <path d="M67.58,67.7c.7,6.89-3.45,13-9.29,13.58S47.16,76.81,46.45,69.92s3.45-13,9.28-13.58S66.87,60.81,67.58,67.7Z" style="fill:#fcfdfd"/>
+        <path d="M67.2,67.74c.68,6.65-3.33,12.51-9,13.1s-10.74-4.32-11.42-11,3.32-12.51,9-13.1S66.52,61.1,67.2,67.74Z" style="fill:#fcfdfd"/>
+        <path d="M66.82,67.78c.66,6.4-3.2,12-8.62,12.61s-10.34-4.15-11-10.55,3.2-12,8.61-12.61S66.16,61.39,66.82,67.78Z" style="fill:#fdfdfd"/>
+        <path d="M66.44,67.82C67.07,74,63.36,79.4,58.16,80S48.21,76,47.58,69.8s3.08-11.58,8.29-12.13S65.81,61.67,66.44,67.82Z" style="fill:#fdfefe"/>
+        <path d="M66.07,67.86c.6,5.91-3,11.12-8,11.64S48.57,75.67,48,69.76s3-11.11,8-11.64S65.46,62,66.07,67.86Z" style="fill:#fefefe"/>
+        <path d="M65.69,67.9c.58,5.66-2.83,10.65-7.63,11.16s-9.14-3.68-9.72-9.34S51.17,59.07,56,58.57,65.11,62.24,65.69,67.9Z" style="fill:#fefefe"/>
+        <path d="M65.31,67.94c.56,5.41-2.71,10.19-7.29,10.67s-8.75-3.51-9.31-8.93S51.42,59.49,56,59,64.76,62.53,65.31,67.94Z" style="fill:#fefefe"/>
+        <path d="M64.93,68c.54,5.17-2.58,9.73-7,10.19s-8.35-3.36-8.88-8.53,2.59-9.72,7-10.18S64.4,62.81,64.93,68Z" style="fill:#fefeff"/>
+        <path d="M64.56,68c.5,4.92-2.47,9.26-6.63,9.7s-8-3.2-8.46-8.12,2.46-9.26,6.63-9.7S64.05,63.1,64.56,68Z" style="fill:#feffff"/>
+        <path d="M64.18,68.06c.48,4.67-2.34,8.8-6.3,9.22s-7.55-3-8-7.72,2.34-8.8,6.29-9.21S63.7,63.38,64.18,68.06Z" style="fill:#fff"/>
+        <path d="M63.8,68.1c.46,4.43-2.21,8.34-6,8.73S50.68,74,50.22,69.52s2.22-8.33,6-8.73S63.35,63.67,63.8,68.1Z" style="fill:#fff"/>
+        <ellipse cx="57.01" cy="68.81" rx="6.45" ry="7.61" transform="translate(-6.37 5.81) rotate(-5.53)" style="fill:#fff"/>
+        <path d="M63.05,68.18c.4,3.93-2,7.41-5.31,7.76s-6.36-2.56-6.76-6.5,2-7.41,5.3-7.76S62.64,64.24,63.05,68.18Z" style="fill:#fff"/>
+        <path d="M62.67,68.22c.38,3.69-1.85,7-5,7.27s-6-2.39-6.35-6.08,1.85-6.95,5-7.28S62.29,64.53,62.67,68.22Z" style="fill:#fff"/>
+        <path d="M62.29,68.26c.36,3.44-1.72,6.48-4.64,6.79s-5.56-2.24-5.92-5.68,1.73-6.49,4.64-6.8S61.94,64.81,62.29,68.26Z" style="fill:#fff"/>
+        <path d="M61.92,68.3c.33,3.2-1.6,6-4.31,6.3s-5.17-2.08-5.5-5.27,1.6-6,4.31-6.31S61.59,65.1,61.92,68.3Z" style="fill:#fff"/>
+        <path d="M61.54,68.34c.3,3-1.48,5.55-4,5.82s-4.77-1.92-5.07-4.87,1.47-5.56,4-5.82S61.24,65.38,61.54,68.34Z" style="fill:#fff"/>
+        <path d="M61.16,68.38c.28,2.7-1.35,5.09-3.64,5.33S53.14,72,52.86,69.25s1.36-5.1,3.65-5.34S60.88,65.67,61.16,68.38Z" style="fill:#fff"/>
+        <path d="M60.79,68.42c.25,2.46-1.24,4.63-3.32,4.85s-4-1.6-4.23-4.06,1.23-4.63,3.32-4.85S60.53,66,60.79,68.42Z" style="fill:#fff"/>
+        <path d="M60.41,68.46a3.77,3.77,0,0,1-3,4.36c-1.87.2-3.57-1.44-3.8-3.65s1.11-4.17,3-4.37S60.18,66.24,60.41,68.46Z" style="fill:#fff"/>
+        <path d="M60,68.49a3.36,3.36,0,0,1-2.65,3.89,3.63,3.63,0,0,1-.73-7.13A3.33,3.33,0,0,1,60,68.49Z" style="fill:#fff"/>
+        <path d="M59.65,68.53a2.69,2.69,0,1,1-3-2.84A2.93,2.93,0,0,1,59.65,68.53Z" style="fill:#fff"/>
+        <path d="M59.28,68.57a2.31,2.31,0,1,1-2.54-2.43A2.51,2.51,0,0,1,59.28,68.57Z" style="fill:#fff"/>
+        <path d="M58.9,68.61A2.1,2.1,0,0,1,57.24,71a2.27,2.27,0,1,1,1.66-2.43Z" style="fill:#fff"/>
+        <path d="M58.52,68.65a1.54,1.54,0,1,1-3,.32A1.69,1.69,0,0,1,56.83,67,1.66,1.66,0,0,1,58.52,68.65Z" style="fill:#fff"/>
+        <path d="M58.14,68.69a1.15,1.15,0,1,1-1.26-1.21A1.23,1.23,0,0,1,58.14,68.69Z" style="fill:#fff"/>
+        <path d="M57.77,68.73a.84.84,0,0,1-.67,1,.91.91,0,0,1-.18-1.78A.84.84,0,0,1,57.77,68.73Z" style="fill:#fff"/>
+        <path d="M57.39,68.77a.38.38,0,1,1-.75.08.41.41,0,0,1,.33-.48A.41.41,0,0,1,57.39,68.77Z" style="fill:#fff"/>
+      </g>
+      <path d="M58,85.16a31.4,31.4,0,0,1-6.68-.65C45,83.08,41.11,81.05,37.74,74c-1.3-2.73-1.79-11.3,1.34-16.54a7.61,7.61,0,0,1,6.36-4.07c13.82-.67,28.13,12,30.57,15.95l.17.27c.92,1.45,2.63,4.15,1,7.75C74.51,83.11,65.41,85.16,58,85.16ZM46.54,54.4l-1,0A6.61,6.61,0,0,0,40,58c-2.85,4.76-2.54,12.93-1.29,15.55,3.18,6.68,6.82,8.59,12.85,10,7.8,1.77,21.62,0,24.65-6.58,1.41-3.08,0-5.38-.91-6.75l-.17-.27C72.81,66.15,59.6,54.4,46.54,54.4Z" style="fill:#68141f"/>
+      <path d="M74.59,73.2c.14,4.57-2.39,8.36-5.66,8.47s-6-3.51-6.19-8.08,2.38-8.37,5.65-8.47S74.44,68.63,74.59,73.2Z"/>
+      <path d="M72.07,68.57c.05,1.53-1.51,2.82-3.47,2.88S65,70.33,65,68.8s1.5-2.81,3.47-2.88S72,67.05,72.07,68.57Z" style="fill:#fff"/>
+      <path d="M72.66,77.68a3.89,3.89,0,0,1-7.71.25,3.31,3.31,0,0,1,0-.44,10.51,10.51,0,0,0,4,.57,10.81,10.81,0,0,0,3.7-.73C72.64,77.44,72.65,77.56,72.66,77.68Z" style="fill:url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_239-2)"/>
+      <path d="M79.49,53.85a.72.72,0,0,0-.73-.6.66.66,0,0,0-.66.73,54.64,54.64,0,0,1-.27,15.53c-.08.54-1.1.41-1.28.17-4-5-16.7-17-31.24-16.65h-.15L45,53a7.88,7.88,0,0,0-2,.33,24.17,24.17,0,0,0-9,4.68c-.23.19-1,1.17-.74,1.38s1.39-.54,1.5-.63,1.22-.63,4-2c-.2.24.36-.54.17-.26-3.39,5-3,14.21-1.51,17.28a19.2,19.2,0,0,0,5.89,7.57h0a9.29,9.29,0,0,0-2.64.47h0a.53.53,0,0,0-.48-.51c-4.54-.61-8.08,3.21-8.23,3.38a.48.48,0,0,0,.07.72.65.65,0,0,0,.29.11.74.74,0,0,0,.57-.18s2.81-3.22,6.72-3.06h0A11.34,11.34,0,0,0,36.85,84a.51.51,0,0,0-.07.73.54.54,0,0,0,.33.16.55.55,0,0,0,.44-.13s3.79-3.18,7.59-2.17c.08,0,.16-.07.25-.07h0a43.78,43.78,0,0,0,6,2.1,32.16,32.16,0,0,0,7.18.78,38.88,38.88,0,0,0,7.54-.69C72,83.5,76.15,81,77.65,77.66,78.87,75,80.73,62.55,79.49,53.85ZM76.62,77.28c-3,6.67-17,8.26-25,6.39-6.15-1.45-9.88-3.43-13.2-10.26-1.38-2.82-1.72-11.66,1.43-16.32a6.55,6.55,0,0,1,3.49-2.73h0a12.51,12.51,0,0,1,1.73-.3h.79c7.08,0,14,3.46,18.57,6.43,5.69,3.66,9.83,7.83,11,9.61l.18.28C76.51,71.78,78,74.15,76.62,77.28Z" style="fill:#4e0f20"/>
+      <path d="M82.71,78.33c1.89,3.29,5.61,6,11.55,7.25a38.11,38.11,0,0,0,7.54.73,31,31,0,0,0,7.18-.76,26,26,0,0,0,6-2.09h0a.7.7,0,0,0,.25,0c3.8-1,7.55,2.13,7.59,2.16a.6.6,0,0,0,.79,0,.51.51,0,0,0-.08-.75,10.23,10.23,0,0,0-2.74-1.69h0c3.64-.16,6.67,3.13,6.7,3.17a.63.63,0,0,0,.52.18.6.6,0,0,0,.3-.12.51.51,0,0,0,.08-.74c-.15-.17-3.69-4.13-8.23-3.49a.55.55,0,0,0-.48.53h0a9,9,0,0,0-2.64-.49h0c2.25-1.67,4.12-4.08,5.89-7.82,1.5-3.17,1.88-12.67-1.51-17.85-.19-.28.37.53.17.27,2.77,1.4,4,2,4,2s1.39.77,1.51.66-.52-1.23-.75-1.43a24.08,24.08,0,0,0-9-4.83,7.81,7.81,0,0,0-2-.34l-.15,0h-.15c-14.53-.34-27.19,12.06-31.23,17.2-.19.24-1.31.38-1.29-.18a82.61,82.61,0,0,0-.27-16c-.05-.39-.24-.73-.66-.75s-.78.27-.73.62a50.25,50.25,0,0,1-.35,17C79.83,74.09,81.14,75.6,82.71,78.33Zm2.05-7.54a3.31,3.31,0,0,0,.18-.29c1.12-1.84,5.26-6.14,11-9.93,4.6-3.06,11.48-6.64,18.56-6.64l.79,0h0a12.26,12.26,0,0,1,1.73.3h0a6.64,6.64,0,0,1,3.49,2.82c3.15,4.82,2.81,13.94,1.44,16.86-3.33,7-7.06,9.1-13.21,10.6-8,1.93-22,.29-25-6.6C82.34,74.69,83.85,72.25,84.76,70.79Z" style="fill:#4e0f20"/>
+      <path d="M122,97c-1.44-5.54-7.62-5-10.69-4a.87.87,0,0,0-.49,1,.71.71,0,0,0,.89.57,12.3,12.3,0,0,1,5.12-.46c-13.66,14.07-27.5,20.57-41.16,19.31-10.43-1-18.8-6.38-24-10.76a56.33,56.33,0,0,1-8.59-9,7.57,7.57,0,0,1,4.23.45.71.71,0,0,0,.9-.55.86.86,0,0,0-.47-1c-7.18-2.64-9.86,3.59-9.88,3.65a.9.9,0,0,0,.33,1.12.63.63,0,0,0,.32.08.72.72,0,0,0,.65-.47,5.92,5.92,0,0,1,2.45-2.68l.06.11A55.71,55.71,0,0,0,50.78,104c5.34,4.52,14,10.12,24.74,11.12,1.16.1,2.31.16,3.47.16,13.16,0,26.42-6.92,39.47-20.61a4.21,4.21,0,0,1,2.14,2.81.74.74,0,0,0,.69.59.52.52,0,0,0,.21,0A.85.85,0,0,0,122,97Z" style="fill:#fff"/>
+      <path d="M122,96.33c-1.44-5.54-7.62-5-10.69-4a.87.87,0,0,0-.49,1,.7.7,0,0,0,.89.57,12.49,12.49,0,0,1,5.12-.46c-13.66,14.07-27.5,20.57-41.16,19.32-10.43-1-18.8-6.39-24-10.77a56.33,56.33,0,0,1-8.59-9,7.57,7.57,0,0,1,4.23.45.71.71,0,0,0,.9-.55.87.87,0,0,0-.47-1c-7.18-2.64-9.86,3.59-9.88,3.65a.9.9,0,0,0,.33,1.12.65.65,0,0,0,.32.09.73.73,0,0,0,.65-.48,5.92,5.92,0,0,1,2.45-2.68l.06.11a55.31,55.31,0,0,0,9.11,9.69c5.34,4.52,14,10.12,24.74,11.12,1.16.1,2.31.16,3.47.16,13.16,0,26.42-6.92,39.47-20.6a4.19,4.19,0,0,1,2.14,2.8.74.74,0,0,0,.69.59.76.76,0,0,0,.21,0A.86.86,0,0,0,122,96.33Z" style="fill:#42210b"/>
+    </g>
+  </g>
+</svg>

example/assets/simple/clip_path.svg

@@ -0,0 +1,13 @@
+<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath -->
+<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="myClip">
+      <circle cx="30" cy="30" r="20"/>
+      <circle cx="70" cy="70" r="20"/>
+    </clipPath>
+  </defs>
+
+  <rect x="10" y="10" width="100" height="100"
+      clip-path="url(#myClip)"/>
+</svg>
+

example/assets/simple/clip_path_2.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <clipPath id="myClip">
+      <rect x="0" y="10" width="100" height="35" />
+      <rect x="0" y="55" width="100" height="35" />
+    </clipPath>
+  </defs>
+  <circle cx="50" cy="50" r="50" clip-path="url(#myClip)" />
+</svg>

example/assets/simple/clip_path_3.svg

@@ -0,0 +1,13 @@
+<!-- multiple clip-rules -->
+<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="myClip">
+      <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" clip-rule="evenodd"/>
+      <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" transform="translate(250, 0)" clip-rule="nonzero"/>
+    </clipPath>
+  </defs>
+  <circle cx="400" cy="200" r="150" fill="green" fill-opacity=".5" stroke="black" clip-path="url(#myClip)" />
+  <g clip-path="url(#myClip)">
+    <circle cx="450" cy="300" r="150" fill="blue" fill-opacity=".6" stroke="black" />
+  </g>
+</svg>

example/assets/simple/dash_path.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+    <line stroke-width="2" stroke="black" stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
+    <line stroke-width="2" stroke="black" stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
+
+</svg>

example/assets/simple/ellipse.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg">
+
+  <ellipse cx="60" cy="60" rx="50" ry="25" fill="red" stroke="blue" stroke-opacity=".3" />
+</svg>

example/assets/simple/empty_defs.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="5"
+     height="3"
+     viewBox="0 0 5 3">
+    <defs/>
+    <path id="black_stripe"
+          fill="#abcdef"
+          fill-opacity="1"
+          fill-rule="nonzero"
+          stroke="none"
+          visibility="visible"
+          d="M 0 0 L 5 0 L 5 3 L 0 3 Z" />
+</svg>

example/assets/simple/equation.svg

@@ -0,0 +1,59 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!-- regression test for use with ID and transform -->
+<!-- This file was generated by dvisvgm 2.1.3 -->
+<svg height='22.2426' version='1.1' viewBox='0.198642 -19.8213 104.085 22.2426' width='104.085'
+  xmlns='http://www.w3.org/2000/svg'
+  xmlns:xlink='http://www.w3.org/1999/xlink'>
+  <defs>
+    <path d='M2.00098 8.11826L2.80137 7.44364L4.74518 12.3718H5.49983L11.1026 0H11.8687V-0.68605H10.6681L5.44266 10.8396L3.54459 6.01437L1.60078 7.63802L2.00098 8.11826Z' id='g1-112'/>
+    <path d='M1.88664 10.3937L2.68703 9.71904L4.74518 16.7282H5.49983L11.1483 0H11.8687V-0.68605H10.6223L5.44266 14.67L3.54459 8.1983L1.48644 9.91342L1.88664 10.3937Z' id='g1-113'/>
+    <path d='M1.8066 12.6233L2.60699 11.9601L4.74518 21.0846H5.49983L11.1712 0H11.8687V-0.68605H10.5995L5.44266 18.5005L3.54459 10.3708L1.41784 12.1545L1.8066 12.6233Z' id='g1-114'/>
+    <path d='M1.65795 7.04345L2.45835 6.36883L3.88762 10.1993H4.64227L9.19307 0H9.94773V-0.68605H8.7357L4.59654 8.60993L3.22444 4.92813L1.26919 6.57465L1.65795 7.04345Z' id='g3-112'/>
+    <path d='M1.03479 -2.75563L0.188664 -2.56697V-2.42404L0.657465 -2.33829L0.182947 0H0.668899L1.02336 -1.93237C1.3721 -2.25253 1.67511 -2.40118 1.86949 -2.40118C2.08674 -2.40118 2.17821 -2.29255 2.17821 -2.041C2.17821 -1.96668 2.16677 -1.8409 2.12676 -1.67511L1.88092 -0.617445C1.85234 -0.491669 1.83518 -0.383045 1.83518 -0.308723C1.83518 -0.0800392 1.97239 0.0343025 2.25253 0.0343025C2.41261 0.0343025 2.64129 -0.0228683 2.93858 -0.13721V-0.297288C2.80709 -0.262986 2.70418 -0.245835 2.62414 -0.245835C2.43548 -0.245835 2.32685 -0.343025 2.32685 -0.525972C2.32685 -0.611728 2.35544 -0.737504 2.38974 -0.903299L2.58412 -1.78945C2.62986 -1.99526 2.66416 -2.15534 2.66416 -2.29827C2.66416 -2.5784 2.48121 -2.75563 2.18393 -2.75563C1.88092 -2.75563 1.52646 -2.56697 1.07481 -2.20679L1.17772 -2.75563H1.03479Z' id='g7-110'/>
+    <path d='M0.966187 -2.75563L0.154361 -2.58412V-2.44119L0.600294 -2.38402L0 0.943319L-0.0571708 1.00621L-0.394479 1.07481V1.24632H0.977621V1.07481L0.434498 0.977621L0.623162 -0.0857563C0.766089 -0.0171513 0.914733 0.0228683 1.06338 0.0228683C1.45214 0.0228683 1.85805 -0.165795 2.14962 -0.485952C2.4755 -0.846128 2.63558 -1.26348 2.63558 -1.76086C2.63558 -2.40689 2.36116 -2.75563 1.90951 -2.75563C1.66367 -2.75563 1.37782 -2.64129 1.04623 -2.40689L1.11483 -2.75563H0.966187ZM0.680333 -0.383045L1.00621 -2.15534C1.26348 -2.35544 1.47501 -2.45835 1.64652 -2.45835C1.95524 -2.45835 2.16106 -2.20108 2.16106 -1.74943C2.16106 -1.29206 2.00098 -0.828977 1.81232 -0.577425C1.63509 -0.343025 1.42355 -0.228683 1.172 -0.228683C1.01192 -0.228683 0.851846 -0.280137 0.680333 -0.383045Z' id='g7-112'/>
+    <path d='M3.55603 -7.80954L1.07481 -7.06632V-6.58608L2.86998 -6.90624V-0.754655L2.73277 -0.560274L1.41784 -0.491669V0H5.24828V-0.480235L4.01339 -0.537406L3.87618 -0.708918V-7.80954H3.55603Z' id='g4-49'/>
+    <path d='M1.61222 -0.903299C4.13917 -2.91571 5.5227 -4.20777 5.5227 -5.64848C5.5227 -6.94054 4.6194 -7.80954 3.1444 -7.80954C1.72656 -7.80954 0.720353 -6.99771 0.720353 -6.19732C0.720353 -5.80856 0.96047 -5.55701 1.36067 -5.55701C1.54361 -5.55701 1.71513 -5.61418 1.8752 -5.72852V-6.95197C2.21823 -7.14635 2.54982 -7.22639 2.89284 -7.22639C3.84188 -7.22639 4.41359 -6.58608 4.41359 -5.49983C4.41359 -4.00196 2.98432 -2.75563 0.480235 -0.720353V0H5.77425V-1.8752H5.25972L5.0539 -0.903299H1.61222Z' id='g4-50'/>
+    <path d='M4.20777 -7.74093L0.308723 -2.96145V-2.21823H3.99052V0.423064H4.87096V-2.21823H6.16302V-2.96145H4.87096V-7.74093H4.20777ZM3.99052 -6.49461V-2.96145H1.16629L3.99052 -6.49461Z' id='g4-52'/>
+    <path d='M1.15485 -7.67233V-3.89905C1.4064 -3.94479 1.73799 -3.96766 2.16106 -3.96766C3.75041 -3.96766 4.53936 -3.43025 4.53936 -2.25253C4.53936 -1.18915 3.80758 -0.423064 2.73277 -0.423064C2.48121 -0.423064 2.21823 -0.468801 1.96668 -0.560274L1.50931 -1.54361C1.39497 -1.56648 1.3035 -1.57792 1.23489 -1.57792C0.846128 -1.57792 0.571708 -1.32636 0.571708 -0.971904C0.571708 -0.423064 1.36067 0.102908 2.53839 0.102908C4.41359 0.102908 5.59131 -1.00621 5.59131 -2.48121C5.59131 -3.78471 4.6194 -4.67657 3.08723 -4.67657C2.72133 -4.67657 2.3097 -4.6194 1.86377 -4.49363V-6.78046H5.24828V-7.67233H1.15485Z' id='g4-53'/>
+    <use id='g19-49' transform='scale(0.5)' xlink:href='#g4-49'/>
+    <use id='g19-50' transform='scale(0.5)' xlink:href='#g4-50'/>
+    <use id='g19-52' transform='scale(0.5)' xlink:href='#g4-52'/>
+    <use id='g19-53' transform='scale(0.5)' xlink:href='#g4-53'/>
+    <use id='g11-110' transform='scale(1.33333)' xlink:href='#g7-110'/>
+    <use id='g15-110' transform='scale(2)' xlink:href='#g7-110'/>
+    <path d='M0.806109 -1.64652C0.806109 -3.213 1.26348 -3.99052 1.92094 -4.10487V-4.36785C0.971904 -4.25351 0.320157 -3.37308 0.320157 -1.64652S0.971904 0.96047 1.92094 1.07481V0.811826C1.26348 0.697484 0.806109 -0.0800392 0.806109 -1.64652Z' id='g18-40'/>
+    <path d='M1.43499 -1.64652C1.43499 -0.0800392 0.977621 0.697484 0.320157 0.811826V1.07481C1.26919 0.96047 1.92094 0.0800392 1.92094 -1.64652S1.26919 -4.25351 0.320157 -4.36785V-4.10487C0.977621 -3.99052 1.43499 -3.213 1.43499 -1.64652Z' id='g18-41'/>
+    <path d='M1.90951 -1.47501V0.114342H2.25253V-1.47501H3.84188V-1.81803H2.25253V-3.40738H1.90951V-1.81803H0.320157V-1.47501H0.491669H1.90951Z' id='g18-43'/>
+    <path d='M0.320157 -2.09245H4.16204V-2.43548H0.320157V-2.09245ZM0.320157 -0.857563H4.16204V-1.20059H0.320157V-0.857563Z' id='g18-61'/>
+    <use id='g21-40' transform='scale(1.33333)' xlink:href='#g18-40'/>
+    <use id='g21-41' transform='scale(1.33333)' xlink:href='#g18-41'/>
+    <use id='g24-61' transform='scale(2)' xlink:href='#g18-61'/>
+    <use id='g25-50' xlink:href='#g4-50'/>
+  </defs>
+  <g id='page1'>
+    <use x='3.47974' xlink:href='#g7-112' y='-11.8856'/>
+    <use x='0.198642' xlink:href='#g1-114' y='-19.1327'/>
+    <rect height='0.688626' width='71.7436' x='11.8134' y='-19.8213'/>
+    <use x='15.0062' xlink:href='#g19-52' y='-10.4085'/>
+    <use x='18.3403' xlink:href='#g7-110' y='-10.4085'/>
+    <use x='15.1453' xlink:href='#g1-113' y='-15.5519'/>
+    <rect height='0.688626' width='56.797' x='26.76' y='-16.2405'/>
+    <use x='29.9528' xlink:href='#g19-50' y='-8.93141'/>
+    <use x='33.2869' xlink:href='#g7-110' y='-8.93141'/>
+    <use x='30.0919' xlink:href='#g1-112' y='-12.5793'/>
+    <rect height='0.688626' width='41.8504' x='41.7066' y='-13.2679'/>
+    <use x='45.0429' xlink:href='#g7-110' y='-7.45432'/>
+    <use x='41.8479' xlink:href='#g3-112' y='-10.0945'/>
+    <rect height='0.688626' width='32.034' x='51.523' y='-10.7832'/>
+    <use x='51.81' xlink:href='#g15-110' y='0'/>
+    <use x='58.1912' xlink:href='#g21-40' y='-3.12175'/>
+    <use x='61.3895' xlink:href='#g11-110' y='-3.12175'/>
+    <use x='65.6436' xlink:href='#g19-53' y='-5.20292'/>
+    <use x='68.9777' xlink:href='#g7-110' y='-5.20292'/>
+    <use x='72.1683' xlink:href='#g18-43' y='-5.20292'/>
+    <use x='76.3632' xlink:href='#g19-49' y='-5.20292'/>
+    <use x='80.0519' xlink:href='#g21-41' y='-3.12175'/>
+    <use x='86.2254' xlink:href='#g24-61' y='0'/>
+    <use x='97.9262' xlink:href='#g25-50' y='0'/>
+  </g>
+</svg>

example/assets/simple/fill-rule-inherit.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 200 200" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <path d="M8.591,140.585c-5.521,-12.406 -8.591,-26.14 -8.591,-40.585c0,-55.192 44.808,-100 100,-100c55.192,0 100,44.808 100,100c0,55.192 -44.808,100 -100,100c-29.621,0 -56.251,-12.906 -74.568,-33.398c5.097,1.85 10.974,2.905 17.229,2.905c19.494,0 35.321,-10.248 35.321,-22.87c0,-12.623 -15.827,-22.87 -35.321,-22.87c-16.26,0 -29.968,7.129 -34.07,16.818Zm112.051,-15.921c7.595,0 13.762,12.257 13.762,27.354c0,15.097 -6.167,27.354 -13.762,27.354c-7.595,0 -13.761,-12.257 -13.761,-27.354c0,-15.097 6.166,-27.354 13.761,-27.354Zm27.752,-55.606c15.064,0 27.294,7.937 27.294,17.713c0,9.776 -12.23,17.713 -27.294,17.713c-15.063,0 -27.293,-7.937 -27.293,-17.713c0,-9.776 12.23,-17.713 27.293,-17.713Zm-75.458,-32.287c15.443,0 27.981,12.76 27.981,28.476c0,15.716 -12.538,28.475 -27.981,28.475c-15.444,0 -27.982,-12.759 -27.982,-28.475c0,-15.716 12.538,-28.476 27.982,-28.476Z" style="fill:#3acedb;"/>
+</svg>

example/assets/simple/group_composite_opacity.svg

@@ -0,0 +1,12 @@
+<svg enable-background="new 0 0 48.2 48.2" viewBox="0 0 48.2 48.2"
+  xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g opacity=".5">
+      <ellipse clip-rule="evenodd" cx="24.1" cy="24.1" fill-rule="evenodd" rx="22.7" ry="22.7"/>
+      <ellipse cx="24.1" cy="24.1" rx="22.7" ry="22.7"/>
+    </g>
+    <ellipse clip-rule="evenodd" cx="24.1" cy="24.1" fill="none" rx="22.7" ry="22.7" stroke="#f00" stroke-miterlimit="10" stroke-width="1.5"/>
+    <ellipse cx="24.1" cy="24.1" fill="none" rx="22.7" ry="22.7" stroke="#f00" stroke-miterlimit="10" stroke-width="1.5"/>
+  </g>
+  <circle cx="24.1" cy="24.1" fill="#f00" r="9.5"/>
+</svg>

example/assets/simple/group_fill_opacity.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <g transform="translate(0 -260.93)" fill="blue" stroke="red">
+  <path d="m82 340.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" stroke-opacity=".31373"/>
+  <path d="m66 340.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m66 324.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".31373"/>
+  <path d="m82 324.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m50 324.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m50 340.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".31373"/>
+  <path d="m50 308.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".15686"/>
+  <path d="m66 308.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".31373"/>
+  <path d="m82 308.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m34 340.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m18 340.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".15686"/>
+  <path d="m18 324.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".15686"/>
+  <path d="m2 340.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".078431"/>
+  <path d="m2 308.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" stroke-opacity=".078431"/>
+  <path d="m34 308.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m82 292.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".15686"/>
+  <path d="m66 292.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m82 276.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".23529"/>
+  <path d="m50 276.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".15686"/>
+  <path d="m82 260.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".078431"/>
+  <path d="m18 276.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".078431"/>
+  <path d="m34 292.93h10c1.108 0 2 0.892 2 2v10c0 1.108-0.892 2-2 2h-10c-1.108 0-2-0.892-2-2v-10c0-1.108 0.892-2 2-2z" fill-opacity=".15686"/>
+ </g>
+</svg>

example/assets/simple/group_mask.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:usvg="https://github.com/RazrFalcon/usvg" usvg:version="0.8.0">
+    <defs>
+        <mask id="b" x="-0.1" y="-0.1" width="1.2" height="1.2">
+            <path fill="#ffffff" fill-rule="evenodd" d="M 17.438 8.438 C 17.748 8.438 18 8.69 18 9 L 18 16.313 C 17.99834725871 17.24440923535 17.24341005121 17.99889920517 16.312 18 L 1.688 18 C 0.75620021668 17.99889792932 0.00110207068 17.24379978332 0 16.312 L 0 9 C 0.01271270943 8.69855860173 0.26079065383 8.46072235233 0.5625 8.46072235233 C 0.86420934617 8.46072235233 1.11228729057 8.69855860173 1.125 9 L 1.125 16.313 C 1.125 16.622 1.377 16.875 1.688 16.875 L 16.312 16.875 C 16.622 16.875 16.875 16.622 16.875 16.312 L 16.875 9 C 16.875 8.69 17.127 8.437 17.438 8.437 Z M 9 0 C 9.169 0 9.316 0.079 9.418 0.196 L 9.423 0.192 L 13.361 4.692 C 13.443 4.795 13.5 4.921 13.5 5.062 C 13.5 5.373 13.248 5.625 12.937 5.625 C 12.77572417052 5.6238681172 12.62300981305 5.55226042805 12.519 5.429 L 12.514 5.433 L 9.563 2.06 L 9.563 11.812 C 9.56299999183 12.12293630838 9.31093630838 12.3749999852 9 12.3749999852 C 8.68906369162 12.3749999852 8.43700000817 12.12293630838 8.437 11.812 L 8.437 2.06 L 5.486 5.433 C 5.37775998399 5.5529360201 5.22453705399 5.62248401669 5.063 5.625 C 4.75206368585 5.625 4.5 5.37293631415 4.5 5.062 C 4.5 4.921 4.557 4.795 4.644 4.696 L 4.639 4.692 L 8.577 0.192 C 8.68524001601 0.0720639799 8.83846294601 0.00251598331 9 0 Z"/>
+        </mask>
+    </defs>
+    <path fill="#727272" fill-rule="evenodd" transform="matrix(0.00000000000000006123233995736766 1 -1 0.00000000000000006123233995736766 21 3)" d="M 17.438 8.438 C 17.748 8.438 18 8.69 18 9 L 18 16.313 C 17.99834725871 17.24440923535 17.24341005121 17.99889920517 16.312 18 L 1.688 18 C 0.75620021668 17.99889792932 0.00110207068 17.24379978332 0 16.312 L 0 9 C 0.01271270943 8.69855860173 0.26079065383 8.46072235233 0.5625 8.46072235233 C 0.86420934617 8.46072235233 1.11228729057 8.69855860173 1.125 9 L 1.125 16.313 C 1.125 16.622 1.377 16.875 1.688 16.875 L 16.312 16.875 C 16.622 16.875 16.875 16.622 16.875 16.312 L 16.875 9 C 16.875 8.69 17.127 8.437 17.438 8.437 Z M 9 0 C 9.169 0 9.316 0.079 9.418 0.196 L 9.423 0.192 L 13.361 4.692 C 13.443 4.795 13.5 4.921 13.5 5.062 C 13.5 5.373 13.248 5.625 12.937 5.625 C 12.77572417052 5.6238681172 12.62300981305 5.55226042805 12.519 5.429 L 12.514 5.433 L 9.563 2.06 L 9.563 11.812 C 9.56299999183 12.12293630838 9.31093630838 12.3749999852 9 12.3749999852 C 8.68906369162 12.3749999852 8.43700000817 12.12293630838 8.437 11.812 L 8.437 2.06 L 5.486 5.433 C 5.37775998399 5.5529360201 5.22453705399 5.62248401669 5.063 5.625 C 4.75206368585 5.625 4.5 5.37293631415 4.5 5.062 C 4.5 4.921 4.557 4.795 4.644 4.696 L 4.639 4.692 L 8.577 0.192 C 8.68524001601 0.0720639799 8.83846294601 0.00251598331 9 0 Z"/>
+    <g mask="url(#b)" transform="matrix(1 0 0 1 3 3)">
+        <path fill="#8e93a1" fill-rule="evenodd" d="M -3 -3 L 21 -3 L 21 21 L -3 21 Z"/>
+    </g>
+</svg>

example/assets/simple/group_opacity.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1200 350"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example opacity01 - opacity property</desc>
+
+  <rect x="1" y="1" width="1198" height="348"
+        fill="none" stroke="blue" />
+
+  <!-- Background blue rectangle -->
+  <rect x="100" y="100" width="1000" height="150" fill="#0000ff"  />
+
+  <!-- Red circles going from opaque to nearly transparent -->
+  <circle cx="200" cy="100" r="50" fill="red" opacity="1"  />
+  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"  />
+  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"  />
+  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"  />
+  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"  />
+
+  <!-- Opaque group, opaque circles -->
+  <g opacity="1" >
+    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"  />
+    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"  />
+  </g>
+  <!-- Group opacity: .5, opacity circles -->
+  <g opacity=".5" >
+    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"  />
+    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"  />
+  </g>
+  <!-- Opaque group, semi-transparent green over red -->
+  <g opacity="1" >
+    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"  />
+    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"  />
+  </g>
+  <!-- Opaque group, semi-transparent red over green -->
+  <g opacity="1" >
+    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"  />
+    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"  />
+  </g>
+  <!-- Group opacity .5, semi-transparent green over red -->
+  <g opacity=".5" >
+    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"  />
+    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"  />
+  </g>
+</svg>

example/assets/simple/group_opacity_transform.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 876.83 532.87"
+  xmlns="http://www.w3.org/2000/svg">
+  <g fill="black">
+    <g opacity=".35" transform="translate(-50 -50)">
+      <rect x="200" y="200" width="600" height="600" />
+      <path d="m285.82 120.3v-47.75h-56"/>
+    </g>
+  </g>
+</svg>

example/assets/simple/hidden.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+    <g fill="green" display="none">
+        <rect width="100" height="50" x="10" y="10" fill="red" stroke="blue" stroke-opacity=".3" />
+    </g>
+    <rect visibility="hidden" width="100" height="50" x="10" y="70" fill="rgb(255, 0, 0)" stroke="blue" stroke-opacity=".3" rx="20" ry="15"/>
+    <rect width="100" height="50" x="10" y="70" fill="rgb(255, 0, 0)" stroke="red" stroke-opacity=".3" rx="20" ry="15"/>
+</svg>

example/assets/simple/href-fill.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1">
+  <g>
+    <path style="fill:#ff0000" id="bar" d="M 11,14
+                                           Q 11,13 12,13
+                                           Q 13,13 13,14
+                                           L 13,22
+                                           Q 13,23 12,23
+                                           Q 11,23 11,22
+                                           L 11,14
+                                           Z" />
+    <use transform="rotate(60,12,18)" xlink:href="#bar" />
+    <use transform="rotate(120,12,18)" xlink:href="#bar" />
+  </g>
+</svg>

example/assets/simple/image.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 50 50"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA
+UAAAAFCAYAAACNb yblA AAAHElEQVQI12P4//8/w3 8GIAXDIBKE0DHxgljN
+BAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="20" width="20" transform="translate(1 1)"/>
+    <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" x="25" y="25" height="1" width="1"/>
+</svg>

example/assets/simple/image_def.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <defs>
+        <image id="_Image1" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA/UlEQVRYhe2YsW7DMAxEnxUVddohBbr0/78waZHEgWO5g06xVi5MBh5wkE0PfKC88AZgABKw05lU89QKFHkBShbIG7AHRj17wjWoGZiAKzBn6qT2wJf8IThPsBm4AEfVHhMbBfUDHIB3Z7AbcNL7BFz7q/wU1LdAkxNYEQzAn1hSZvv5M3VSI/VqPSeGerdBDVnFoXPqTg+VrmezW3OzAsyqALMqwKwKMKsCzKoAsyrArAowqwLMqgCzqm1Ja+fSnR7qezaTuw936kbclk/vhfcmhgKsmS3QOLOt6c+KCM5iKQ1sYgs0fnluqDI1sIUa/aDiK8RQSx8LvFRw9w+YoVIODOGLegAAAABJRU5ErkJggg=="/>
+    </defs>
+    <use xlink:href="#_Image1" x="13.07" y="15.079" width="37.917px" height="33.917px" transform="matrix(0.997807,0,0,0.997549,0,0)"/>
+    <g transform="matrix(1,0,0,1,-5.5,5.5)">
+        <rect x="21" y="12" width="33" height="29" style="fill:rgb(235,235,235);"/>
+    </g>
+</svg>

example/assets/simple/implicit_fill_with_opacity.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264">
+  <rect width="264" height="264" fill="lightblue"/>
+  <path d="M184.32,121.12H79.38v8H184.32Z" opacity="0.1" style="isolation:isolate"/>
+</svg>

example/assets/simple/linear_gradient.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="MyGradient" x1="40%" x2="100%" y1="30%" y2="0%">
+            <stop offset="5%"  stop-color="green"></stop>
+            <stop offset="95%" stop-color="gold"></stop>
+        </linearGradient>
+    </defs>
+
+    <rect fill="url(#MyGradient)"
+          x="10" y="10" width="100" height="100"/>
+</svg>

example/assets/simple/linear_gradient_2.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 800 400" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+  <desc>Example lingrad01 - fill a rectangle using a 
+           linear gradient paint server</desc>
+  <g>
+    <defs>
+      <linearGradient id="MyGradient">
+        <stop offset="15%" stop-color="#F60" />
+        <stop offset="95%" stop-color="#FF6" />
+      </linearGradient>
+    </defs>
+
+    <!-- Outline the drawing area in blue -->
+    <rect fill="none" stroke="blue" 
+          x="1" y="1" width="798" height="398"/>
+
+    <!-- The rectangle is filled using a linear gradient paint server -->
+    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
+          x="100" y="100" width="600" height="200"/>
+  </g>
+</svg>

example/assets/simple/linear_gradient_absolute_user_space_translate.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 667 667" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="paint0_linear" x1="-198.705" y1="60.4043" x2="38.4005" y2="785.553" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#2346F3" stop-opacity="0.5"/>
+        <stop offset="1" stop-color="#3F2894" stop-opacity="0.01"/>
+        </linearGradient>
+    </defs>
+    <rect x="200" y="200" width="667" height="667" transform="rotate(33, 400, 400)" fill="url(#paint0_linear)"/>
+</svg>

example/assets/simple/linear_gradient_percentage_bounding_translate.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 667 667" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="paint1_linear" x1="0%" y1="0%" x2="50%" y2="50%" gradientTransform="translate(0.4 0.7)">
+        <stop stop-color="blue" stop-opacity="0.5"/>
+        <stop offset="1" stop-color="red" stop-opacity="0.1"/>
+        </linearGradient>
+    </defs>
+    <rect x="300" y="0" width="500" height="400" transform="translate(0 100) rotate(45, 250, 250)" fill="url(#paint1_linear)"/>
+</svg>

example/assets/simple/linear_gradient_percentage_user_space_translate.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 667 667" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="paint1_linear" x1="0%" y1="0%" x2="50%" y2="50%" gradientTransform="translate(0.4 0.7)" gradientUnits="userSpaceOnUse">
+        <stop stop-color="blue" stop-opacity="0.5"/>
+        <stop offset="1" stop-color="red" stop-opacity="0.1"/>
+        </linearGradient>
+    </defs>
+    <rect x="300" y="0" width="500" height="400" transform="translate(0 100) rotate(45, 250, 250)" fill="url(#paint1_linear)"/>
+</svg>

example/assets/simple/linear_gradient_xlink.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 94.4 94.4">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#0f12cb"/>
+      <stop offset="1" stop-color="#fded3a"/>
+    </linearGradient>
+    <linearGradient id="b" x1="-157.994" x2="-9.071" y1="122.753" y2="122.753" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
+  </defs>
+  <circle cx="-83.533" cy="122.753" r="74.461" fill="url(#b)" transform="matrix(.63388 0 0 .63388 100.15 -30.611)"/>
+</svg>

example/assets/simple/male.svg

@@ -0,0 +1,12 @@
+<!-- tests a viewPort where min-x/min-y are not zero -->
+<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="57 42 20 20">
+    <g>
+        <g>
+            <path d=" M 64.767 62 C 60.484 62 57 58.516 57 54.233 C 57 49.95 60.484 46.465 64.767 46.465 C 69.05 46.465 72.535 49.95 72.535 54.233 C 72.535 58.516 69.05 62 64.767 62 Z  M 64.767 49.37 C 62.086 49.37 59.905 51.552 59.905 54.233 C 59.905 56.914 62.086 59.095 64.767 59.095 C 67.448 59.095 69.63 56.914 69.63 54.233 C 69.63 51.552 67.448 49.37 64.767 49.37 Z " fill="rgb(111,161,234)"/>
+            <path d=" M 77 49.767 L 74.095 49.767 L 74.095 44.905 L 69.233 44.905 L 69.233 42 L 77 42 L 77 49.767 Z " fill="rgb(111,161,234)"/>
+            <rect x="70.937" y="42.145" width="2.905" height="8.93" transform="matrix(-0.707,-0.707,0.707,-0.707,90.618,130.756)" fill="rgb(111,161,234)"/>
+        </g>
+    </g>
+</svg>

example/assets/simple/mask.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 120 120">
+  <mask id="myMask">
+    <!-- Everything under a white pixel will be visible -->
+    <rect x="0" y="0" width="100" height="100" fill="white" />
+
+    <!-- Everything under a black pixel will be invisible -->
+    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
+  </mask>
+ 
+  <polygon points="-10,110 110,110 110,-10" fill="orange" />
+
+  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
+  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
+</svg>

example/assets/simple/mask_with_gradient.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="black" />
+      <stop offset="1" stop-color="white" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
+
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>

example/assets/simple/mask_with_use.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 59 84"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="a" d="M0 0h62v86H0z"/>
+    </defs>
+    <g transform="translate(0 -2)" fill="none" fill-rule="evenodd">
+        <mask id="b" fill="#ddd"><use xlink:href="#a"/></mask>
+    </g>
+</svg>

example/assets/simple/mask_with_use2.svg

@@ -0,0 +1,15 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="130px" version="1.1"
+    viewBox="-10 -10 120 120" width="130px" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
+            id="path-1" />
+    </defs>
+
+    <mask fill="white" id="mask-1">
+        <use xlink:href="#path-1"></use>
+    </mask>
+         
+    <polygon fill="orange" points="-10,110 110,110 110,-10 -10,-10" />
+     
+    <circle cx="50" cy="50" fill="green" mask="url(#mask-1)" r="50" />
+</svg>

example/assets/simple/nested_group.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 120 120" 
+  xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g fill="orange">
+      <ellipse cx="60" cy="60" rx="50" ry="25" stroke="green" stroke-opacity=".3" />
+    </g>
+  </g>
+</svg>

example/assets/simple/opacity_on_path.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 60 64" fill="none" 
+  xmlns="http://www.w3.org/2000/svg">
+  <path opacity="0.3" d="M43.998 19C48.969 19 52.998 23.025 52.998 28C52.998 32.975 48.969 37 43.998 37C42.8162 37 41.646 36.7672 40.5542 36.3149C39.4623 35.8626 38.4703 35.1996 37.6347 34.3638C36.7992 33.5281 36.1364 32.5359 35.6844 31.444C35.2323 30.3521 34.9997 29.1818 35 28C34.9997 26.8182 35.2323 25.6479 35.6844 24.556C36.1364 23.4641 36.7992 22.4719 37.6347 21.6362C38.4703 20.8004 39.4623 20.1374 40.5542 19.6851C41.646 19.2328 42.8162 19 43.998 19V19Z" fill="red"/>
+</svg>

example/assets/simple/radial_gradient.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 800 400" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <desc>Example radgrad01 - fill a rectangle by referencing a
+           radial gradient paint server</desc>
+  <g>
+    <defs>
+      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="300" fx="400" fy="200">
+        <stop offset="0%" stop-color="red" />
+        <stop offset="50%" stop-color="blue" />
+        <stop offset="100%" stop-color="red" />
+      </radialGradient>
+    </defs>
+
+    <!-- Outline the drawing area in blue -->
+    <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398"/>
+
+    <!-- The rectangle is filled using a radial gradient paint server -->
+    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200"/>
+  </g>
+</svg>

example/assets/simple/radial_gradient_absolute_user_space_translate.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 667 667" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(901 787) rotate(39.029) scale(557.396)">
+            <stop stop-color="#47E9FF" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#414CBE" stop-opacity="0"/>
+        </radialGradient>
+    </defs>
+    <rect x="667" y="667" width="667" height="667" transform="rotate(180 667 667)" fill="url(#paint0_radial)"/>
+</svg>

example/assets/simple/radial_gradient_focal.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 150 150"  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="radial"
+      cx="50%" cy="50%" fx="50%" fy="15%" r="50%">
+      <stop offset="0%" style="stop-color: red;"/>
+      <stop offset="50%" style="stop-color: green;"/>
+      <stop offset="100%" style="stop-color: blue;"/>
+    </radialGradient>
+   
+    </defs>
+    <rect x="10" y="10" width="120" height="120"
+      style="fill: url(#radial); stroke: black;"/>
+</svg>

example/assets/simple/radial_gradient_percentage_bounding_translate.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 667 667" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <radialGradient id="paint0_radial" cx="2%" cy="2%" r="50%" gradientTransform="translate(0.3 0.6)">
+            <stop stop-color="#47E9FF" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#414CBE" stop-opacity="0"/>
+        </radialGradient>
+    </defs>
+    <rect x="667" y="667" width="400" height="400" transform="rotate(180 667 667)" fill="url(#paint0_radial)"/>
+</svg>

example/assets/simple/radial_gradient_percentage_user_space_translate.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 667 667" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <radialGradient id="paint0_radial" cx="10%" cy="10%" r="50%" gradientUnits="userSpaceOnUse" gradientTransform="translate(901 787) rotate(39.029)">
+            <stop stop-color="#47E9FF" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#414CBE" stop-opacity="0"/>
+        </radialGradient>
+    </defs>
+    <rect x="667" y="667" width="667" height="667" transform="rotate(180 667 667)" fill="url(#paint0_radial)"/>
+</svg>

example/assets/simple/radial_gradient_xlink.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 800 400" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <desc>Example radgrad01 - fill a rectangle by referencing a
+           radial gradient paint server</desc>
+  <g>
+    <defs>
+      <radialGradient id="MyGradientR">
+        <stop offset="0%" stop-color="red" />
+        <stop offset="50%" stop-color="blue" />
+        <stop offset="100%" stop-color="red" />
+      </radialGradient>
+      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="300" fx="400" fy="200" xlink:href="#MyGradientR" />
+    </defs>
+
+    <!-- Outline the drawing area in blue -->
+    <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398"/>
+
+    <!-- The rectangle is filled using a radial gradient paint server -->
+    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200"/>
+  </g>
+</svg>

example/assets/simple/radial_ref_linear_gradient.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+    <defs>
+        <linearGradient id="a">
+            <stop offset="0" stop-color="#fcb316"/>
+            <stop offset="1" stop-color="#fcb316" stop-opacity="0"/>
+        </linearGradient>
+        <path id="b" d="M75.2 124.15H52.8c-4.45 0-8.23-3.29-8.88-7.74l-6.5-45.97h53.15l-6.5 45.97c-.65 4.44-4.42 7.74-8.87 7.74z"/>
+        <radialGradient xlink:href="#a" id="c" cx="67.797" cy="65.627" fx="67.797" fy="65.627" r="39.593" gradientTransform="matrix(1 0 0 1.10959 0 -7.192)" gradientUnits="userSpaceOnUse"/>
+    </defs>
+    <path fill="url(#c)" d="M28.203 21.695h79.186v87.864H28.203z"/>
+</svg>

example/assets/simple/rect_rrect.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+    <g fill="green">
+        <rect width="100" height="50" x="10" y="10" fill="red" stroke="blue" stroke-opacity=".3" />
+    </g>
+    <rect width="100" height="50" x="10" y="70" fill="rgb(255, 0, 0)" stroke="blue" stroke-opacity=".3" rx="20" ry="15"/>
+</svg>

example/assets/simple/rect_rrect_no_ry.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 56 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect id="a" width="56" height="28" rx="14"/>
+</svg>

example/assets/simple/stroke_inherit_circles.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 124 125" 
+  xmlns="http://www.w3.org/2000/svg">
+  <g stroke="blue">
+    <g fill="none">
+      <circle cx="62" cy="62.5" r="60" stroke-width="4"/>
+      <circle cx="62" cy="62.5" r="30" />
+    </g>
+  </g>
+</svg>

example/assets/simple/style_attr.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" viewBox="0 0 25 25">
+    <path 
+      d="m10 10 L 20 20 L 10 20z" 
+      style="stroke-linecap:round;stroke-width:3;fill:#767676;fill-rule:nonzero;stroke:rgb(0, 60, 60);stroke-opacity:.2" 
+    />
+</svg>

example/assets/simple/text.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1000 300"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example text01 - 'Hello, out there' in blue</desc>
+
+  <text x="250" y="150" 
+        font-family="Verdana" font-size="55" stroke="red" fill="blue" >
+    Hello, out there
+  </text>
+
+  <!-- Show outline of canvas using 'rect' element -->
+  <rect x="1" y="1" width="998" height="298"
+        fill="none" stroke="blue" stroke-width="2" />
+</svg>

example/assets/simple/text_2.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1000 300"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example text01</desc>
+
+  <text x="100" y="50"
+      font-family="Roboto" font-size="55" font-weight="normal" fill="blue" >
+    Plain text Roboto</text>
+  <text x="100" y="100"
+      font-family="Verdana" font-size="55" font-weight="normal" fill="blue" >
+    Plain text Verdana</text>
+
+  <text x="100" y="150"
+      font-family="Verdana" font-size="55" font-weight="bold" fill="blue" >
+    Bold text Verdana</text>
+
+  <!-- Show outline of canvas using 'rect' element -->
+  <rect x="140" y="165" width="595" height="110"
+      fill="none" stroke="red" stroke-width="2" />
+
+  <text x="150" y="215"
+      font-family="Roboto" font-size="55" fill="green" >
+    <tspan stroke="red" font-weight="900" >Stroked bold line</tspan>
+    <tspan dy="50">Line 3</tspan>
+  </text>
+</svg>

example/assets/simple/text_3.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="20">
+    <g shape-rendering="crispEdges">
+        <path fill="#555" d="M0 0h57v20H0z"/>
+        <path fill="#ff69b4" d="M57 0h93v20H57z"/>
+    </g>
+    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
+        <text x="295" y="140" transform="scale(.1)" textLength="470">platform</text>
+        <text x="1025" y="140" transform="scale(.1)" textLength="830">flutter|dart vm</text>
+    </g>
+</svg>

example/assets/simple/use_circles.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 30 10"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle id="myCircle" cx="5" cy="5" r="4"/>
+    <use href="#myCircle" x="10" fill="blue"/>
+    <use href="#myCircle" x="20" fill="white" stroke="blue"/>
+</svg>

example/assets/simple/use_circles_def.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 30 10"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <circle id="myCircle" cx="5" cy="5" r="4"/>
+    </defs>
+    <use />
+    <use href="#myCircle" x="10" fill="blue"/>
+    <use href="#myCircle" x="20" fill="white" stroke="blue"/>
+</svg>

example/assets/simple/use_fill.svg

@@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='74.984232' height='9.896267' viewBox='0 -7.763799 74.984232 9.896267'>
+  <defs>
+    <path id='g3-44' d='M.445933 1.932374C1.600784 1.806599 2.378307 .914733 2.378307-.068605C2.378307-.800392 2.035282-1.212022 1.463573-1.212022C1.074812-1.212022 .788958-.96047 .788958-.583143C.788958-.377328 .846128-.217249 .971904-.080039H1.703691C1.703691-.034303 1.703691 .011434 1.703691 .045737C1.703691 .880431 1.280627 1.394968 .445933 1.555047V1.932374Z' />
+    <path id='g3-51' d='M3.624631-4.036261C4.74518-4.356418 5.328322-5.008166 5.328322-5.888596C5.328322-7.043447 4.447891-7.809537 3.075791-7.809537C1.64652-7.809537 .663182-7.043447 .663182-6.288792C.663182-5.922899 .914733-5.671347 1.280627-5.671347C1.463573-5.671347 1.612218-5.717084 1.749428-5.819991V-6.894803C2.081019-7.123487 2.435478-7.226394 2.835674-7.226394C3.716105-7.226394 4.287813-6.643252 4.287813-5.739952C4.287813-4.813785 3.670368-4.264945 2.515517-4.264945C2.435478-4.264945 2.355439-4.276379 2.275399-4.276379V-3.601763C2.492649-3.636065 2.698464-3.6475 2.88141-3.6475C3.97909-3.6475 4.573667-3.121528 4.573667-2.218229C4.573667-1.200588 3.819012-.41163 2.778503-.41163C2.435478-.41163 2.115321-.503103 1.806599-.68605L1.452139-1.657954C1.326363-1.703691 1.212022-1.715125 1.109114-1.715125C.743221-1.715125 .468801-1.463573 .468801-1.131983C.468801-.54884 1.3721 .125776 2.732766 .125776C4.493628 .125776 5.625611-.914733 5.625611-2.19536C5.625611-3.23587 4.893824-3.944788 3.624631-4.036261Z' />
+    <use id='g6-51' xlink:href='#g3-51' />
+  </defs>
+  <g fill='#00f'>
+    <use x='0' y='0' xlink:href='#g6-51' />
+    <use x='6.381235' y='0' xlink:href='#g3-44' />
+  </g>
+</svg>

example/assets/simple/use_opacity_grid.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Our symbol in its own coordinate system -->
+  <!-- note: viewBox not supported yet -->
+  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
+    <circle cx="1" cy="1" r="1" />
+  </symbol>
+
+   <!-- A grid to materialized our symbol positionning -->
+  <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" />
+
+  <!-- All instances of our symbol -->
+  <use xlink:href="#myDot" x="5"  y="5" style="opacity:1.0" />
+  <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
+  <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" />
+  <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" />
+  <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" />
+</svg>

example/assets/simple/width_height_viewbox.svg

@@ -0,0 +1,15 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>Close</title>
+    <desc>Created with Sketch.</desc>
+
+    <defs></defs>
+    <g id="03.-Agenda" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="Filter" transform="translate(-338.000000, -22.000000)" stroke="#1A1A1A" stroke-width="4">
+            <g id="Close" transform="translate(347.000000, 31.000000) rotate(-45.000000) translate(-347.000000, -31.000000) translate(339.000000, 23.000000)">
+                <path d="M0,8 L16,8" id="Line-2"></path>
+                <path d="M8,0 L8,16" id="Line-2"></path>
+            </g>
+        </g>
+    </g>
+</svg>

example/assets/text_transform.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="69" height="69" viewBox="0 0 69 69">
+  <g transform="translate(-56 -50)">
+    <circle cx="34.5" cy="34.5" r="34.5" transform="translate(56 50)" fill="#00b443"/>
+    <text transform="translate(75 99)" fill="#fff" font-size="40" font-family="Montserrat-Bold, Montserrat" font-weight="700">
+      <tspan x="0" y="0">A</tspan>
+    </text>
+  </g>
+</svg>

example/assets/w3samples/aa.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 90">
+  <path d="M68,87h-13l20-56h14l20,56h-13l-4-12h-20l-4,12zM75,65h14l-7-22l-7,22z" fill="#2a376e"/>
+  <path d="M15,87h-13l20-56h14l19,56h-12l-4-12h-21l-3,12zM22,65h14l-7-22l-7,22z" fill="#bf2426"/>
+  <path d="M705,169c5,18,5,27-2,48l-58,172l-62-175c0,0,7-19,11-30c3,0,9,7,9,7c0,0-7-20-4-24l9-24l10,6c-2-6-5-19-5-19l9-28l10,5c0,0-7-19-5-22l24-63c20,47,36,98,54,147zM659,485c1,5,0,11-5,19c1,10,1,13-2,17c-3,3-6,4-10,4c1-3,1-7,0-8c-13-17-42-50-42-50h-15l-14,36l6,10c0,0,13,0,19,0c1,0,2,1,3,3v6c-1-1-3-2-4-3c-14,0-24,0-37,1l-4,2c-2-5,2-9,5-9c3,0,6,0,5-2c-1-3-2-4-5-7h-16c-16-46-33-92-47-139c6,0,14-3,14-3c0,0-16-6-20-15c-3-9-14-40-14-40c0,0,9-1,13-3c-5-4-18-8-20-14c-7-18-11-35-11-35c0,0,16-1,14-2c-9-4-21-16-21-16c0,0-11-31-11-31c1-1,16,0,16,0c-4-8-16-12-13-23c4-13,9-26,12-34l9,5c-1-5-4-23-4-23l12-35l9,7l-3-24l20-51l52,147l109,310zM475,476l-5-8l-6,8h-22l48-74l27,74h-14l-5-8l-5,8h-18z" fill="#2a376e" transform="scale(0.1)"/>
+</svg>

example/assets/w3samples/alphachannel.svg

@@ -0,0 +1,5 @@
+<svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+  <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
+  <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
+  <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
+</svg>