mono / skiasharp.extended Goto Github PK

SkiaSharp is a cross-platform, comprehensive 2D graphics API for all .NET platforms. And, here is where you will find all sorts of extras that you can use with it.

Home Page: https://mono.github.io/SkiaSharp.Extended

License: MIT License

C# 100.00%

xamarin graphics dot-net ios android windows macos cross-platform skia skiasharp

skiasharp.extended's Introduction

SkiaSharp.Extended

SkiaSharp.Extended is a collection some cool libraries that may be useful to some apps. There are several repositories that may have interesting projects:

SkiaSharp (the engine)
SkiaSharp.Extended (additional APIs)
SkiaSharp.Extended.UI.Forms (additional Xamarin.Forms controls)
SkiaSharp.Extended.UI.Maui (additional .NET MAUI controls)

Using

There is an early access feed that you can use to get the latest and greatest, before it goes out to the public:

https://aka.ms/skiasharp-eap/index.json

Building

To build the projects and samples, just open SkiaSharp.Extended.sln in Visual Studio.

The CI server just runs dotnet cake and outputs all the packages, assemblies and test results. This can also be used to build everything locally.

License

The code in this repository is licensed under the MIT License.

skiasharp.extended's People

Contributors

Stargazers

Watchers

Forkers

mattleibow leonardors liwq-net codedevote daniel-luberda cunnpole llenroc snorrsi fluendo cauusc inforithmics dominicpease bjorndaniel mikem2343 lfkdsk mrsaleh bradchase2011 happypig375 unoplatform abezydar ebusch truthiswill whitemike889 ru-ace media-library nick-caiman sohnavcom terrajobst kmuffato timskillman blackbird-one 8529447889 davidwengier jpbrocca lanicon devbox10 taublast vb6hobbyst7 isabella232 alexandersemenyak bubdm cybersys akwong77 angelofb bijington jfversluis jjnguy mdh1418 ajunlonglive luijt sertac10 marmariv toshiyuki-takahagi kannankrish hulinning2 swapnilpopatgaikwad swapnilbaxture1 adamessenmacher dioptra-forks huafangyun robk410

skiasharp.extended's Issues

Does this support animated SVGs?

Please let me know.

Thank you very much in advance for helping me out.

Large images shows blank after resizing

When resizing a large image (> 6MB, 14034px by 9921px), the process goes through with no errors, but the image itself doesn't show upon save, only the white background canvas. The pixels cannot be read in the SKCodec, and similarly if I try and create an SKBitmap instead of an image, I get error 'Unable to allocate pixels for the bitmap'.

The code works fine with smaller images.

