Following snippet:

    return Flexible(
      child: FittedBox(
        fit: BoxFit.fitWidth,
        child: SvgPicture.asset(
          "icon.svg",
          width: 20.0,
          height: 14.0,
        ),
      ),
    );

produces crash:

I/flutter ( 8836): Loading AppLocalizations for: en_US
I/flutter ( 8836): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 8836): The following assertion was thrown during performLayout():
I/flutter ( 8836): 'package:flutter/src/rendering/box.dart': Failed assertion: line 303 pos 12: 'width > 0.0': is not
I/flutter ( 8836): true.
I/flutter ( 8836): 
I/flutter ( 8836): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 8836): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 8836): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 8836):   https://github.com/flutter/flutter/issues/new
I/flutter ( 8836): 
I/flutter ( 8836): When the exception was thrown, this was the stack:
I/flutter ( 8836): #2      BoxConstraints.constrainSizeAndAttemptToPreserveAspectRatio (package:flutter/src/rendering/box.dart)
I/flutter ( 8836): #3      RenderFittedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:2194:26)
I/flutter ( 8836): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)

Wrapping SvgPicture with SizedBox or specifying placeholder is SizedBox resolves the issue

Basic text support is achievable:

• Basic support for rendering text with a fill property (or, if text only has stroke property, treating the stroke as a fill)
• Support the x, y (single value), dx and dy properties
• Support nested tspans with various styles
• Support font inheritence properties

These might be achievable as-is but not clear on their value here:

• Multi-value x/y lists - but is this really a desired functionality?
• The rotate property - really necessary though? Would likely require lots of canvas manipulation. Not easy to implement.

These would require engine level changes/patches:

