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
Related
I have this inline SVG element. Some of its sub elements use image patterns. (In the attached photo, the SVG object is on the left and the image with correct color is on the right). A very strange greenish hue is affecting all image patterns and images in the SVG which have patches of white in the original images used. What could be the reason? I've already checked this both in Firefox and Chrome. Same problem shows in both browsers. I used SVG transforms (rotate, scale, translate) to manipulate the images but never a command to change the colors..
EDIT 2017-09-24 (screenshot in Safari) - Safari displays the correct color
We need large screenshot of html which contains svg text with some effects. So we are zooming html in chrome and taking screenshots.
But svg filter effects get changed on html zooming. We need svg effects same in all scale.
Please refer attached screen shots.
Image with scale:
Image without scale:
feSpecularLighting is resolution dependent, you'd have to manipulate the kernelUnitLength property on each zoom step to cancel out the resolution dependency.
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 had long standing issues with images being different shades on different browsers - for example on OSX I can make a purple or green box and it will look different on chrome than safari. I have tried exporting as png8, png32, gif, jpg, on and on and nothing changes. I'd love to find some real color safe chart or hex generator or some info as to how I can get around this issue. I've tried using web safe color palettes with same issue. It's really frustrating having a logo look great on one browser and off on another. Also matching CSS to an img will work on one but not the other.
More tests:
The answer about color management led me to a lot to read but doesn't seem to be the issue - both safari 6 and current chrome have color management yet they render images different hues. I made a test of about 10 images exports (gif exact, jpeg, png24, png8, gif adaptive, etc) and did the same in both fireworks and photoshop cs6. The result - both app export different colors (something I suspected as PS exports in sRGB I think and I am not sure about FW as it has no settings) - however most images, regardless of app export. render differently in the browsers. What is of concern is that while chrome's images pretty much matched the css color, none of safari's images (21 of them total!) came even close to the css hex that I used in both a web css test and to define the color in the apps.
I have uploaded the screenshot - the top is safari and bottom chrome - the top left corner is the css only and all the rest are the various exports from both photoshop and fireworks using most export options.
http://www.pictureshoster.com/files/6wp6irm154cre3faop2.png
Maybe this has to do with color management. Some browsers like Firefox or Safari support color management.
You could try to temporarily disable color management in Firefox by going to about:config and setting gfx.color_management.mode to 0.
You can find more information about firefox color management here:
http://www.metalvortex.com/blog/2012/03/16/831.html
Ok so I have been working with a designer who made the mockup of app in Photoshop. I am not using iPhone statusbar and using custom navigation bar which the designer made of 100px. In that navigation he put an icon of 48 pixels.
Now I have to transform into code and I am using UIWebView for the purpose. The layout he designed, I am going to make it in HTML/CSS that will be loaded in UIWebView.
Now the issue is, the PSD he made for the screen has SIZE of 640 x 960. In Iphone4 it's resolution rather than Physical Size. Base on setting of 640 x 960 pixel Image/PSD, he made the top bar of 100pixels. Now If I follow him that things getting messed up.
What I did that I just made everything half of size to accomodate 320 x 480 sceen size in CSS. I set Navigation Bar to 50px(for 320 x 480) and I put #2x.png image (48 x 48) in it.
Now when I load app in my mobile it appears big as it should which gives me impression that 48 pixels did not appear as 24px Image with High Density.
I am quite confused, If I make 100px navigation bar then everything looks big as I am targetting big size while I have to target high resolution. How do I adjust elements(DIV) and Images in my scenario?
Take a look at these articles on using CSS3 media queries and the viewport tag in order to help manage styles between normal and high definition displays:
Targeting the iPhone 4 Retina Display with CSS3 media queries
iPhone 4 and iOS 4 Safari Detection and Behavior