Is there a limit on how large a file size can be processed?
`using (SKMemoryStream sourceStream = new SKMemoryStream(imageData))
{
using (SKCodec codec = SKCodec.Create(sourceStream))
{
sourceStream.Seek(0);

        using (SKImage image = SKImage.FromEncodedData(SKData.Create(sourceStream)))
        {
            int newHeight = image.Height;
            int newWidth = image.Width;

            if (maxHeight > 0 && newHeight > maxHeight)
            {
                double scale = (double)maxHeight / newHeight;
                newHeight = maxHeight;
                newWidth = (int)Math.Floor(newWidth * scale);
            }

            if (maxWidth > 0 && newWidth > maxWidth)
            {
                double scale = (double)maxWidth / newWidth;
                newWidth = maxWidth;
                newHeight = (int)Math.Floor(newHeight * scale);
            }

            var info = codec.Info.ColorSpace.IsSrgb ? new SKImageInfo(newWidth, newHeight) : new SKImageInfo(newWidth, newHeight, SKImageInfo.PlatformColorType, SKAlphaType.Premul, SKColorSpace.CreateSrgb());
            using (SKSurface surface = SKSurface.Create(info))
            {
                using (SKPaint paint = new SKPaint())
                {
                    // High quality without antialiasing
                    paint.IsAntialias = true;
                    paint.FilterQuality = SKFilterQuality.High;

                    // Draw the bitmap to fill the surface
                    surface.Canvas.Clear(SKColors.White);
                    var rect = new SKRect(0, 0, newWidth, newHeight);
                    surface.Canvas.DrawImage(image, rect, paint);
                    surface.Canvas.Flush();

                    using (SKImage newImage = surface.Snapshot())
                    {
                        using (SKData newImageData = newImage.Encode(convertToJpeg ? SKEncodedImageFormat.Jpeg : (codec.EncodedFormat == SKEncodedImageFormat.Gif ? SKEncodedImageFormat.Png : codec.EncodedFormat), 
                            codec.EncodedFormat == SKEncodedImageFormat.Gif || codec.EncodedFormat == SKEncodedImageFormat.Png || !downsampleJpeg ? 100 : 85))
                        {
                            return newImageData.ToArray();
                        }
                    }
                }
            }
        }
    }
}

Skia Sharp Extended Svg does not honor userspaceonuse in gradients

Current Behavior

Should look like this

Release NuGet package 1.59.2 with fixes

I'm using SkiaSharp.Extended.Svg to load and render SVG images. I stumbled upon the error "For security reasons DTD is prohibited in this XML document", which was already fixed by pull request #17. Can we have an updated NuGet package (there is already a milestoe 1.59.2 with no open issues)? Thank you!

SVG Rendering Issue

I'm attempting to replace our SVG rendering w/ skia sharp's and I ran into an issue.

Source SVG: https://cdn.rawgit.com/chocolatey/chocolatey-coreteampackages/edba4a5849ff756e767cba86641bea97ff5721fe/icons/chrome.svg

Expected Render:

Actual Render:

It looks like there

Rendering Code:

                using (var stream = imageStream.OpenRead())
                {
                    var svg = new SKSvg(new SKSize());
                    svg.Load(stream);

                    var canvasMin = Math.Min(e.Info.Width, e.Info.Height);
                    var svgMax = Math.Max(svg.Picture.CullRect.Width, svg.Picture.CullRect.Height);
                    var scale = canvasMin / svgMax;
                    var matrix = SKMatrix.MakeScale(scale, scale);

                    e.Surface.Canvas.Clear(SKColor.Empty);
                    e.Surface.Canvas.DrawPicture(svg.Picture, ref matrix);
                    return;
                }

Where e.Surface is the rendering surface of a WPF SKElement.

It looks like <circle cx="50%" cy="50%" r="41" fill="url(#a)" /> isn't getting relatively positioned properly.

rendering svg in xamarin form resulting in black square

I am trying to print svg pictures on my xamarin forms app. I am using SkiaSharp. I implemented a component using a Bindable property to get the byte[] of the svg and I draw it in the component.

public static readonly BindableProperty ImageProperty = BindableProperty.Create(nameof(Image), typeof(byte[]), typeof(SvgCanvas));
public byte[] Image
   {
      get => (byte[])GetValue(ImageProperty);
      set
     {
        if (Image == value)
        {
            return;
        }

        SetValue(ImageProperty, value);

        CanvasView.InvalidateSurface();
     }
}

 private void OnPainting(object sender, SKPaintSurfaceEventArgs args)
 {
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    int width = args.Info.Width;
    int height = args.Info.Height;

    // clear the surface
    canvas.Clear(SKColors.White);

    // the page is not visible yet
    if (Image == null)
    {
        return;
    }

    SKSvg svg = new SKSvg(new SKSize(width, height));
    using (MemoryStream ms = new MemoryStream(Image))
    {
        svg.Load(ms);
    }

    // draw the svg
   // canvas.DrawPicture(svg.Picture, ref matrix);
    canvas.DrawPicture(svg.Picture);
 }

It looks like the Picture is loaded but only a black square is displayed on my view...

My component is called like this in my page: (Picture is a byte[])

 <controls:SvgCanvas Image="{Binding Picture}" />

Did somebody had the same issue? Maybe an encoding problem?

I am kind of lost..

[Question] Using the build targets for custom typeface

Is it possible to use your IconifyGenerator for custom typeface fonts? It doesn't appear to be included in the Nuget yet it would be a massive timesaver. I think Refit do that as it is required for their code generation process, a situation that is similar to what you are doing here.

Admitedly, this is probably an advanced scenario which would require documenting unless you add an Attribute to tag custom fonts classes and their matching data for parsing.

Thanks

Draw Svgs with provided paints color

helo,

i was hoping to be able to draw svgs with a paints color that i provide with the DrawPicture() call, ie. overriding the style set in the file. i'd like to load little icons as svgs and draw them in different colors on demand but it seems the drawing always takes the style saved in the file and only falls back to black when i remove the style from the file.

or am i missing something?

When loading SVG fill="transparent" is not recognized and drawn as black

I'm using SkiaSharp.Svg (1.60.0) and when drawing an SVG fill/stroke with "transparent" is not recognized and just drawn as black.

Chain of polylines with the same attributes should be joint

I suppose chain of polylines with the same attributes should be joint.
See svg example below

<svg width="30" height="42" viewBox="485 535 305 430" refX="center" refY="center">
  <polyline points="600 625 575 650" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="575 650 575 850" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="575 850 600 875" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="600 875 675 875" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="675 875 700 850" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="700 850 700 650" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="675 625 600 625" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="700 650 675 625" stroke="#f4ecce" fill="transparent" stroke-width="90" stroke-linecap="round"/>
  <polyline points="600 625 575 650" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="575 650 575 850" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="575 850 600 875" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="600 875 675 875" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="675 875 700 850" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="700 850 700 650" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="675 625 600 625" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
  <polyline points="700 650 675 625" stroke="#000000" fill="transparent" stroke-width="30" stroke-linecap="round"/>
</svg>

It is loaded and rendered as set of separate polylines

At the same time this svg is rendered by GIMP as following

May it would be good to follow GIMPs approach?

[QUESTION] What is the status of the svg nuget package?

There has been no new release of a 1.68 svg nuget package.
https://www.nuget.org/packages/SkiaSharp.Svg/

The last release is of 1.60.0. There has not been a release of a 1.60.3 version. This might be because there have been no changes in the svg part, but apparently there had been breaking changes in the shared part because if upgrade to 1.60.3 and use 1.60.0 for svg we get a method not found exception in our project (Mapsui)

Will there be a new release of the svg package?

SVG: fill-rule evenodd support

Description

This should render correctly:

<svg width="156" height="111" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M156 55.5c0 30.652-24.848 55.5-55.5 55.5H-6V0h106.5C131.152 0 156 24.848 156 55.5z" fill="#000"/>
  <path style="fill:#64D5A1;fill-rule:evenodd" d="M51 37.2h54v27.327L91.898 51.664a3 3 0 0 0-3.976-.202L73.126 63.299c-.16.128-.303.27-.432.423l-6.69-6.958a3 3 0 0 0-3.46-.625l-11.342 5.444a3.145 3.145 0 0 0-.202.107V37.2zm-6 0c0-3.976 2.686-7.2 6-7.2h54c3.314 0 6 3.224 6 7.2v39.6c0 3.977-2.686 7.2-6 7.2H51c-3.314 0-6-3.224-6-7.2V37.2zM70.5 51a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="156" height="111" fill="none">
  <path fill="#000" d="M156 55.5c0 30.652-24.848 55.5-55.5 55.5H-6V0h106.5C131.152 0 156 24.848 156 55.5z"/>
  <path fill="#64d5a1" fill-rule="evenodd" d="M51 37.2h54v27.327L91.898 51.664a3 3 0 0 0-3.976-.202L73.126 63.299c-.16.128-.303.27-.432.423l-6.69-6.958a3 3 0 0 0-3.46-.625l-11.342 5.444a3.145 3.145 0 0 0-.202.107V37.2zm-6 0c0-3.976 2.686-7.2 6-7.2h54c3.314 0 6 3.224 6 7.2v39.6c0 3.977-2.686 7.2-6 7.2H51c-3.314 0-6-3.224-6-7.2V37.2zM70.5 51a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z"/>
</svg>

Support RGB color styles expressed as percent

On loading an SVG file with where a style is denoted with rgb syntax using percentages, a System.FormatException is raised from ColorHelper.TryParse. Issue seem with v1.68.0.

For example,

<g style="fill:rgb(90.194702%,0%,0%);fill-opacity:1;">

I've found this style of color style formatting is generated from Poppler's pdftocairo program that is used to convert PDF to SVG.

StackTrace

 	mscorlib.dll!System.Number.StringToNumber(string str, System.Globalization.NumberStyles options, ref System.Number.NumberBuffer number, System.Globalization.NumberFormatInfo info, bool parseDecimal)	Unknown
 	mscorlib.dll!System.Number.ParseInt32(string s, System.Globalization.NumberStyles style, System.Globalization.NumberFormatInfo info)	Unknown
 	mscorlib.dll!int.Parse(string s)	Unknown
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.ColorHelper.TryParse(string str, out SkiaSharp.SKColor color) Line 16	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.ReadPaints(System.Collections.Generic.Dictionary<string, string> style, ref SkiaSharp.SKPaint strokePaint, ref SkiaSharp.SKPaint fillPaint, bool isGroup, out string fillId) Line 945	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.ReadPaints(System.Xml.Linq.XElement e, ref SkiaSharp.SKPaint stroke, ref SkiaSharp.SKPaint fill, bool isGroup) Line 818	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.ReadElement(System.Xml.Linq.XElement e, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill) Line 238	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.ReadElement(System.Xml.Linq.XElement e, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill) Line 316	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.ReadElement(System.Xml.Linq.XElement e, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill) Line 344	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.ReadElement(System.Xml.Linq.XElement e, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill) Line 316	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.LoadElements(System.Collections.Generic.IEnumerable<System.Xml.Linq.XElement> elements, SkiaSharp.SKCanvas canvas, SkiaSharp.SKPaint stroke, SkiaSharp.SKPaint fill) Line 212	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.Load(System.Xml.Linq.XDocument xdoc) Line 200	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.Load(System.Xml.XmlReader reader) Line 94	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.Load(System.IO.Stream stream) Line 88	C#
 	SkiaSharp.Extended.Svg.dll!SkiaSharp.Extended.Svg.SKSvg.Load(string filename) Line 80	C#

Reference

https://www.w3.org/TR/SVGColor12/

Float functional — rgb(R%, G%, B%)
Each percentage value represents one sRGB color component in the order red, green and blue, separated by a comma and optionally by white space. For colors inside the sRGB gamut, the range of each component is 0.0% to 100.0% and an arbitrary number of decimal places may be supplied. Scientific notation is not supported. This syntactical form can represent an arbitrary range of colors, completely covering the sRGB gamut. Color values where one or more components are below 0.0% or above 100.0% represent colors outside the sRGB gamut. Examples: rgb(12.375%, 34.286%, 28.97%).

Join forces with SVG.NET?

Hello,

we from SVG.NET currently consider splitting SVG processing from drawing. See: svg-net/SVG#590 and svg-net/SVG#607

It would make quite a lot of sense to switch the rendering part to Skia. We also have a lot of rendering code that could probably changed from System.Drawing to Skia. So that might have to be evaluated.

We also have a nice test framework/application that works on pixel comparison. If anyone is willing to work together on that, let us know.

Cannot renderer material design icons

Hi there,

I am trying to use the MaterialDesignIcons' Wrench Icon but cannot render the icon, its just saying wrench with 2 brackets on each side i.e, {{wrench}}:

I add below into App.xaml.cs:

SKTextRunLookup.Instance.AddMaterialDesignIcons();

in my code I call:

 canvas.DrawIconifiedText("{{wrench color=FFFFFF}}", Xc, Yc + _progressUtils.getFactoredHeight(lineHeight1), skPaint);

And the wrench icon I am trying to render is below:

Update to the latest SkiaSharp

SVG doesn't work with css styling

I have some pretty basic SVGs that have their colors assigned in a style, but these will not render in SkiaSharp.

In the svg it has
<style>.cls-1{fill:#f9f9f9;}.cls-2{fill:#0066b2;}.cls-3{fill:#f9a533;}</style>
and when defining a path, those styles are referenced, eg
<path class="cls-3" d="M39.91,40.14,37.84,29.56a2.61,2.61,0,0,0-2.9-2.12H25.28l-.11.4a23.73,23.73,0,0,1,9.09,4.56A18.39,18.39,0,0,1,39.91,40.14Z"/>
But from what i can tell any SVG using styles (class) does not render correctly. All i get it everything in black.

Attached is a simple visa card logo in SVG which doesn't wok with SkiaSharp.
visa1.zip

Strange rendering of text and tspan when using text-anchor and baseline-shift

I am currently using SkiaSharp.SVG 1.59.0 and observed some rendering problems with respect to text-anchor and baseline-shift properties.

See the following example svg:

<?xml version="1.0" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" fill="white" version="1.1">

    <text x="350" y="50" style="fill: #000000; font-size: 24px; text-anchor: start; ">Normal <tspan style="baseline-shift: -12px;">sub</tspan> NORMAL <tspan style="baseline-shift: 12px;">super</tspan></text>
    
    <text x="350" y="100" style="fill: #000000; font-size: 24px; text-anchor: middle; ">Normal <tspan style="baseline-shift: -12px;">sub</tspan> NORMAL <tspan style="baseline-shift: 12px;">super</tspan></text>
    
    <text x="350" y="150" style="fill: #000000; font-size: 24px; text-anchor: end; ">Normal <tspan style="baseline-shift: -12px;">sub</tspan> NORMAL <tspan style="baseline-shift: 12px;">super</tspan></text>
    
    <line x1="350" x2 =" 350" y1="50" y2="150" stroke="black" stroke-width="1"/>
</svg>

When you open this svg in a brrowser (I used Chrome here), you see the following result:

When you render it using SKSvg class (I used WPF here), you get this result:

It seems like the text-anchor attribute is only working as expected, if its value is 'start'. The baseline-shift seems to be ignored completely.

I had a look in the source code and for me it seems, that SKTextAlignment does not correspond to svg text-anchor positions (as mapped in ReadTextAlignment).
Baseline-Shift seems to be not implemented at all.

Any idea on how to improve things? I'd be happy to send a PR, as soon as it is clear what to do.

SVG: fill="url(#id)" support

fill="url(#paint0_linear)" doesn't work

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="241" height="281">
  <use fill="url(#paint0_linear)" transform="translate(85 100.4)" xlink:href="#path0_fill"/>
  <defs id="defs186">
    <linearGradient id="paint0_linear" x2="1" gradientTransform="scale(68.1122 85.3787) rotate(-90 .75 .25)" gradientUnits="userSpaceOnUse">
      <stop id="stop189" offset="0%" stop-color="#F54EA2"/>
      <stop id="stop191" offset="100%" stop-color="#5B2472"/>
    </linearGradient>
    <path id="path0_fill" fill-rule="evenodd" d="M1.59163 13.3228c-1.810814 1.7754-2.155936 4.5659-.832207 6.729L15.8461 44.7043c1.1504 1.8799 1.2414 4.2225.2401 6.1858L.847373 80.7715c-1.074922 2.1078.456137 4.6072 2.822187 4.6072H64.1838c2.2505 0 3.7834-2.2809 2.9332-4.3647L56.9322 56.0501c-.5403-1.3244-.6166-2.7927-.2164-4.1661L67.671 14.2912c.6134-2.1052-.9655-4.2099-3.1582-4.2099-1.2366 0-2.3687.6935-2.9305 1.7951L50.5664 33.4771c-.2771.5435-1.0868.4198-1.1891-.1816L44.6081 5.24005c-.5532-3.25456-4.5362-4.545565-6.8935-2.2344-.5343.52386-.9146 1.18429-1.0995 1.90937L30.73 27.995c-.111.4354-.6274.6201-.9893.3539L8.62794 12.8242c-2.15048-1.5813-5.13028-1.3702-7.03631.4986z"/>
  </defs>
</svg>

works when you replace fill="url(#paint0_linear)" with fill="#444444"

fill-rule is not being applied correctly.

The fill-rule property is not being applied correctly.

http://www.w3.org/TR/SVG2/painting.html#FillRuleProperty

There are two example svg files provided by w3.

fillrule = evenodd

Source: https://www.w3.org/TR/SVG2/images/painting/fillrule-evenodd.svg

fillrule = nonzero

Source: https://www.w3.org/TR/SVG2/images/painting/fillrule-nonzero.svg

They should look like:

fillrule = evenodd

Source: https://www.w3.org/TR/SVG2/images/painting/fillrule-evenodd.png

fillrule = nonzero

Source: https://www.w3.org/TR/SVG2/images/painting/fillrule-nonzero.png

When they are loaded using SKSvg.Load they are both using a Winding FillType and look like "fill-rule = nonzero"

var svg = new SKSvg();
svg.Load(fillruleImage);
canvas.DrawPicture(svg.Picture);

FontAwesome should be updated (4.7 -> 5.3.1)

many of the new glyphs are not available. It looks like the code should still be working, but the url has changed from:
https://raw.githubusercontent.com/FortAwesome/Font-Awesome/v4.7.0/css/font-awesome.min.css

to:
https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/web-fonts-with-css/css/fontawesome-all.min.css

Default stroke-width scales incorrectly.

The line's stroke-width does not scale correctly when not specified. See example below. The SVG specification indicates stroke-width should default to a value of 1. Setting the stroke-width="1"
attribute appears to be working correctly.

SVG
<svg viewBox="0 0 20 20">
<line x1="0" y1="0" x2="20" y2="20" stroke="#000000" />
<line x1="20" y1="0" x2="0" y2="20" stroke="#000000" />
</svg>

Expected Results
20 x 20

100 x 100

Rendered with W3 and Chrome
(https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_stroke0)

Actual Results
20 x 20

100 x 100

Rendered with the following code:
public static SKImage ToSKImage(this SkiaSharp.Extended.Svg.SKSvg svg, SKSizeI size)
{
var scaleX = size.Width / svg.CanvasSize.Width;
var scaleY = size.Height / svg.CanvasSize.Height;
var transform = SKMatrix.MakeScale(scaleX, scaleY);
return SKImage.FromPicture(svg.Picture, size, transform);
}

failed to load svg on linux

I have svg file which i load perfectly fine on windows, but on linux(kubuntu Ubuntu 16.04.2 LTS) it fails to load specified svg file with xml parser error. It happens in canvas.DrawPath(path, fill); (path is null) on 261 line

File: https://drive.google.com/file/d/0B-rAar9E1RhDNHlGVklwYXNROW8/view?usp=sharing

SkiaSharp is builded on linux by following official instructions.
Latest mono & monodevelop. Net: NetFramework 4.6.2
ParseSvgData fails on this data "M321.773,365.766 C321.773,365.766 320.899,211.818 253.571,124.348 C229.089,100.294 213.787,98.107 183.621,91.984 C228.214,90.235 253.571,86.736 288.547,124.348 C346.256,209.194 355.000,371.014 355.000,371.014 C355.000,371.014 354.126,392.007 278.929,406.877 C239.581,414.749 229.089,413.875 184.495,410.376 C291.021,397.255 321.773,365.766 321.773,365.766 Z"

Cannot render properly

Tried with several SVGs:

Sample svg

Gets rendered as:

And
Sample svg

Is completely invisible.

Code:

            SKSvg                svg      = new SKSvg();
            SKEncodedImageFormat skFormat = SKEncodedImageFormat.Png;
            svg.Load(svgStream);
            //SKRect   svgSize   = svg.Picture.CullRect;
            float canvasMin = Math.Min(svg.Picture.CullRect.Width, svg.Picture.CullRect.Height);
            float svgMax = Math.Max(svg.Picture.CullRect.Width, svg.Picture.CullRect.Height);
            float scale = canvasMin / svgMax;
            var matrix = SKMatrix.MakeScale(scale, scale);
            SKBitmap bitmap    = new SKBitmap((int)svg.Picture.CullRect.Width, (int)svg.Picture.CullRect.Height);
            SKCanvas canvas    = new SKCanvas(bitmap);
            canvas.DrawPicture(svg.Picture, ref matrix);
            canvas.Flush();
            SKImage      image = SKImage.FromBitmap(bitmap);
            SKData       data  = image.Encode(skFormat, 100);
            MemoryStream outMs = new MemoryStream();
            data.SaveTo(outMs);
            cachedRender = outMs.ToArray();
            base.Image   = new Bitmap(cachedRender);
            FileStream foo = new FileStream("/mnt/datos/foo.png", FileMode.Create);
            foo.Write(cachedRender, 0, cachedRender.Length);
            foo.Close();

Make the build work without .NET Core installed

This is now possible since mono can build .NET Standard libraries.

Cannot convert svg with defs and clipPath

Originally from mono/SkiaSharp#317

Hello,

The library is not converting the following svg:

<svg x='0px' y='0px' width='160px' height='155px' viewBox='0 0 160 155' enable-background='new 0 0 160 155'>
    <g>
        <path fill='#DCDFE2' stroke='#E3E6E8' stroke-width='38' stroke-miterlimit='10' d='M79.121,63.659l4.5,11.202l0.844,2.102
            l2.257,0.151l12.043,0.815l-9.263,7.741l-1.738,1.453l0.552,2.196l2.946,11.707L81.04,94.609l-1.918-1.208l-1.918,1.204
            l-10.222,6.418l2.946-11.707l0.552-2.196l-1.738-1.449l-9.263-7.741l12.043-0.815l2.257-0.151l0.844-2.102L79.121,63.659
             M79.121,53.985l-7.842,19.531l-21.002,1.424L66.43,88.436l-5.134,20.411l17.826-11.192l17.826,11.192l-5.134-20.411l16.153-13.496
            l-21.002-1.424L79.121,53.985L79.121,53.985z M79.121,53.985l-7.842,19.531l-21.002,1.424L66.43,88.436l-5.134,20.411
            l17.826-11.192l17.826,11.192l-5.134-20.411l16.153-13.496l-21.002-1.424L79.121,53.985L79.121,53.985z'/>
        <g>
            <defs>
                <rect id='SVGID_1_' x='-12.265' y='78.229' transform='matrix(0.6906 -0.7232 0.7232 0.6906 -68.888 118.8596)' width='233.49' height='123.436'/>
            </defs>
            <clipPath id='SVGID_2_'>
                <use xlink:href='#SVGID_1_'  overflow='visible'/>
            </clipPath>
            <path clip-path='url(#SVGID_2_)' fill='#DCDFE2' stroke='#DCDFE2' stroke-width='38' stroke-miterlimit='10' d='M79.121,63.659
                l4.5,11.202l0.844,2.102l2.257,0.151l12.043,0.815l-9.263,7.741l-1.738,1.453l0.552,2.196l2.946,11.707L81.04,94.609l-1.918-1.208
                l-1.918,1.204l-10.222,6.418l2.946-11.707l0.552-2.196l-1.738-1.449l-9.263-7.741l12.043-0.815l2.257-0.151l0.844-2.102
                L79.121,63.659 M79.121,53.985l-7.842,19.531l-21.002,1.424L66.43,88.436l-5.134,20.411l17.826-11.192l17.826,11.192
                l-5.134-20.411l16.153-13.496l-21.002-1.424L79.121,53.985L79.121,53.985z M79.121,53.985l-7.842,19.531l-21.002,1.424
                L66.43,88.436l-5.134,20.411l17.826-11.192l17.826,11.192l-5.134-20.411l16.153-13.496l-21.002-1.424L79.121,53.985L79.121,53.985
                z'/>
        </g>
    </g>
</svg>

(*) If you remove the second part (enclosed in g tag) it works
(**) Also reported in FFImageLoading issue tracker

SVG shows fine on browser rasterization with SkiaSharp has artifacts

From @rraallvv on June 19, 2018 8:43

Description

I'm getting the svg string from this library, and I wanted to rasterize it on both Android and iOS with SkiaSharp:

<svg viewBox="0 0 160 160" width="160" height="160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/xlink">
<defs>
	<clipPath id="hexagon-clip-3602224084" transform="scale(0.5) translate(0, 16)">
		<path d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
	</clipPath>
</defs>
<path fill="white" stroke="#bbbbbb" transform="translate(0, 8) scale(0.5)" d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
<g transform="scale(0.9) translate(9, 8)">
	<g clip-path="url(#hexagon-clip-3602224084)">
		<g color="#3949ab" fill="#fb8c00">
			<rect fill="#795548" x="0" y="0" width="160" height="160">
			</rect>
			<circle cx="80" cy="80" r="40" fill="#3949ab">
			</circle>
			<g opacity=".1" fill="#010101">
				<path d="M119.21,80a39.46,39.46,0,0,1-67.13,28.13c10.36,2.33,36,3,49.82-14.28,10.39-12.47,8.31-33.23,4.16-43.26A39.35,39.35,0,0,1,119.21,80Z" />
			</g>
			<path d="M78.1 20.6C59.9 21.7 45.6 26.4 46 31.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" opacity=".1" />
			<path d="M78.1 19.6C59.9 20.7 45.6 25.4 46 30.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" fill="#fff800" />
			<path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464s-2.035 4.07-9.022 4.07c-6.988 0-24.148-13.092-30.163-25.121-6.014-12.03-4.068-15.214-3.095-17.248z" stroke-width=".885" />
			<path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464-4.334-7.518-7.873-6.633-15.214-6.191-12.118-3.184-21.582-14.418-20.079-16.806 0 .088 5.307-14.595-6.987-15.302z" opacity=".18" fill="#010101" stroke-width=".885" />
			<path d="M26.7 55.6c-4.2 2.2-8.8 8.3-9.7 13" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
			<path d="M30 59.2c-3.4 1.8-7.2 6.8-7.9 10.7" opacity=".6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
			<path d="M94 85s4.8-2 8.2 0c.8.4.7 1.1 0 2 0 0-3.4 4-4.1 4s-4.8-4-4.8-4c-.6-1-.3-1.7.7-2z" fill="#3a3a3a" />
			<path d="M99.3 84.1c1 .2 2 .4 3 .9.8.4.7 1.1 0 2-1.2 1.5-2.6 2.9-4.1 4 1.9-3.2 2.6-6.3 1.1-6.9z" opacity=".2" />
			<path d="M96 100c1.6.2 2-5.8 2-9M88 95.5s7.5 11 18 0" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
			<path d="M79 82s0-12 6-12 6 11.6 6 11.6S86 70 79 82zM102 82s0-12 6-12 6 11.6 6 11.6-5-11.6-12 .4z" fill="#010101" opacity=".6" />
			<path d="M96 86s4-1 6 0h-6z" opacity=".3" fill="#fff" />
			<path d="M93 90c-9.9-3.8-20.4-6.2-31-7M92.6 91.3c-12-2.8-27.7-1.2-27.7-1.2M92.5 93.2c-12.3-1-27.6 5-27.6 5M101 90c8.5-3.8 17.7-6.2 27-7M101.3 91.3c10.5-2.8 24.1-1.2 24.1-1.2M101.4 93.2c10.7-1 24 5 24 5" fill="none" stroke="#000" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round" />
			<path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 5.6 7 16.7 11.8 22.9 8.4s5.6-15.3-1.4-20.2c-1.7-1.4-3.2-2.9-4.4-4.7-7.9-3.2-14.6-8.1-19.5-15.8z" fill="#99671d" />
			<path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 12.2 12.9 22.9 8.4 22.9 8.4-10.1 1.1-21.6-35.8-21.6-35.8-1.4-1.5-2.6-3.1-3.7-4.9z" fill="#6d4716" />
			<path d="M54.8 115.4c-4 0-7.3-3.3-7.3-7.3.1-1.3.5-2.7 1.1-3.8.1-.2 7.1 8.1 10.8 9.5 0-.1-1.3 1.2-4.6 1.6z" fill="#fff" />
			<path d="M58.8 113.3c-.8.3-1.7.5-2.6.6-3.4-.1-6-2.9-5.9-6.3 0-.6.1-1.2.2-1.8 0 .2 4.6 6.2 8.3 7.5z" opacity=".2" />
			<path d="M94 124.5s-2.8 5.5-5.5 7.5c-1.2.8-2.3 1.8-3.4 2.7v4.4c0 .4 10.2-3 8.9-14.6z" fill="#6d4716" />
			<path d="M94.6 124.5s-5.4-1.4-8.9 2c-3.4 3.4-3.4 8.2-1.4 8.2s2.2.7 10.3-10.2z" fill="#fff" />
			<path d="M120.5 108.8s-4.8-8.2-19.1-.7c-14.3 7.5-2.7 23.2-15.7 30.7 0 0 3.7 3.64 8.39-5.85 4.644-9.396 4.61-24.75 26.41-24.15z" fill="#99671d" />
			<path d="M85.8 138.8s6.1 2.7 10.2-10.9 8.9-21.8 20.4-21.1c1.6 0 3.2.6 4.4 1.7 5.6 5 1.3 19.6-4.4 24.2-6.8 5.4-21.8 10.9-27.9 8.9s-2.7-2.8-2.7-2.8z" fill="#444" />
			<path d="M84.8 119.2l1 7.4c1.9-1.4 3.6-2.3 5-2.3l-.6-6.2c-1.8.5-3.6.8-5.4 1.1z" fill="#ffc866" />
			<path d="M119.2 112.6h-11.6c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h11.6c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM120.3 115.8h-14.7c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h14.7c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM120.3 118.9h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM119.2 122.1h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .2-.2.5-.5.5zM118.1 125.2h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM116.1 128.4H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h17.9c.3 0 .5.2.5.5 0 .2-.3.5-.5.5zM114 131.5H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5H114c.3 0 .5.2.5.5v.1c0 .2-.3.4-.5.4zM109.8 134.7H96.1c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h13.7c.3 0 .5.2.5.5v.1c0 .2-.3.5-.5.5zM104.5 137.8H95c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h9.5c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5z" />
		</g>
	</g>
</g>
</svg>

Code

This is how I'm currently doing it:

var byteArray = Encoding.ASCII.GetBytes(svgStoredAsString);
using (var inputStream = new MemoryStream(byteArray))
{
	var svg = new SkiaSharp.Extended.Svg.SKSvg();
	svg.Load(inputStream);
	using (var bitmap = new SKBitmap(100, 100))
	using (var canvas = new SKCanvas(bitmap))
	{
		canvas.Scale(100 / svg.CanvasSize.Width, 100 / svg.CanvasSize.Height);
		canvas.DrawPicture(svg.Picture);
		canvas.Flush();
		canvas.Save();

		using (var file = File.OpenWrite(path))
		using (var outputStream = new SKManagedWStream(file))
		{
			bitmap.Encode(outputStream, SKEncodedImageFormat.Png, 100);
		}
	}
}

((Image)image).Source = ImageSource.FromFile(path);

Expected Behavior

The svg shows just fine on the browser and even opens on Illustrator:

Actual Behavior

This is what I'm getting instead when rasterizing with my code:

Basic Information

Version with issue: 1.60.0
Last known good version: Haven't tried any other version yet.
IDE: Visual Studio for Mac
Platform Target Frameworks:
- Android: 8.1 (API level 27)
- iOS: 11.3
Target Devices:
- Android: Emulator Nexus 5X API 26
- iOS: Simulator 13.3

Copied from original issue: mono/SkiaSharp#557

Material Icons not working

I am trying to get material icons showing in SkiSharp using the DrawIconifiedText method, unfortunately nothing is showing for material icon but I'm just getting an exception that is below:

  at SkiaSharp.SKPaint.MeasureText (System.Byte[] text) [0x00035] in <7b3361fea08e47bfab3c9b5b39496736>:0 
  at SkiaSharp.Extended.Iconify.SKCanvasExtensions.DrawText (SkiaSharp.SKCanvas canvas, System.Collections.Generic.IEnumerable`1[T] runs, System.Single x, System.Single y, SkiaSharp.SKPaint paint) [0x00101] in <95817d3483074abe9d3f681eaac00888>:0 
  at SkiaSharp.Extended.Iconify.SKCanvasExtensions.DrawIconifiedText (SkiaSharp.SKCanvas canvas, System.String text, System.Single x, System.Single y, SkiaSharp.Extended.Iconify.SKTextRunLookup lookup, SkiaSharp.SKPaint paint) [0x00034] in 