• <textPath> support - Flutter only supports drawing text in a straight line today. Issue opened for that to discuss in flutter/flutter
• Stroke text. (See flutter/engine#5395)
• Otherwise painted text. (see flutter/engine#5395)
• Custom kerning - probably not a good idea here.

All of that said, it may be preferable to preprocess text into paths with another tool.

See #19

This should be possible to capture and report without a ton of effort

Hi Dan,
In this image the circle around the squares is squashed.

https://github.com/Rockvole/communikate20-kbml/blob/master/images/descriptive_quantity/more.svg

It'd probably be good to decouple the rendering and parsing a bit more - could eliminate the need for holding any raw SVG data in memory, and should open up possibilities for supporting other graphics formats (e.g. Android Vector Drawables) easily, as well as opening up the possibility for swapping out the XML parsing implementation (perhaps opening to a streaming parsing option at some point).

I need the method SvgImage.file(File myfile)
My images are stored in a directory which is user downloaded from a zip file and unpacked. So they are not available across a network, or in the assets location.

Thanks.

In 0.5.1 the attached SVG is rendered correctly, but in 0.5.4 the lines are too thin.


profile.zip

• Basic support regular radial gradients
• Support for focal pointed gradients

SVGs generated with Gravit Designer not rendering.

Sample SVG:
male.svg.zip

First of all, thanks for the good work, this is a very useful package!

I tested with several SVGs exported from Figma (figma.com is like Sketch but runs on the browser) and while most of them worked, some did not.

I've tried using an svg from flaticon.com and works fine, then I export the one in Figma and I get "Invalid exponent". I tried importing the file into Inkscape, use the "Clean up document" thing and still the same.

Example of a faulty svg:

<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.1595 3.80852C19.6789 1.35254 16.3807 -4.80966e-07 12.8727 -4.80966e-07C9.36452 -4.80966e-07 6.06642 1.35254 3.58579 3.80852C1.77297 5.60333 0.53896 7.8599 0.0171889 10.3343C-0.0738999 10.7666 0.206109 11.1901 0.64265 11.2803C1.07908 11.3706 1.50711 11.0934 1.5982 10.661C2.05552 8.49195 3.13775 6.51338 4.72783 4.9391C9.21893 0.492838 16.5262 0.492728 21.0173 4.9391C25.5082 9.38548 25.5082 16.6202 21.0173 21.0667C16.5265 25.5132 9.21893 25.5133 4.72805 21.0669C3.17644 19.5307 2.10538 17.6035 1.63081 15.4937C1.53386 15.0627 1.10252 14.7908 0.66697 14.887C0.231645 14.983 -0.0427272 15.4103 0.0542205 15.8413C0.595668 18.2481 1.81686 20.4461 3.5859 22.1976C6.14623 24.7325 9.50955 26 12.8727 26C16.236 26 19.5991 24.7326 22.1595 22.1976C27.2802 17.1277 27.2802 8.87841 22.1595 3.80852Z" fill="black"/>
<path d="M5.50468 7.22599L5.43239 7.19961V2.75006L5.55078 2.75838C6.48068 2.82416 7.05364 3.10795 7.47194 3.31513C7.71834 3.43728 7.91301 3.5337 8.0838 3.5337C8.62293 3.5337 8.90493 2.827 8.90493 2.44821C8.90493 1.93294 8.29428 1.60853 7.78191 1.42707C7.17789 1.2131 6.33963 1.07148 5.53973 1.04817L5.43239 1.0451V0.372776C5.43239 0.188139 5.16763 1.20242e-07 4.90774 1.20242e-07C4.59678 1.20242e-07 4.40421 0.193502 4.40421 0.372776V1.07925L4.30516 1.08954C3.12532 1.21256 0.381048 1.82798 0.381048 4.88C0.381048 7.49544 2.47941 8.2341 4.3307 8.88585L4.40421 8.91179V14.0339L4.28504 14.0247C2.89693 13.917 2.15407 13.2913 1.61174 12.8345C1.31692 12.586 1.084 12.3899 0.863465 12.3899C0.418744 12.3899 1.21448e-07 13.0014 1.21448e-07 13.4754C1.21448e-07 14.4115 1.67331 15.7978 4.29543 15.8398L4.40421 15.8415V16.599C4.40421 16.7781 4.59678 16.9717 4.90774 16.9717C5.16752 16.9717 5.43239 16.7836 5.43239 16.5991V15.791L5.52768 15.7779C7.91611 15.4495 9.28609 13.9149 9.28609 11.5677C9.2862 8.83201 7.41821 7.92283 5.50468 7.22599ZM4.53134 6.88331L4.38177 6.82738C3.23056 6.39726 2.27755 5.93813 2.27755 4.67052C2.27755 3.61972 3.01389 2.97333 4.40709 2.80095L4.53134 2.78563V6.88331ZM5.43604 13.9812L5.30537 14.0052V9.28413L5.45947 9.34958C6.46211 9.775 7.38991 10.366 7.38991 11.7981C7.38991 12.9749 6.69591 13.7502 5.43604 13.9812Z" transform="translate(8.22925 5.12915)" fill="black"/>
</svg>

I know this might be specific to Figma, but I'm following this: 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).

Thanks!

this looks super useful !!

https://pub.dartlang.org/packages/flutter_asset_generator

The method 'getBounds' isn't defined for the class 'Path'.

file "\flutter_svg\src\svg_parser.dart"
Line 55, 56
final stroke = parseStroke(el, path.getBounds(), paintServers);
final fill = parseFill(el, path.getBounds(), paintServers);

file "\flutter_svg\src\vector_painter.dart"
Line 174
Rect get bounds => path?.getBounds();

Here's an export from Sketch that doesn't render as expected.

Here it is in Flutter:

Code is:

SvgPicture.asset(
        'assets/back.svg',
        width: 24.0,
        height: 24.0
      ),

Here it is in Chrome:

SVG source:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="20px" viewBox="0 0 14 20" 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>Path 2</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="03.-Agenda" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Speaker" transform="translate(-18.000000, -35.000000)" stroke="#2694D1" stroke-width="4">
            <polyline id="Path-2" transform="translate(30.000000, 45.000000) rotate(-45.000000) translate(-30.000000, -45.000000) " points="24 51 24 39 36 39"></polyline>
        </g>
    </g>
</svg>

This SVG renders everything except the shadow of the circle.

pairing.svg.zip

This SVG, although processed with svgcleaner will cause the following warning in the console:

I/flutter (29709): unhandled element circle; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#ec500(), name: "assets/icons/menu-favourites.svg", colorFilter: null)
I/flutter (29709): unhandled element filter; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#ec500(), name: "assets/icons/menu-favourites.svg", colorFilter: null)
I/flutter (29709): unhandled element use; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#ec500(), name: "assets/icons/menu-favourites.svg", colorFilter: null)

The SVG will not render the circle.

menu-favourites.svg.zip

In the attached image the circle is not rendered with the correct stroke width because the parseStroke() function returns early when stroke is not provided for the <circle> element (but it's already set on the <g> parent and thus should be inherited).

showcase-cycle.zip

Ongoing effort in the parsing_rewrite branch

Long been desired to not use a DOM interface - it bloats up memory usage, creates unnecessary objects, and very easily allows for unintentional object retention. I made some effort to avoid doing any backreferencing of XML so that a forward-only SAX or .NET style model could be used.

This is becoming more important to me as I look at doing code generation support - the parsing logic is scattered all over right now and hard to adapt to different output models. While taking care of that, mgiht as well bite the bullet and either use the new SAX interface in dart-xml or use a push style model (which might be a bit cleaner) that I'm working on.

This image does not look correct :
https://github.com/Rockvole/communikate20-kbml/blob/master/describing/images/finish.svg

It has an additional line - thanks.

Following the guide I can't manage to draw the svg on a canvas

Right now, there are a couple challenges:

• Direct use of Paint - need a way to serialize or not use directly
• Direct use of Path - need a way to serialize or not use directly
• Gradients are handled with functions. Need to make the relevant parts into their own object(s) to serialize.

Got the below error on this svg step1.txt - renamed to .txt so I could attach it here.

flutter: type 'Paint' is not a subtype of type 'DrawablePaint'
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter:   https://github.com/flutter/flutter/issues/new
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      _appendParagraphs (package:flutter_svg/src/svg_parser.dart:110:34)

If you look at the code, it's trying to assign a Paint (_transparentPaint) to a DrawablePaint (style.stroke). Not sure why this even compiles.

Paint _transparentPaint = new Paint()..color = const Color(0x0);
void _appendParagraphs(ParagraphBuilder fill, ParagraphBuilder stroke,
    String text, DrawableStyle style) {
  fill
    ..pushStyle(style.textStyle.toFlutterTextStyle(foregroundOverride: style.fill))
    ..addText(text);

  stroke
    ..pushStyle(style.textStyle.toFlutterTextStyle(
        foregroundOverride:
==>            style.stroke == null ? _transparentPaint : style.stroke))
    ..addText(text);
}

• support <clipPath> at basic level
• support for clip-rule settings\

Why svg does not appear in Column?

I've tried everything but nothing happens. However the GridView.extent example works perfectly.

What could I be doing wrong?

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/avd.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget _painters;

  @override
  void initState() {
    super.initState();
      _painters = new SvgPicture.asset('assets/dart.svg');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Column(children: <Widget>[
       _painters
      ]),
    );
  }
}

I'm seeing that SVGs loaded as assets don't get cached at all, because key.bundle.load(key.name) doesn't cache, whereas key.bundle.loadString(key.name) does.

If I'm using SVGs to render icons, this means that the asset is loaded repeatedly as the app is used.

Would it make sense to use loadString instead?

https://github.com/google/skia/tree/master/experimental/svg/model

just thought it might be good to link here.
I was looking into the WASM skia support and found the SVG support :)

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="96" height="96" 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="#ff7f00">
  <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" fill-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" fill-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>

