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.
Related
I was trying to use a coloured texture (PNG 24/RGB) for a POI (bicycle_parking) and it was not being rendered. It was added properly as a texture, it just won't be rendered on the POI.
After some testing I came to believe that POIs only accept grayscale textures that can later be filled up with a color. Is this right?
I also found out that the icon needs to be of a specific size (I got it working only at 32x32 pixels and 512x512, but the scaling did not make it look good). Is there any information regarding this?
Now I have a grayscale icon (mostly white) but the fill color does not change the white as expected. This is as far as I got..
Here's a set of icons similar to the ones I need to render into POIs
How could I achieve adding this type of icons as the texture of a POI? Workarounds/hacks are welcome as well :)
Thanks!
The texture of the Poi must have a size that is a power of 2 and goes from 32x32 up until 512x512. Also make sure that the colour code of that image is RGB anything else wont work. For the best visual result you have to create 3 sets of pngs for different screen densities, for example see heatmap_legend.png then look at heatmap_legend#2x.png and heatmap_legend#3x.png, you can find them in the "common" folder.
So turns out that the color wasn't a problem after all. It was quite tricky to get one image working, but once I had the image working, adding color to it and saving the PNG worked just fine.
The problem with the image size I experienced is still happening. You need to export it in 32x32, 64x64 or 96x96 in order to StyleEditor not to crash when opening the file.
I am currently working in XNA 4.0 trying to render a font that I got. The font is rendered with this:
spriteBatch.DrawString(this.font, this.text, new Vector2(10, 10), this.color);
But some of my letters gets blurry and low quality (See image)
I have tried to change the SamplerState of the GraphicDevice but that does not seem to improve anything.
-Update-
After testing one of the ideas were XNA would compress the text and in that case loosing quality i tried out to create my own font texture instead of generating one using a .spritefont. And then sending that into the contentloader, the results I managed to get was just slightly larger text but with the same artifacts.
See Image
And I was now wondering if the problem still can have to do with compressing problems or if there could be another issue making the font get a lower quality in the program compared to using it ouside the program.
The way I am currently loading my font is using
font= ContentManager.Load<SpriteFont>(FontPath);
It's because XNA uses compression for spritefonts. The possible workarounds are:
Use Nuclex framework, which includes an alternative font importer;
Make your own font texture, following the instructions from Shawn Hargreaves's blog;
In your SpriteFont definition, double the size of generated font, then draw it at half its size.
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/
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
background image of type PNG is not transparent in ie6
See these posts
IE6 PNG transparency
How to use semi-transparent png images in IE6
This is a known issue in IE6: Transparent PNGs are only supported with some hacks.
This is a well-know bug. There are several workarounds, e.g. you can try using Google's ie7-js library.
I think you should definitely check the JQuery plugin called Supersleight, created by the guys on All In The Head & 24 Ways. They fixed some problems that comes with using AlphaImageLoader on IE6. From the 24 Ways page:
Works with both inline and background images, replacing the need for both sleight and bgsleight
Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
The last one is the most important! Here are the links:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
http://24ways.org/2007/supersleight-transparent-png-in-ie6
I had an issue once about png transparency in ie6 and what saved me was this:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
hope it help.