<95817d3483074abe9d3f681eaac00888>:0 
  at SkiaSharp.Extended.Iconify.SKCanvasExtensions.DrawIconifiedText (SkiaSharp.SKCanvas canvas, System.String text, System.Single x, System.Single y,
 SkiaSharp.SKPaint paint) [0x00009] in <95817d3483074abe9d3f681eaac00888>:0 
  at MyApp.PageModels.DashboardPageModel.drawCheckInGauge (System.Int32 todaysExpectedCheckIn, System.Int32 actualCheckins, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs sKPaintSurfaceEventArgs) [0x0031e] in C:\Users\Admin\Xenia\Client\MyApp\MyApp\MyApp\PageModels\DashboardPageModel.cs:469 06-05 21:01:56.437 D/Mono    (29993): Searching for 'sk_paint_measure_text'.

My code is:

                using (SKPaint skPaint = new SKPaint())
                {
                    skPaint.IsAntialias = true;
                    skPaint.TextAlign = SKTextAlign.Center;
                    skPaint.TextSize = 33;

                    // Drawing image over Radial Gauge
                    canvas.DrawIconifiedText("{{arrow-collapse-right}}", Xc, Yc + _progressUtils.getFactoredHeight(lineHeight3), skPaint);
                }

I've also added in my App.css in the

           // Register the font
            SKTextRunLookup.Instance.AddMaterialIcons();
            SKTextRunLookup.Instance.AddMaterialDesignIcons();