In Chrome:

In Flutter:

This SVG fails with the error in the title: https://www.flaticon.com/free-icon/argentina_323346

The following SVG was exported from Sketch.

It renders in Flutter as:

It renders in Chrome as:

The original in Sketch looks like:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="24px" viewBox="0 0 25 24" 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>M2020 Copy</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="05.-My-M2020" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="My-M2020----empty" transform="translate(-314.000000, -623.000000)">
            <g id="BOTTOM-NAV" transform="translate(0.000000, 611.000000)">
                <g id="My-2020" transform="translate(294.000000, 12.000000)">
                    <g id="M2020-Copy" transform="translate(20.000000, 0.000000)">
                        <rect id="Rectangle-19" fill="#FFFFFF" x="0" y="0" width="25" height="24"></rect>
                        <rect id="Rectangle-18" fill="#1A1A1A" x="15" y="18" width="7" height="3"></rect>
                        <rect id="Rectangle-18" fill="#1A1A1A" x="15" y="13" width="7" height="3"></rect>
                        <rect id="Rectangle-18" fill="#1A1A1A" x="3" y="8" width="19" height="3"></rect>
                        <rect id="Rectangle-18" fill="#1A1A1A" x="3" y="3" width="19" height="3"></rect>
                        <path d="M13,15.6331021 L13,16.458045 C12.992194,16.4762887 12.9861647,16.495287 12.9820009,16.5147599 C12.9419071,16.8438693 12.8507475,17.1641875 12.7120139,17.4634442 C12.4063064,18.1153182 11.9966309,18.7096331 11.5000724,19.2216039 C10.4871213,20.3084662 9.32117753,21.190124 8.08023742,21.9738197 C8.03634096,22.0087268 7.97514106,22.0087268 7.93124461,21.9738197 C6.93382454,21.3595502 5.99619353,20.6474888 5.13137972,19.8475293 C4.51087525,19.2838993 3.97117436,18.6322128 3.52845707,17.912007 C3.03641049,17.1128708 2.87947019,16.1421951 3.09347806,15.2216618 C3.54745616,13.1397121 6.06133484,12.2889897 7.62725927,13.6841744 C7.76125281,13.80276 7.87924711,13.9409379 8.01324065,14.0770535 C8.02147718,14.0627894 8.0304912,14.0490182 8.04023935,14.0358063 C8.74020557,13.2283934 9.60516383,12.8674809 10.6401139,13.046906 C11.7750591,13.2428299 12.5190232,13.9419691 12.8810057,15.066985 C12.9307398,15.2532895 12.9704649,15.4422826 13,15.6331021 Z" id="Shape" fill="#1A1A1A" fill-rule="nonzero"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

