question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sharpness of SVG render fluctuates with size of View

See original GitHub issue

The sharpness of SVG rendering depends on the size of the CachedImage.

Otherwise SVG rendering is working well in my initial tests.

Steps to Reproduce

Take an svg with some detail that will show sharpness (e.g. text). Create a CachedImage. Vary the size of the CachedImage (width and height). Each time, load the svg.

Expected Behavior

Sharp at all resolutions, always rendering at the actual resolution.

Actual Behavior

For some sizes the render is sharp, and for others it is blurred. Changing the View size by a single pixel can have a large effect on sharpness. The blur is what you would expect from an image rendered at a close but different resolution and then resized, about a 0.5 pixel blur effect.

The sharpness or blur is always constant throughout each render, only varying with the size of the View.

Basic Information

  • Version with issue: 2.3.4
  • Platform: UWP

Reproduction Link / Code

let svgV = FFImageLoading.Forms.CachedImage(FadeAnimationEnabled = Nullable<bool>(false))
do  svgV.SizeChanged.Add(fun _ ->
    svgV.Source <- FFImageLoading.Svg.Forms.SvgImageSource.FromSvgString(svgString))

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
daniel-luberdacommented, Mar 1, 2018

I made some changes, please let me know if it solved in upcoming release.

0reactions
matibakcommented, Jan 23, 2020

Thanks for the quick reply. I set:

WidthRequest="20.45" 
HeightRequest="20" 

Is this what you mean by fixed size?

I made it by using Margin instead of WidthRequest, and HeightRequest

Read more comments on GitHub >

github_iconTop Results From Across the Web

Small unscaled SVG rendering blurry and wrong in all ...
First upload the SVG; it will redraw at each size - notice how below 32px it starts getting a bit blurry. Then, grab...
Read more >
6 Common SVG Fails (and How to Fix Them)
The larger the values, the more SVG units are added to fit in the viewport, resulting in a smaller image. If we want...
Read more >
Sharpness of SVG render fluctuates with size of View
The sharpness of SVG rendering depends on the size of the CachedImage. Otherwise SVG rendering is working well in my initial tests.
Read more >
A Guide to Getting Sharp and Crisp SVG Images on Screen
In this post, we will explore why SVG images gets blurry and what you can do to get a sharp image every time....
Read more >
Coordinate Systems, Transformations and Units — SVG 2
All SVG content is drawn inside SVG viewports . Every SVG viewport defines a drawing region characterized by a size (width, height), and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found