Using XF: 4.0.0.482894
SkiaSharp.Extended.Iconify 1.60.0
SkiaSharp.Extended.Iconify.MaterialDesignIcons 2.0.0
SkiaSharp.Extended.Iconify.MaterialIcons 4.0.0
SkiaSharp.Views.Forms 1.68.0

Any help is appreciated as I have checked other sample that were using FontAwesome and it looks like I'm following the same approach.

Empty <tspan> causes NULL reference error

I have a SVG where I dynamically change the text before generating it as an image.
I get a null reference error if the content of the <tspan></tspan> is blank.

<text transform=""translate(400,400)"" text-anchor=""middle""><tspan style=""fill: #1A1A1A; font-family: 'Arial'; font-weight: bold; font-size: 20px;""></tspan></text>

The work around is to put in a space.

Also get the null reference error if <tspan></tspan> is on a separate line to <text></text>

<text transform=""translate(400,400)"" text-anchor=""middle"">
<tspan style=""fill: #1A1A1A; font-family: 'Arial'; font-weight: bold; font-size: 20px;"">Some Text</tspan>
</text>

Color in SVG polygon

Hello,

I use SKSvg extended. But for an object polygon the style="fill:lime.
But the lime color is not recognized and the polygon is black.
How to specify the fill color with a given value in hexa?
Thx
CJ