I'm using a few SVGs exported from Sketch.

I get lots of debug messages about three unhandled elements:

• <title>
• <mask>
• <polygon>

example:

flutter: unhandled element polygon; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#4c5d9(), name: "assets/microphone.svg", colorFilter: ColorFilter(Color(0xffffffff), BlendMode.srcIn))

While the SVGs work fine in Flutter with flutter_svg for my purposes, and I can edit the SVGs and remove or comment out these elements, this does have an impact of the signal-to-noise ratio when working on the app if I don't edit the SVGs.

I see there is a print statement on line 96 of svg_parser.dart:

  } else if (el.name.local != 'desc') {
    // no plans to handle these
    print('unhandled element ${el.name.local}; Picture key: $key');
  }

I have some ideas what to do about this, and I'll be happy to provide a PR for one of the following:

1. remove the print statement altogether
2. record a set of (el.name.local, key) and print each unique error only once per runtime
3. specifically ignore title, polygon, mask, so that regular SVG exports from Sketch aren't noisy.

Thanks

Hi,

I just started using this library and it seems such a headache. What I am trying to do, is to show a vector downloaded from internet, but I just see CircularProgressIndicator and then white screen.

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class testPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child:  SvgPicture.network(
          'https://upload.wikimedia.org/wikipedia/commons/6/67/Firefox_Logo%2C_2017.svg',
          placeholderBuilder: (BuildContext context) => new Container(
              padding: const EdgeInsets.all(30.0),
              child: const CircularProgressIndicator()),
        ),
      ),
    );
  }
}

