FFImageLoading icon indicating copy to clipboard operation
FFImageLoading copied to clipboard
verified publisher icon luberda-molinet

Particular svg style avoid rendering

Open davidverriere opened this issue 5 years ago • 3 comments

🐛 Bug Report

When style class shared behavior are set, svg are not rendered in xamarin form on android

Reproduction steps

svg with shared property in svg style def part like .cls1,.cls2{fill:#691e5d;} does not work

Configuration

Not working svg style

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <defs>
    <style>.cls-1,.cls-2{fill:#691e5d;}.cls-2{{fill:#691e5d;stroke:#691e5d;stroke-miterlimit:10;}</style>
  </defs>

working svg style

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <defs>
    <style>.cls-1{fill:#691e5d;}.cls-2{{fill:#691e5d;stroke:#691e5d;stroke-miterlimit:10;}</style>
  </defs>

Version: 1.x

Platform:

  • [ ] :iphone: iOS
  • [ ] :robot: Android
  • [ ] :checkered_flag: WPF
  • [ ] :earth_americas: UWP
  • [ ] :apple: MacOS
  • [ ] :tv: tvOS
  • [x] :monkey: Xamarin.Forms

davidverriere avatar Oct 29 '20 08:10 davidverriere

I am experiencing the same issue on both platforms (Andriod + IOS).

Versions

  • Xamarin.FFImageLoading: V2.4.11982
  • Xamarin.Form: 4.8.0.1560
  • SkiaSharp: 2.80.2

Temp fix* I tried removing the style classes from the SVG and the images did load after that but just without the styling.

Andriod

10-29 11:54:13.381 I/mono-stdout(11236): Image loading failed: svglogo.svg;(size=0x800,type=SvgDataResolver)
10-29 11:54:13.381 I/mono-stdout(11236): System.ArgumentException: An item with the same key has already been added. Key: .a
10-29 11:54:13.381 I/mono-stdout(11236):   at System.Collections.Generic.Dictionary`2[TKey,TValue].TryInsert (TKey key, TValue value, System.Collections.Generic.InsertionBehavior behavior) [0x0015a] in /Users/builder/jenkins/workspace/archive-mono/2020-02/android/release/external/corefx/src/Common/src/CoreLib/System/Collections/Generic/Dictionary.cs:572 
10-29 11:54:13.381 I/mono-stdout(11236):   at System.Collections.Generic.Dictionary`2[TKey,TValue].Add (TKey key, TValue value) [0x00000] in /Users/builder/jenkins/workspace/archive-mono/2020-02/android/release/external/corefx/src/Common/src/CoreLib/System/Collections/Generic/Dictionary.cs:240 
10-29 11:54:13.381 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.CssHelpers.ParseSelectors (System.String css, System.Collections.Generic.Dictionary`2[TKey,TValue] destination) [0x00078] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\Helpers\CssHelpers.cs:29 
10-29 11:54:13.381 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.SKSvg.ReadElement (System.Xml.Linq.XElement e, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill, System.Boolean isMask, System.Threading.CancellationToken token) [0x00a44] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:464 
10-29 11:54:13.381 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.SKSvg.LoadElements (System.Collections.Generic.IEnumerable`1[T] elements, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill, System.Threading.CancellationToken token) [0x00010] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:221 
10-29 11:54:13.382 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.SKSvg.Load (System.Xml.Linq.XDocument xdoc, System.Threading.CancellationToken token) [0x00417] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:209 
10-29 11:54:13.383 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.SKSvg.Load (System.Xml.XmlReader reader, System.Threading.CancellationToken token) [0x00000] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:100 
10-29 11:54:13.383 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.SKSvg.Load (System.IO.Stream stream, System.Threading.CancellationToken token) [0x00012] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:94 
10-29 11:54:13.383 I/mono-stdout(11236):   at FFImageLoading.Svg.Platform.SvgDataResolver.Resolve (System.String identifier, FFImageLoading.Work.TaskParameter parameters, System.Threading.CancellationToken token) [0x0019d] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SvgDataResolver.cs:232 
10-29 11:54:13.383 I/mono-stdout(11236):   at FFImageLoading.DataResolvers.WrappedDataResolver.Resolve (System.String identifier, FFImageLoading.Work.TaskParameter parameters, System.Threading.CancellationToken token) [0x0004e] in C:\projects\ffimageloading\source\FFImageLoading.Common\DataResolvers\WrappedDataResolver.cs:21 
10-29 11:54:13.383 I/mono-stdout(11236):   at FFImageLoading.Work.ImageLoaderTask`3[TDecoderContainer,TImageContainer,TImageView].RunAsync () [0x00300] in C:\projects\ffimageloading\source\FFImageLoading.Common\Work\ImageLoaderTask.cs:618

IOS

System.ArgumentException: An item with the same key has already been added. Key: .a
  at System.Collections.Generic.Dictionary`2[TKey,TValue].TryInsert (TKey key, TValue value, System.Collections.Generic.InsertionBehavior behavior) [0x0015a] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/Common/src/CoreLib/System/Collections/Generic/Dictionary.cs:572 
  at System.Collections.Generic.Dictionary`2[TKey,TValue].Add (TKey key, TValue value) [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/Common/src/CoreLib/System/Collections/Generic/Dictionary.cs:240 
  at FFImageLoading.Svg.Platform.CssHelpers.ParseSelectors (System.String css, System.Collections.Generic.Dictionary`2[TKey,TValue] destination) [0x00078] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\Helpers\CssHelpers.cs:29 
  at FFImageLoading.Svg.Platform.SKSvg.ReadElement (System.Xml.Linq.XElement e, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill, System.Boolean isMask, System.Threading.CancellationToken token) [0x00a44] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:464 
  at FFImageLoading.Svg.Platform.SKSvg.LoadElements (System.Collections.Generic.IEnumerable`1[T] elements, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill, System.Threading.CancellationToken token) [0x00010] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:221 
  at FFImageLoading.Svg.Platform.SKSvg.Load (System.Xml.Linq.XDocument xdoc, System.Threading.CancellationToken token) [0x00417] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:209 
  at FFImageLoading.Svg.Platform.SKSvg.Load (System.Xml.XmlReader reader, System.Threading.CancellationToken token) [0x00000] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:100 
  at FFImageLoading.Svg.Platform.SKSvg.Load (System.IO.Stream stream, System.Threading.CancellationToken token) [0x00012] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SkSvg.cs:94 
  at FFImageLoading.Svg.Platform.SvgDataResolver.Resolve (System.String identifier, FFImageLoading.Work.TaskParameter parameters, System.Threading.CancellationToken token) [0x0019d] in C:\projects\ffimageloading\source\FFImageLoading.Svg.Shared\SvgDataResolver.cs:232 
  at FFImageLoading.DataResolvers.WrappedDataResolver.Resolve (System.String identifier, FFImageLoading.Work.TaskParameter parameters, System.Threading.CancellationToken token) [0x0004e] in C:\projects\ffimageloading\source\FFImageLoading.Common\DataResolvers\WrappedDataResolver.cs:21 
  at FFImageLoading.Work.ImageLoaderTask`3[TDecoderContainer,TImageContainer,TImageView].RunAsync () [0x00300] in C:\projects\ffimageloading\source\FFImageLoading.Common\Work\ImageLoaderTask.cs:618

grierson avatar Oct 29 '20 11:10 grierson

I've made a sample project. https://github.com/grierson/App1

Andriod Screenshot_1603973547

IOS Simulator Screen Shot - iPhone 11 - 2020-10-29 at 12 15 28

grierson avatar Oct 29 '20 12:10 grierson

I've just experienced this issue.

It seems the component does not support the use of duplicate style keys. So the work around is to edit the problematic SVG file and merge the styles so each key is unique.

eg.

Problematic SVG styles

<style>
	.cls-1{fill:#002341;}
	.cls-2,
	.cls-3,
	.cls-4{opacity:0.14;}
	.cls-2{fill:url(#linear-gradient);}
	.cls-3{fill:url(#linear-gradient-2);}
	.cls-4{fill:url(#linear-gradient-3);}
</style>

Merged SVG styles

<style>
	.cls-1{fill:#002341;}
	.cls-2{opacity:0.14;fill:url(#linear-gradient);}
	.cls-3{opacity:0.14;fill:url(#linear-gradient-2);}
	.cls-4{opacity:0.14;fill:url(#linear-gradient-3);}
</style>

dalesmckay avatar May 10 '21 03:05 dalesmckay