Add support for textarea

It would be very usefull to add parsing of textarea.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 220 320">

  <title>Basic textflow</title>

  <textArea font-size="25" font-family="Georgia" x="10" y="10" width="200" 
        height="300">Tomorrow, and tomorrow, and
        tomorrow; creeps in this petty pace from day to day, until the last syll&#xAD;able of recorded
        time. And all our yesterdays have lighted fools the way to dusty death.</textArea>
  <rect x="5" y="5" width="210" height="310" stroke-width="3" stroke="#777" fill="none"/>
</svg>

Unable to center icons within a view (possible error with measure/draw text?)

I'm trying to create a view which will allow me to put a single glyph, centered, on the screen. My goal then is to determine where I should tell SkiaSharp to begin drawing the glyph, which has consumed significantly more time than I had expected. It is entirely possible that I misunderstand how SkiaSharp is working, but I suspect that there is something wrong with the values being provided. Below is my OnPaintSurface, and the project itself is attached below.

The 2 phenomenon that make me believe it is a problem with SkiaSharp itself are:

inconsistent math: In the image below (the code is below) I draw a circle at the center of the view. I draw a box representing the width and height of the measured text, and then I draw the text. My math seems correct for making the box offsets, but the text doesn't even hit the box at all, seeming to be inconsistently attached to it. My understanding of the input parameters seems to suggest that at the very least the icon should begin drawing at the bottom-left corner of the rectangle, but I seem to drastically misunderstand something.
Failed lookups: On the right side there is a globe icon with no box, this is because {{fa-globe}} seems to have no bounding box (the SKTextRunLookup comes up with a 0 bounding box both for the pre-icon and the icon itself). It is worth noting that when I remove "TextEncoding = SKTextEncoding.GlyphId" the globe gets a bounding box, and all the bounding boxes change, but they are all still wrong.