And I am using this in my pubspec.yaml
dependencies:
flutter:
sdk: flutter

flutter_svg: ^0.5.5+1

ERROR MSG:
I/flutter (13107): unhandled element title; Picture key: NetworkPicture("https://upload.wikimedia.org/wikipedia/commons/6/67/Firefox_Logo%2C_2017.svg", headers: null, colorFilter: null)

• Make caching depend on picture size rather than number of pictures; depends on flutter/engine#5378
• Make caching strategy injectable/swappable

Hi,
this is an SVG that we would like to be able to render using this library.
friends_emoji.svg.zip

The only thing that is not visibly rendered correctly are the shadows, which use a blur effect.

@dnfield can you please take a look on the file and tell me if you see anything that at the moment can't be rendered due to current Flutter rendering limitations?

We are considering to put some of our
efforts on this and fill a PR to add support.

Thank you a lot

(should be done in the path library)

• Support non-percentage dash-offset
• Support percentage based dash-offsets

It should be entirely possible to generate the DrawableRoot and children from SVG data at compile time, thus sparing parsing.

This is a different take than trying to make things serializable, which should have a few advantages:

• No parsing time at runtime
• No concerns about future-compatibility with a serialized Path, Paint, Shader, etc.

But a few limitations:

• No support for dynamic loading of an asset over network etc. (but that could still be supported with existing implementation)

See also dnfield/flutter_path_drawing#2

Linear gradients aren't rendering 100% correctly (compared to Chrome), and sometimes not at all (as in flutter_logo.svg).

Hi guys,

i want use your library to render svg file on my app. When load the svg from asset but I saw the black image. I attach the original file, can I help me what's wrong?
Thank a lot
J
cat.svg.zip

Currently it's (almost) impossible to use the SvgPicture widget without knowing the aspect ratio of the asset.

I propose to always return the RawPicture wrapped inside a SizedBox() and consider also removing the width and height parameters from the SvgPicture widget.
The rationale is:

• The widget knows the size of the viewport (it's in the SVG root node);
• Right now if you specify only width or only height, or you don't specify any, you end up with a totally blank widget, unless the parent constraints that dimension somehow;
• With this updated behaviour if you put a SvgPicture inside a Center widget you will see the asset at its original size (given that there is enough space);
• Parent constraints always take precedence on SizedBox ones so it will be very easy to force a given size by just wrapping a SvgPicture with any other size constraining widget (e.g. SizedBox, Container, etc.);
• Wrapping the new SvgPicture inside a FittedBox will enable users to obtain almost the same behaviour as if they were using Images (contain, fit, fill, etc.).

I can provide a PR if this approach reaches a consensus.

Sketch produced this SVG.

It renders in Sketch like this:

It renders in Chrome like this:

It renders in Flutter like this:

If I go into the SVG code and reduce the element id Filter's stroke-width from 4 to 3, it looks like this:

... which looks more like the other renderers do. I wonder if somehow flutter_svg is adding one to the stroke width?

<?xml version="1.0" encoding="UTF-8"?>
<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>

I have a fix for this, will update soon.

This is really great work. I just want to say it.

Looking forward to trying out and seeing the interesting possibilities and use cases this offers. I think there are many !

Ideas to improve the plugin for beginners :

1. Include details in the getting started description stating that the svg must be drawn inside a sized widget to be visible.
   OR
2. In the getting started description, include what is needed to make the example work right away. e.g. wrap the example in a SizedBox. (Had me stumped for hours)
   OR
3. Include an error message stating that the svg will not be displayed because it has no size (no information was shown when my image did not appear).
   OR
4. Display black/yellow chevrons (like the flutter image library) on screen if it cannot be displayed.
   OR
5. Dont require the svg to be put in a SizedBox, but allow the width / height parameters as arguments.

P.S. Your plugin is excellent work, I just hope for a few tweaks :)

