We Keep Coding

Get an SVG Map w/ JavaScript to Work in IE8

I have an SVG file, which uses uses JavaScript to add a few styles. This doesn't work in IE8. I don't know if it works in IE9 either, but assume it does. It can be found here:
removed
I was told that the project called SVGWeb will allow IE8 to render the SVG and parse the JavaScript to modify the SVG. However, I have downloaded SVGWeb, and the demos don't work in IE8.
I have heard of a few other solutions that allow SVG to work in IE8.
Does anyone know if there is a way to get SVG working in IE8?

Try if the examples here work for you:
http://www.svgopen.org/2010/papers/15-SVG_in_Internet_Explorer/

After some research, this SVG will not work for IE8.
I guess I need to figure out how to convert this for Flash. SO much for web standards.

Add style elements in CSS

I want to make my own custom CSS elements that will be handled by a js file of mine. Is this possible?
Here would be an example:
div {
rounded-corners:15px 15px
}
And then use Javascript to apply the styles for each browser for rounding corners.
Is there a way to do something like this?
EDIT
The point isn't to add a common support for browsers. I want to implement my own CSS things.

The answer is "no". While it is possible to easily get style values from stylesheets in Internet Explorer by accessing the currentStyle property, like so:
alert(myDiv.currentStyle['rounded-corners']);
//-> "15px 15px"
...other browsers don't support the currentStyle property, opting instead to support the W3C standard window.getComputedStyle(). getComputedStyle() doesn't include "expando" style properties in the outcome, which means your only option would be to iterate over the rules in each stylesheet instead, which could be an expensive procedure depending on how many stylesheets and rules you have. Obviously, you also lose out on the browser's cascading/computing.

IE9 and the latest versions of Firefox and Chrome all handle border-radius anyway.
And you can use CSS3 Pie to add support to older version of IE. No need to write your own script.
EDIT: I suppose you could write your own version of CSS3 Pie, but why would you want to?

You may want to look into SASS/SCSS or LESS, which both offer "mixins". These act like functions in CSS, and should let you do what you want. LESS at least can be made to work client-side through Javascript; I suspect SCSS can too.

CSS already has a property for rounded corners, called border-radius.
This is supported by virtually all browsers in current use. The only exception of any significance is IE8 and earlier.
The good news in this case is that IE8 can indeed be programmed to work the way you're asking. Other browsers cannot, but IE can, and this is lucky, as it's the one browser that needs it more often than most.
So the direct answer to your question is "sometimes". Most browsers drop the styles they don't support, but IE keeps them. It obviously don't do anything with them, but you can access them via the DOM, which means that you can do what you're asking.... but only really in IE.
In the case of rounded corners, there is already an excellent Javascript-based hack for it called CSS3Pie. This is open source, so you can examine their source code to learn how it's done.
The CSS3Pie code is quite complex though, so if you want a simpler example to work from, take a look at this older script which does the same thing a lot more simplistically. Easier to read, but not as functional. For real life use, use CSS3Pie, but for learning, this one is a better starting point.
For working with IE, I would suggest following the examples in these scripts to achieve what you're asking. For other browsers, you will have a much harder time.

How does RaphaelJS get inline SVG to work in Firefox 3.6?

I was playing around with RaphaelJS and realized that it gets inline SVG working in Firefox 3.6.22 (at least it looks like it, or am I fooled by Firebug...).
As my own SVG does not show up, I was wondering how RaphaelJS accomplishes this feature when Firefox 3.6 does not support blunt inlining of SVG. I (briefly) looked at the source and also found another answer how inline SVG can work in older Firefox browsers. Still, I am stuck getting this to work for myself (i.e. AJAX-loading SVG and placing it into the DOM).

I am going to answer my own question:
Raphaël is not really doing anything special (in this case).
Thanks to the answers to my post on the Raphaël Google Group I was pointed in the right direction. "Inline SVG" means "inline with common HTML" (also explained in a Mozilla blog post), so without using XHTML and proper namespacing. My prior understanding was that I could use SVG only via <object> or <embed> in some browsers (like Safari 4 or Firefox 3.6)... which is wrong.
I was adding SVG by passing it as an XML string to jQuery's .html() method. This works fine in the current versions of most modern browsers but the method name gives a hint that this might not be the right way if you want to add SVG in a browser that does not support SVG in html. So I changed my code and used document.createElementNS to add my SVG directly to the DOM. There is another way to bulk-inject my SVG-XML (as mentioned in the Google groups thread), but I did not have the time to look into it yet.
So now I got my SVG working in all targeted browsers but the older IEs, which is nice. Sample code:
var svgContainer = document.getElementById("svg-container"),
svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svgElement.setAttribute("version", "1.1");
// Add stuff to the group
svgElement.appendChild(g);
svgContainer.appendChild(svgElement);

Using HTML Canvas for UI elements?

I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?

Other than the fact that it's not supported in IE, no.

canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...

I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?

Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)

Access SVG DOM when using ASV plugin in Firefox

I have to develop for Firefox using the Adobe SVG Plugin 6. When using Firefox's native SVG viewing capabilities, I can simply look at document.documentElement, which will give me the root svg element and from there I can navigate the DOM to where I want.
With the ASV in Firefox, it appears to make a skeleton HTML file with an embed in it, and I can't get past that. There don't seem to be any properties or methods from the embed that lead to the SVG document.
Supposedly there is a window.svgDocument property created by the plugin, but I can't get that to work (maybe it's IE only).
Is this possible in any way?

Sorry I do not believe this is possible.
After investigation I found that document.embeds[0].getSVGDocument() works with Firefox native SVG, and with IE using ASV, but not Firefox with ASV. There does not seem to be a way of accessing the SVG document of an SVG from outside the SVG when using Firefox and ASV.
This project has been abandoned and instead we will be displaying everything outside the SVG. But if someone knows a way, I would still be interested.

You may want to look into svgweb which adds SVG support to all browsers that don't have native support by using Flash Player.