I then have 2 questions:

is there something dumb that I am doing here?

is there a way that I can "drawtext" specifying the center instead of the start position?

public class SKIconLabel : SKCanvasView
{

 protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
 {
     base.OnPaintSurface(e);

     var w = e.Info.Width;
     var h = e.Info.Height;
     var midX = e.Info.Rect.MidX;
     var midY = e.Info.Rect.MidY;
     var canvas = e.Surface.Canvas;
     canvas.Clear();

     var ScaledTextSize = Math.Min(w, h) * (float).4;


     SKPaint outlinePaint = new SKPaint
     {
         IsStroke = true,
         Color = SKColors.Red
     };

     SKPaint iconPaint = new SKPaint
     {
         TextSize = ScaledTextSize,
         IsAntialias = true,
         TextEncoding = SKTextEncoding.GlyphId
     };

     float textWidth = 0;
     float textHeight = 0;
     var runs = SKTextRun.Create(Icon, SKTextRunLookup.Instance);

     var hasBounds = false;
     foreach (var rn in runs)
     {
         var bounds = new SKRect();
         var sz = iconPaint.MeasureText(rn.Text, ref bounds);

         textWidth += bounds.Width;
         textHeight += bounds.Height;

         if (bounds.Height > 0)
         {
             canvas.DrawRect(midX - textWidth/2, midY - textHeight/2, textWidth, textHeight, outlinePaint);
             hasBounds = true;
         }
     }
     if (!hasBounds)
     {
         Debug.WriteLine($"Failed to find bounds for {this.Icon}");
     }

     canvas.DrawIconifiedText(Icon, midX - textWidth/2, midY - textHeight/2, iconPaint);

     outlinePaint.IsStroke = false;
     canvas.DrawCircle(midX, midY, 5, outlinePaint);
 }

 public static BindableProperty IconProperty =
     BindableProperty.Create(nameof(Icon), typeof(string), typeof(SKIconLabel), "{{fa-plus color=000000}}",
         BindingMode.OneWay, null, (bindable, oldValue, newValue) =>
         {
             var ctrl = (SKIconLabel)bindable;
             ctrl.Icon = (string)newValue;
         });
 public string Icon
 {
     get { return (string)GetValue(IconProperty); }
     set
     {
         if (value == null) return;

         SetValue(IconProperty, value);
         InvalidateSurface();
     }
 }

}

Attached project, relevant sources are Controls/SKIconLabel and AboutPage.xaml
IconTest.zip

Symbol elements (referenced by Use elements) are not rendered

The following SVG is not rendered properly because even though the Symbol is referenced properly, the library is ignoring the Symbol element.

<?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" class="card" face="2D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in">
	<symbol id="SD2" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid">
		<path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="red"/>
	</symbol>
	<symbol id="VD2" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid">
		<path d="M-225 -225C-245 -265 -200 -460 0 -460C 200 -460 225 -325 225 -225C225 -25 -225 160 -225 460L225 460L225 300" stroke="red" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"/>
	</symbol>
	<rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="white" stroke="black"/>
	<use xlink:href="#VD2" height="32" x="-114.4" y="-156"/>
	<use xlink:href="#SD2" height="26.769" x="-111.784" y="-119"/>
	<use xlink:href="#SD2" height="70" x="-35" y="-135.501"/>
	<g transform="rotate(180)">
		<use xlink:href="#VD2" height="32" x="-114.4" y="-156"/>
		<use xlink:href="#SD2" height="26.769" x="-111.784" y="-119"/>
		<use xlink:href="#SD2" height="70" x="-35" y="-135.501"/>
	</g>
</svg>

The symbol itself shouldn't be rendered, but the content of the symbol should be.

More Complete SVG Features

Support for the full SVG is desired, but this is no small task. SVG has a HUGE scope and detailed specification: http://www.w3.org/TR/SVG2/

At this point, SkiaSharp is more of wrapper for skia, with some added features. We will probably only support SVG in the same way skia does, when they do. This is not to say that someone (anyone really) can create a SVG engine that makes use of SkiaSharp as the rendering engine. Essentially, SkiaSharp is a 2D raster graphics engine, thus SVG and any vector system will have to be created from scratch.

SVG is not a case of we don't want or we don't care, but simply a case of the SkiaSharp team is too small to get around to doing this. At this point, the community will have to jump in on this.

There have been several issues already, so I just want to link them here for reference:

mono/SkiaSharp#21
mono/SkiaSharp#45
mono/SkiaSharp#120
mono/SkiaSharp#258
mono/SkiaSharp#107 (more for creating SVG files)

Styling at svg level

I failed to render feather svg icons through SkiaSharp.Extented.

For example this code produces a black circle :

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-aperture">
  <circle cx="12" cy="12" r="10"></circle>
  <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
  <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
  <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
  <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
  <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
  <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
</svg>

After a quick look into parsing code, styling attributes (stroke, stroke-width, ...) seem ignored at the svg level.

Does it support Xamarin.Forms?

font-family support

Hey,

We use a SVG to create a badge and It seems the css style fonts do not work. The font family does not seem to be applied correct