The current state of master doesn't run with the current beta. Going to redo project structure.

new AvdPicture.asset(
'assets/drawables/battery_charging.xml',
),

render nothing

Hi - the attached svg has been downloaded from https://feathericons.com/. It specifies the stroke as stroke="currentColor", which apparently is a kind of web standard for the inherited color. (?)

If I remove both fill and stroke definitions, the svg is rendered with fill as whatever is passed in as the color field; but the stroke is neither defined nor used.

Would it be possible to get stroke to honour the color directive from the widget's config? Or (better still for me) colors.dart to recognise and correctly return the currentColor wherever it's used?

home.svg.zip

env:

Flutter 0.8.1 • channel dev • https://github.com/flutter/flutter.git
Framework • revision 0235ec59d1 (3 days ago) • 2018-09-06 20:23:13 -0700
Engine • revision 9b297b3b51
Tools • Dart 2.1.0-dev.3.1.flutter-760a9690c2

run:

cd /Users/apple/workspace/go/src/github.com/dnfield/flutter_svg && flutter run -d all example/main.dart
Running "flutter packages get" in flutter_svg...
The current Dart SDK version is 2.1.0-dev.3.1.flutter-760a9690c2.

Because no versions of mockito match >2.2.3 <3.0.0 and mockito 2.2.3 requires SDK version >=2.0.0-dev.16.0 <2.0.0, mockito ^2.2.3 is forbidden.
So, because flutter_svg depends on mockito ^2.2.3, version solving failed.

pub get failed (1)
make: *** [run] Error 1

In all of the flutter plugins I have used they contain an example directory which contains a demonstration project. This means that in a couple of minutes you can run the example and try out the plugin.

e.g. all of the google plugins contain this :
https://github.com/flutter/plugins/tree/master/packages

When you create a template plugin :

flutter create --org com.example --template=plugin hello

It will create a working example directory for you.

I am struggling to get anything to work with this plugin and a working example would be a big help.

Thanks your job!
I find a problem of this library. When I load the follow svg file from network, it doesn't work.
svg link:
https://camo.githubusercontent.com/956078561b010d309faad6f271afede2344f556f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d666c757474657225374364617274253230766d2d6666363962342e7376673f7374796c653d666c61742d737175617265

The file content is:

<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>

when I change the content to:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="20" viewBox="0 0 150 20">
      <g shape-rendering="crispEdges">
       <path fill="#555" d="M0 0h57v20H0z"/>
       <path fill="#ff69b4" d="M57 0h93v20H57z"/>
      </g>
      <g fill="#fff" text-anchor="start" font-family="Verdana" font-size="11">
      <text x="5" y="14" textLength="47">platform</text>
      <text x="70" y="14"  textLength="83">flutter|dart vm</text>
     </g>
 </svg>

I use SvgPicture.string to render the widget with above code, it works, but But the relationship among x,y,textLength and transform is not clear.

Similar to Android feature related to vector drawables, where the developer can change the color of the asset at runtime through android:tint or by applying a style or theme.

In Android the color is applied over areas with color #000000.

This is a common procedure in Android to allow the use of only 1 asset and provide branding through different screens, or change color according to state computed dynamically (e.g. a wifi or toggle icon could have a grey color when disabled and brand color when active).

I'm not understanding the problem that is occurring with the gradient.
The svg is correct so that in any image editor, and in the browser, all the tips of the star have gradients.

But when placing on the flutter only one side of the star appears with gradient

Would you have a solution to this problem?

Follow the images in your browser and flutter:

Star in Flutter

Star in Google Chrome