This is only happening in Internet explorer. I am looking for a solution. I read that ie rasterizes background images or something just like older firefox versions but what are the solutions? Im so desperate. I dont want to serve an inline img image only because of IE.
This is seriously limiting. All other browsers render the SVG 99% the same and accurately.
Use inline image SVGs. If you are concerned that the resource is download by browsers other than IE then use javascript media queries
I've found that deleting the width and height attributes of the svg root (in the svg file itself) helps a little, but not always. You will want to make sure viewBox is defined to retain the aspect ratio.
Related
I encountered a weird Firefox's behaviour. It renders SVG images cutting parts of them or not displaying them at all, but only certain of images, not all of them. Chrome and IE are displaying them properly. Here is a link to the website I put said images on:
funjo.pl
Images which are not being displayed properly are logo in top menu bar and big blue logo with transparency on the big very top banner. The funny thing is that two icons a bit down on the same page (three rolls and woman's legs), which are also SVGs are being displayed properly. Could someone please tell me what's going on? I suppose there is something wrong with SVG image code itself but I can't detect what exactly.
I'm not pasting whole images' code beacuse it's too much of it. You can download these images from http://funjo.pl/media/2016/06/logo.svg and http://funjo.pl/media/2016/06/logo2.svg.
PS: If you really want me very badly to paste the whole code let me know.
PS2: I created all of SVGs on the website using Corel X7, if this information helps in anything.
PS3: I'm using the newest FF v 46.0.1.
Actually I've found a solution myself, it helped perfectly but required few more steps after exporting SVG in Corel X7 (as I mentioned in my post above there were two images, one of them with transparency). So here are the steps I made to make it being displayed properly in FF (a bit trial and error procedure but works):
I exported both SVGs again removing transparency from the one which was originally transparent, so no transparency at all in both SVG images. The one used as logo in menu bar contained all the elements grouped (logo and text were both separate but grouped), I ungrouped those elements and made them as one.
I removed height and width attributes from both SVGs.
I added preserveAspectRatio="none" attribute so I could manage width and height of the image separately, just like raster images (this CSS Tricks article helps a lot with understanting the whole resizing process).
I used SVG Optimiser tool to remove all the unnecessary bits from my images and to slim them down a little.
I downloaded optimised SVGs from above mentioned tool's website, uploaded them to my website's FTP.
I added height:(some)px and width:auto attributes in CSS
I added transparency for the one which was supposed to be transparent via CSS - opacity:0.7 in this case.
Refreshed the website and voilà, it works like a charm. Hope it will help someone with the similar problem as mine.
EDIT
Here are images to compare, working one and not working one.
PS: After some more trials and errors I found out that changing standard text to curves in Corel X7 makes FF render the SVG image properly without above steps, but it doesn't change the fact that it worked properly in Chrome and IE anyway even if the text wasn't changed to curves before export. Plus FF didn't display SVG exported with transparency at all and Chrome and IE did.
You could open a working and failing SVG file into your text editor and find differences in the generated HTML.
I guess there is a difference the way you save it or how the vectors and layers are put. Maybe some transparent layer on top off the image renders strange?
Applying a width of 300px or above gave me the correct results as in chrome and IE.
So just give a width as below and probably you can adjust the width as per your requirement.
Hope it helps.
<img style="width: 300px;" src="http://funjo.pl/media/2016/06/logo.svg" alt="Funjo">
I solved it by removing commas , by spaces
A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.
Here's a demonstration of the difference: https://jsfiddle.net/NathanFriend/42knwc1s/
Why is the SVG scrolling performance so much worse than the PNG scrolling performance? After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing). Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?
`
I think this is just some kind of a Chromium bug, I've found this issue on SO, because I started experiencing it as well on Mac. It works OK on Opera for instance.
I don't think anyone here will be able to explain why it's slow if it really is a bug. I've created a Chromium bug, please star it if you want the issue to be fixed soon or learn more https://bugs.chromium.org/p/chromium/issues/detail?id=681611
We have a sprite of many icons which is 10564px x 80px. The icons are arranged horizontally.
In every other browser except IE10 the icons/images show up when being used as background images for tags with specific CSS to apply the relevant position.
When viewed in IE10 they do not show up at all and actually when you try to view the png file directly from the URL in IE10 it doesn't show either.
Any ideas?
After extensive testing, it turns out it's a limitation on the width of the PNG canvas and IE10.
PNG images would work and can be viewed right up until 8000px wide but no more than that, after that they just don't render.
After more testing it's related to whether or not they are transparent. PNGs with transparency just don't show at all whereas images without transparency show as a black block (canvas).
Whether or not MS will fix this remains to be seen... we live in hope!
The fix for us is to reduce the width of our sprite to 8000px and have two or more rows of icons/images well spaced out.
The fixes is only to separate the each individual image as single with minimum size, which will be less than 8000px wide;
I have an img menu with svg images that changes the svg image with a identical image with a different color when you push in menu. When I test it with Chrome it works fine until you visit one link the second time, that chrome resize it to a smaller image.
I've made a lot of tests... I've tested :visited css, user agent css, and many another properties and it seems to be all ok. When you changes some css property in developer tools it changes automagically to correct size.
My last test was to change the width from 135px to 134px (don't ask why) and it works in 1680x1050 screen but not in 1920x1200 screen (???????). Is it an aspect ratio problem?
I'm getting crazy!!
I'm using angularjs to make the black image to red image change, but I think this is not the problem (it does a src replacement)
You can see it in the webpage http://silviaperezcruz.com.
I'll apreciate any kind of help.
PD: Sorry for my bad english
I couldn't see an obvious reason why it is doing it,. But if I had to guess, I would cast a suspicious eye on respond.js first. Does it still do it if you remove that?
Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?
I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).
It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?
Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.
For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.
IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.
(BTW, animateTransform on Chrome is broken - it miscalculates the translations)
I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil but no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:
isAndroid = /Android/.test( navigator.userAgent );
Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...
Modernizr detects support for SVG animation (SMIL).
Without the complete example it's impossible to say for sure what's causing the differences.