Font urls are changed for security

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" class="" height="313" version="1.1" viewBox="0 0 500 313" width="500">
  <style class="styles-injector ng-isolate-scope ng-scope" type="text/css">@font-face {font-family:'Karla-Regular';src: url('../fonts/badge/Karla-Regular.ttf');} @font-face {font-family:'Aldrich';src: url('../fonts/badge/Aldrich.ttf');} @font-face {font-family:'Arial';src: url('../fonts/badge/Arial.ttf');} @font-face {font-family:'Bitter-Regular';src: url('../fonts/badge/Bitter-Regular.ttf');} @font-face {font-family:'FiraSans-Regular';src: url('../fonts/badge/FiraSans-Regular.ttf');} @font-face {font-family:'Lato-Regular';src: url('../fonts/badge/Lato-Regular.ttf');} @font-face {font-family:'TimesNewRoman';src: url('../fonts/badge/TimesNewRoman.ttf');} @font-face {font-family:'Roboto-Regular';src: url('../fonts/badge/Roboto-Regular.ttf');} </style>
  <filter class="ng-scope" id="desaturate">
    <feColorMatrix type="saturate"></feColorMatrix>
  </filter>
  <g align="start" class="badge-editor-resizable-text-shape ng-scope ng-isolate-scope badge-editor-base-shape" color="#333333" font-family="Arial" font-size="18" font-style="normal" height="18" new="0" preview="vm.preview" rules="[]" text="Michael" text-transform="normal" variable="Visitor_FirstName" width="170" x="30" y="20">
    <g transform="translate(30, 38)">
      <text class="ng-binding" fill="#333333" font-family="Arial" font-size="18" font-weight="normal" rules="[]" style="text-transform: normal" text-anchor="start" text-transform="normal" variable="Visitor_FirstName" width="170" x="0" y="0">Test</text>
    </g>
    <!-- ngIf: vm.isSelected -->
  </g>
  <g align="start" class="badge-editor-resizable-text-shape ng-scope ng-isolate-scope badge-editor-base-shape" color="#333333" font-family="Bitter-Regular" font-size="18" font-style="normal" height="18" new="0" preview="vm.preview" rules="[]" text="Michael" text-transform="normal" variable="Visitor_FirstName" width="170" x="30" y="50">
    <g transform="translate(30, 68)">
      <text class="ng-binding" fill="#333333" font-family="Bitter-Regular" font-size="18" font-weight="normal" rules="[]" style="text-transform: normal" text-anchor="start" text-transform="normal" variable="Visitor_FirstName" width="170" x="0" y="0">Test</text>
    </g>
    <!-- ngIf: vm.isSelected -->
  </g>
  <g align="start" class="badge-editor-resizable-text-shape ng-scope ng-isolate-scope badge-editor-base-shape" color="#333333" font-family="FiraSans-Regular" font-size="18" font-style="normal" height="18" new="0" preview="vm.preview" rules="[]" text="Michael" text-transform="normal" variable="Visitor_FirstName" width="170" x="30" y="80">
    <g transform="translate(30, 98)">
      <text class="ng-binding" fill="#333333" font-family="FiraSans-Regular" font-size="18" font-weight="normal" rules="[]" style="text-transform: normal" text-anchor="start" text-transform="normal" variable="Visitor_FirstName" width="170" x="0" y="0">Test</text>
    </g>
    <!-- ngIf: vm.isSelected -->
  </g>
  <g align="start" class="badge-editor-resizable-text-shape ng-scope ng-isolate-scope badge-editor-base-shape" color="#333333" font-family="Lato-Regular" font-size="18" font-style="normal" height="18" new="0" preview="vm.preview" rules="[]" text="Michael" text-transform="normal" variable="Visitor_FirstName" width="170" x="30" y="110">
    <g transform="translate(30, 128)">
      <text class="ng-binding" fill="#333333" font-family="Lato-Regular" font-size="18" font-weight="normal" rules="[]" style="text-transform: normal" text-anchor="start" text-transform="normal" variable="Visitor_FirstName" width="170" x="0" y="0">Test</text>
    </g>
    <!-- ngIf: vm.isSelected -->
  </g>
  <g align="start" class="badge-editor-resizable-text-shape ng-scope ng-isolate-scope badge-editor-base-shape" color="#333333" font-family="TimesNewRoman" font-size="18" font-style="normal" height="18" new="0" preview="vm.preview" rules="[]" text="Michael" text-transform="normal" variable="Visitor_FirstName" width="170" x="30" y="140">
    <g transform="translate(30, 158)">
      <text class="ng-binding" fill="#333333" font-family="TimesNewRoman" font-size="18" font-weight="normal" rules="[]" style="text-transform: normal" text-anchor="start" text-transform="normal" variable="Visitor_FirstName" width="170" x="0" y="0">Test</text>
    </g>
    <!-- ngIf: vm.isSelected -->
  </g>
  <g align="start" class="badge-editor-resizable-text-shape ng-scope ng-isolate-scope badge-editor-base-shape" color="#333333" font-family="Roboto-Regular" font-size="18" font-style="normal" height="18" new="0" preview="vm.preview" rules="[]" text="Michael" text-transform="normal" variable="Visitor_FirstName" width="170" x="30" y="170">
    <g transform="translate(30, 188)">
      <text class="ng-binding" fill="#333333" font-family="Roboto-Regular" font-size="18" font-weight="normal" rules="[]" style="text-transform: normal" text-anchor="start" text-transform="normal" variable="Visitor_FirstName" width="170" x="0" y="0">Test</text>
    </g>
    <!-- ngIf: vm.isSelected -->
  </g>
</svg>

Viewbox not implemented

Hello,
It seems that the viewbox svg instruction is not implemented.
Thank you,
cjacquel

SVG not rendered

This SVG renders fine in Chrome but it doesn't render using FFImageLoading that uses SkiaSharp.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
<defs>
<clipPath id="clip1">
  <path d="M 6 1 L 23 1 L 23 24 L 6 24 Z M 6 1 "/>
</clipPath>
<clipPath id="clip2">
  <path d="M 22.335938 5.523438 L 18.398438 1.664063 C 18.292969 1.558594 18.148438 1.5 18 1.5 L 6.558594 1.5 C 6.414063 1.5 6.269531 1.558594 6.164063 1.664063 C 6.058594 1.769531 6 1.914063 6 2.058594 L 6 7.5 L 7.5 7.5 L 7.5 2.917969 L 18 2.917969 L 18 5.917969 L 21 5.917969 L 21 18 L 15.75 18 L 13.5 20.398438 L 13.5 18 L 7.5 18 L 7.5 15 L 6 15 L 6 18.9375 C 6 19.085938 6.058594 19.230469 6.164063 19.335938 C 6.269531 19.441406 6.414063 19.5 6.558594 19.5 L 12 19.5 L 12 24 L 16.5 19.5 L 21.941406 19.5 C 22.085938 19.5 22.230469 19.441406 22.335938 19.335938 C 22.441406 19.230469 22.5 19.085938 22.5 18.9375 L 22.5 5.917969 C 22.5 5.769531 22.441406 5.628906 22.335938 5.523438 "/>
</clipPath>
<clipPath id="clip3">
  <path d="M 1 7 L 15 7 L 15 15 L 1 15 Z M 1 7 "/>
</clipPath>
<clipPath id="clip4">
  <path d="M 10.222656 8.601563 L 12.128906 10.503906 L 1.5 10.503906 L 1.5 12.003906 L 12.128906 12.003906 L 10.222656 13.914063 L 11.265625 14.988281 L 15 11.257813 L 11.253906 7.511719 Z M 10.222656 8.601563 "/>
</clipPath>
</defs>
<g id="surface1">
<g clip-path="url(#clip1)" clip-rule="nonzero">
<g clip-path="url(#clip2)" clip-rule="evenodd">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 1 -3.5 L 27.5 -3.5 L 27.5 29 L 1 29 Z M 1 -3.5 "/>
</g>
</g>
<g clip-path="url(#clip3)" clip-rule="nonzero">
<g clip-path="url(#clip4)" clip-rule="evenodd">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M -3.5 2.511719 L 20 2.511719 L 20 19.988281 L -3.5 19.988281 Z M -3.5 2.511719 "/>
</g>
</g>
</g>
</svg>

Porting SkTextBox to support draw text in wrap

From @tangkhaiphuong on June 9, 2017 7:48

Skia native version have SkTextBox support draw text in wrap, please implement to support this feature.

