We are seeing a weird issue in rendering an SVG image in Chrome in Acer machine with AMD processor. We have an SVG image and it shows up properly in most of the laptop screens.
In Acer (with AMD processor), the SVG file is rendered with green patches on top of the image as attached.
Has anyone faced this kind of issue? Any pointers or solutions are highly appreciated.
Related
When I am adding SVG Graphics node in the Flow, its properties are not showing as intended. Not able to change the URL for the SVG editor as well. Please advise.
I have an animated SVG that I'm using as a background on a website. It work fine on screen with at least QHD resolution, however on anything with 1080p or lower, the SVG doesn't show at all.
https://entofm.co.uk/beta
There are some very strange distortion in the images that are rendered via Apache Batik.This issue is not temporary as the distortion is happening every time the call is made, at the very same co-ordinates for the same svg. This happens in Linux environments and I am not able to reproduce this issue in mac OS environments.I am using Oswald custom font (from google fonts) and there is usage of transformation attributes like letter-spacing, rotate functionality.
Tried many of the suggestions like:
1) Verified if the Oswald font is registered to the Graphics environment.
2) Removed text transformation attributes like letter-spacing,rotate, but still the distortion is occuring. We have also replaced letter-spacing attributes with kerning.Tried with shape-rendering="geometricPrecision" also to no success.
3) Tried with other fonts and din't face the distortion with Arial custom font, but with Oswald, Roboto the distortion still exists.Our usecase needs Oswald Font, hence we cannot use Arial font.
4) Tried SVG fonts by embedding the svg fonts in the svg file - No success.
5) Tried trim functionality but no success.
6) Replaced the characters where the distortion is happening and the issue is solved, but I am not able to deduce anything from this.
7) Increased And decreased the font size by 1px where the distortion is happening and the issue is solved, but I am not able to deduce anything from this.
I found few threads where the reason was mentioned that Batik rendering varies per OS environment but was not able to find any solution. Was anyone able to solve this?
Upgrading JDK from 8 to 11 has solved the problem.
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
Does anyone know a working PNG transparency fix for IE6 that also works on background images (of divs)? All that I tried (over 5) do not fix background images consistently. Adobe Browser Lab shows it's fixed but the target browsers still get that bluish transparency.
Thank you.
Have you tried this one?
http://www.twinhelix.com/css/iepngfix/