CODEWITHSUNDEEP
androidsvgxamarinxamarin.androidngraphics
Duncan Watts
Duncan Watts

Reputation: 1331

NGraphics rendering SVG Path on Xamarin Droid gives poor results

<svg width="96" height="96" viewBox="0 0 32 32">
  <path d="M17.137989,13.569001L17.161989,13.748992 17.161989,14.740941C17.161989,15.281914 17.15399,15.787888 17.137989,16.258863 17.123989,16.72884 17.10799,17.184816 17.09099,17.625793L17.09099,20.331654C17.09099,20.792629 17.11599,21.218609 17.161989,21.608587 17.20899,21.998568 17.283989,22.229555 17.386988,22.300552 17.487988,22.370548 17.643988,22.405546 17.855988,22.405546L18.219986,22.405546 18.336985,22.765528C18.290985,22.846523 18.197985,22.916521 18.055986,22.975517 17.914986,23.036514 17.804987,23.045513 17.726988,23.006516L14.270002,23.006516 13.918003,23.006516C13.776004,23.006516,13.651005,22.966518,13.541005,22.885523L13.541005,22.585537C13.635005,22.465544,13.784004,22.405546,13.988003,22.405546L14.411001,22.405546C14.616,22.284554 14.737,22.16256 14.775,22.041565 14.813999,21.920572 14.834,21.707582 14.834,21.404598 14.865999,21.121613 14.881,20.817629 14.881,20.494646 14.881,20.171661 14.888999,19.908676 14.904999,19.706686L14.904999,18.947725 14.904999,17.370806C14.904999,16.662842 14.884999,16.212866 14.846,16.021875 14.808,15.829885 14.755,15.592897 14.692,15.310912 14.553,15.371909 14.383001,15.441905 14.187002,15.521901 13.991003,15.601897 13.863004,15.641895 13.800004,15.641895L13.683004,15.461905C13.683004,15.281914,13.784004,15.120922,13.988003,14.979929L14.411001,14.679944C14.553,14.599949 14.692,14.524953 14.834,14.454956 14.975999,14.384959 15.147998,14.309963 15.351997,14.228968 15.602996,14.068975 15.871995,13.933983 16.162994,13.822989 16.451992,13.712995 16.77799,13.627998 17.137989,13.569001z M16.080093,7.1960044C16.331078,7.1960044 16.559063,7.2860045 16.761049,7.4660044 16.966036,7.6460047 17.142023,7.8670049 17.291014,8.1270046 17.441004,8.3880053 17.514,8.628005 17.514,8.8480053 17.514,9.3500061 17.370008,9.7400064 17.079027,10.020006 16.790047,10.302007 16.577061,10.461007 16.444071,10.502007 16.312078,10.542007 16.159088,10.562007 15.9871,10.562007 15.813111,10.562007 15.645123,10.517007 15.481133,10.427007 15.315145,10.336007 15.155154,10.171007 15.000165,9.930007 14.842175,9.6900063 14.741182,9.4400063 14.692185,9.1790056 14.662188,8.838006 14.741182,8.4780054 14.92917,8.0970049 15.117157,7.7170048 15.343143,7.4560046 15.610125,7.3150043 15.799112,7.2360044 15.954103,7.1960044 16.080093,7.1960044z M16,2.071991C8.3200073,2.071991 2.0710449,8.3200073 2.0710449,16 2.0710449,23.681 8.3200073,29.928986 16,29.928986 23.680054,29.928986 29.929016,23.681 29.929016,16 29.929016,8.3200073 23.680054,2.071991 16,2.071991z M16,0C24.822998,0 32,7.178009 32,16 32,24.822998 24.822998,32 16,32 7.177002,32 0,24.822998 0,16 0,7.178009 7.177002,0 16,0z" fill="#000000" />
</svg>

I'm using NGraphics in a Xamarin Droid application however the rendered image looks very low resolution, how do I improve this?

I'm using an SvgReader to create a Graphic object, which I'm then using to draw onto a CanvasCanvas in the controls Draw method. I've tried playing round with the dpi option when creating the SvgReader but to no avail.

using (StringReader stringReader = new StringReader(svgDefinition))
{
    SvgReader svgReader = new SvgReader(stringReader);
    Graphic = svgReader.Graphic;
}

public override void Draw(Canvas canvas)
{   
    var canvasCanvas = new CanvasCanvas(canvas);
    Graphic?.Draw(canvasCanvas);
}

With the example SVG, you can click and see the quality I'm after for the 96x96 image which I've included on the left, on the right you can see what's being generated, taken from a screenshot on a Samsung Galaxy A5:

enter image description here

Upvotes: 2

Views: 407

Answers (1)

Chris Miller
Chris Miller

Reputation: 4899

Changing the DPI value would not fix the problem that you are seeing. The PixelsPerInch property is used to when the drawing commands use actual units (like cm, mm, pt, pc).

With the current version NGraphics SvgReader class, it looks like it's rendering the SVG at the dimensions specified by the width and height attributes and optionally constrained to viewBox or viewPort attributes in the SVG file. Once the SVG data has been rendered it's scaled to the image view. To get a sharp image, you will need to have the width and height of the SVG to be as large or larger than the expected canvas of the target.

I took a SVG from the Noun Project that was drawing in a 100x125 box. I loaded the SVG into Adobe Illustrator and resized it to 600x800 and saved it to .ai. I then loaded the .ai file into PaintCode and copy the web svg that it generated. That SVG rendered sharp in the test app that I used on Android.

I hope there is an easier way to do this, but that worked to validate a work around for the problem.

Upvotes: 2

Related Questions