I have a HTML file with inline SVG, which in turn refers to SVG elements in external SVG file with library elements. It uses a <use> elements with xlink:href="Library.svg#libraryShapeID". It works as a breeze in Opera and Firefox, but doesn't work in Safari. I've made a simple test file here:
http://sasq.comyr.com/Stuff/SVG/test01.html
Is it some browser bug or am I doing something wrong?
How should I rewrite it to make it work in Safari too?
There was a bug about this on Webkit but it has been fixed for the Version: 420+ BUT the bug for Fragment identifier is still not solved.
Someone gave an answer: Importing external SVG (with WebKit) using XMLHttpRequest. Quite unfortunate but in the meantime, I guess working.
I realize that this is an old question. But as this method of using SVGs has become more popular these days, I wrote a polyfill to make this technique work in browsers that fail to load the external SVG by default. At the time of writing this, IE9+ doesn't support referencing external SVGs in use elements. The polyfill that I wrote is quite simple and lightweight; it detects whether the SVG has failed to load and if so, sends a GET request to fetch it. It will then prepend it to body.
I hope you find it useful. I would appreciate any feedback.
Related
Our application is running fine in chrome browser. But in Firefox some features and screens are not working properly. So it needs to be fixed .How can i do that and what could be the solution for that?
The best way to find out what is 'going on' is to debug the code in the browser.
Firefox has a built in debugger but i prefer to use a third party debugger called Firebug.
You should give Firebug a try as indicated in the first answer. However as far as I know you had to install it as Add-on, it is not included in the distribution.
I think your question is a little too general. Anyway, if the compatibility issue is about CSS style, you should check whether you are using WebKit-prefixed CSS only. For example, if you are using -webkit-animation, it would only work in Chrome and Safari. Actually you should set four CSS styles: -webkit-animation, -moz-animation, -o-animation and animation to make your code work in major browsers. There are some documents about Mozilla and WebKit CSS that might help:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
I've run into some SVG rendering bugs in all browsers except Chrome. The SVGs are all embedded in the HTML file, which is supported by all current browsers. However, most browsers get the colors wrong (which are just standard hex colors), while others fail to render some at all (and others just fine). Here's the source file and screenshots: http://awesomegeek.com/bugreport/bugreport.zip See for yourself and let me know if you can replicate it or come up with a solution.
I'm afraid your html file is invalid. You've got multiple elements with the same id e.g. linearGradient id="a". I know they occur in different svg fragments but you still can't do that, all Ids must be globally unique in the file. I think Firefox is drawing the icons correctly by picking out the first one of these in the file as a whole.
Is there a way to make a grayscale image in chrome via css?
I have tried this but doesn't work on latest version of chrome
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is better and easier approach than SVG for webkit...
Another solution would be svg with a level of indirection.
Basically, <img src="wrapper.svg"/> where wrapper.svg applies an svg filter to the svg, and the svg has an image element pointing to your raster image. Works in Opera, Chrome, Firefox and probably IE10 (untested).
Here's a demo. You can pass in your own url if you encodeURIComponent it first. Note though that for passing in parameters to work it relies on scripting being enabled, so if you need to use it in <img> elements or in a css background image you'd need to generate the svg files on the server.
Not yet, but Chrome 18 will support css filters (released later this year). SVG filters is only supported by Firefox. You should be able to find a consistent canvas+javascript solution though.
EDIT: See Erik Dahlström's post for alternate solution.
Here's an HTML5 solution. Supported by current versions of Chrome: http://webdesignerwall.com/demo/html5-grayscale/
Is it at all possible to assign css styles to only display in sepcific browsers? I know IE can be but Im meaning safari and google chrome? The problem is I have currently set some CSS styles to my site which looks great in firefox but seems to look totally ugly in safari and chrome and I'd really like to change that if possible
I agree that you probably should fix your CSS and HTML. Chrome and FF should render the same generally.
Make sure your HTML validates.
However, if you are in a pinch -- this script works great: http://rafael.adm.br/css_browser_selector/
Some CSS3 properties are with the prefix -moz, -webkit, -ms. Other than that it's only possible to detect the user browser version, type and then serve the different css sheet accordingly. Remember, a stylesheet does not necessarily have to have a .css extension, so you could write a PHP script that prints out different CSS for different browsers when included.
Wouldn't recommend it, though. You should simply fix your CSS, before relying on browser detection.
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html