https://github.com/google/skia/blob/fcee51038aeaf3596a4ffcdba0bf18e3155e09b9/include/utils/SkTextBox.h

Copied from original issue: mono/SkiaSharp#313

SVG colors confused in SkiaSharp.Svg 1.60.0

SkiaSharp.Svg 1.60.0 gets colors confused, with text color sometimes taken from the colors of other elements. 1.59.1 is OK.

SVGColors.zip

Should look like:

But looks like this in 1.60.0, as some text color is taken from other white text:

Tested using SkiaSharp / SkiaSharp.Views.Forms 1.60.0 and 1.60.1

Rendering of <tspan> element not working...

Hi,
I just tested a SVG produced by SVGMaker from a Microstation file. The file has produced the piece of following SVG...

Repère
...

The element is conform to SVG spécification, but the format of x coordinate is not taken into account in SkiaSharp SVG and is set to 0 (normal as far I saw in the source code). So all the texts defined are put at the left side of the SVG drawing....

I have a temporary solution as I can force SVGMaker to draw text whether to use text, but I think it would be good to add implementation of the specification for text/tspan in the library.

Regards.

Eric.

SKSvg.LoadContent(string svg)

e.g.

var svg = new SkiaSharp.Extended.SKSvg();
svg.LoadContent(@"<svg height=""100"" width=""100"">
  <circle cx=""50"" cy=""50"" r=""40"" stroke=""black"" stroke-width=""3"" fill=""red"" />
</svg> ");

Merge pull requests

There are 5 open currently. All are useful.

SVG: pattern support

Add a support for pattern: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

<svg viewBox="0 0 2560 1600" xmlns="http://www.w3.org/2000/svg">
    <pattern id="a" width="70" height="121.2" overflow="visible" patternUnits="userSpaceOnUse" viewBox="71 -162.34 70 121.2">
        <g fill="none">
            <path d="M71-162.34h70v121.2H71z" />
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M176-61.49l-35 20.2-35-20.2 35-20.2zM176-61.49v40.42L141-.87v-40.41z" />
                <path d="M141-41.28V-.87l-35-20.2V-61.5z" />
            </g>
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M106-61.49l-35 20.2-35-20.2 35-20.2zM106-61.49v40.42L71-.87v-40.41z" />
                <path d="M71-41.28V-.87l-35-20.2V-61.5z" />
            </g>
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M211-122.09l-35 20.21-35-20.21 35-20.21z" />
                <path d="M176-101.88v40.41l-35-20.2v-40.42z" />
            </g>
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M141-122.09l-35 20.21-35-20.21 35-20.21z" />
                <path d="M141-122.09v40.42l-35 20.2v-40.41zM106-101.88v40.41l-35-20.2v-40.42z" />
            </g>
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M71-122.09l-35 20.21-35-20.21 35-20.21z" />
                <path d="M71-122.09v40.42l-35 20.2v-40.41z" />
            </g>
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M176-182.69l-35 20.21-35-20.21 35-20.21zM176-182.69v40.42l-35 20.2v-40.41z" />
                <path d="M141-162.48v40.41l-35-20.2v-40.42z" />
            </g>
            <g stroke="#000" stroke-miterlimit="10">
                <path d="M106-182.69l-35 20.21-35-20.21 35-20.21zM106-182.69v40.42l-35 20.2v-40.41z" />
                <path d="M71-162.48v40.41l-35-20.2v-40.42z" />
            </g>
        </g>
    </pattern>
    <path fill="url(#a)" d="M.09-.38h2560v1600H.09z" />
</svg>

Add support for clipping

I discovered there is currently no support for clipping (i.e clip-path attribute and clipPath element). I already have a working version that parses the clipPath elements from defs - section and applies the clipping to the SKCanvas. By now it is limited to rect elements within clipPath element, but I should be able to add most of the other primitives pretty fast.
I would have already sent a PR, but I have some strange issues with the tests. All tests that compare pixels of the resulting bitmap (using SKBitmap.GetPixel method) fail, because GetPixel seems to return random numbers instead of actual color of the pixel. If you want I can send the PR without all tests passing, maybe it's just an issue on my machine (vmware). Please advice how to proceed.

Xamarin.iOS. Not correct showing svg image

Description

Hello guys. I try to use skiasharp for showing svg on iPad or iPadSimulator. There are example of svg images Archive.zip. Archive has two svg images. 1.svg is image was drawn in Adobe Illustrator. 2.svg is image was drawn in Adobe Illustrator and was optimised on service of optimising svg.
In the browser those images shows correctly, but on the iPad Air 2 and iPadAir2Simulator this image shows not correctly. On the iPadSimulator the same.

Code

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            // adding svg image without optimize
            var path = NSBundle.MainBundle.PathForResource("Assets/1", "svg");
            var rect = new CGRect(0, 100, 200, 200);
            AddSvgImage(path, rect);

            // adding svg optimized image
            path = NSBundle.MainBundle.PathForResource("Assets/2", "svg");
            rect = new CGRect(0, 300, 200, 200);
            AddSvgImage(path, rect);
        }

        private void AddSvgImage(string path, CGRect rect)
        {
            var imageBuffer = File.ReadAllBytes(path);
            var svg = new SkiaSharp.Extended.Svg.SKSvg();
            using (var stream = new MemoryStream(imageBuffer))
            {
                svg.Load(stream);
            }

            var canvasView = new SKCanvasView
            {
                Frame = rect,
                BackgroundColor = UIColor.Clear
            };

            canvasView.PaintSurface += (sender, e) =>
            {
                var canvas = e.Surface.Canvas;
                using (SKPaint paint = new SKPaint())
                {
                    canvas.Clear(SKColors.Transparent);


                    var width = e.Info.Width;
                    var height = e.Info.Height;
                    float canvasMin = Math.Min(width, height);
                    float svgMax = Math.Max(svg.Picture.CullRect.Width, svg.Picture.CullRect.Height);
                    float scale = canvasMin / svgMax;
                    var matrix = SKMatrix.MakeScale(scale, scale);

                    canvas.DrawPicture(svg.Picture, ref matrix);
                }
            };

            View.Add(canvasView);
        }

Basic Information

Version with issue: 1.60.0
IDE: Visual Studio for Mac 7.5.3.7
iOS: Version: 11.12.0.4 (Visual Studio Community)
macOS: 10.13.5
Target Devices:
- iPadAir2Simulator
- iPad Air 2

Screenshots

Excepted Behavior

Actual Behavior

Reproduction Link

https://github.com/MazZilaaaa/XamarinSvg

SVG: stroke-linecap support

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <line stroke-linecap="butt"
          x1="30" y1="30" x2="30" y2="90"
          stroke="black" stroke-width="20"/>

    <line stroke-linecap="round"
          x1="60" y1="30" x2="60" y2="90"
          stroke="black" stroke-width="20"/>

    <line stroke-linecap="square"
          x1="90" y1="30" x2="90" y2="90"
          stroke="black" stroke-width="20"/>

    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
          stroke="white" />
</svg>

SKCanvasView Touch Location from SKTouchEventArgs is not found inside SKPath(created using CreatePiePath())

I am using the SKCanvasView in view.
using SkiaSharp.Extended the pie paths are created.
Enable Touch on SKCanvasView but on inside touch event arg the location is not found inside the path?

Honor gradientTransform Attribute

I discovered that gradientTransforms are not applied in SkiSharp.Extended

Current Implementation:

Improved Implementation:

mono / skiasharp.extended Goto Github PK

skiasharp.extended's Introduction

SkiaSharp.Extended

Using

Building

License

skiasharp.extended's People

Contributors

Stargazers

Watchers

Forkers

skiasharp.extended's Issues

Description

Description

Code

Expected Behavior

Actual Behavior

Basic Information

Description

Code

Basic Information

Screenshots

Reproduction Link

Recommend Projects

Recommend Topics

Recommend Org