Access SVG DOM when using ASV plugin in Firefox - javascript

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.

Related

Access to svg through jquery in IE 8

I am looking for a way to use jquery to manipulate SVG paths in IE8, currently I am using the following syntax and works fine in IE9+
$('svg path.someClass').css({fill:'rgb(0,0,0)'});
Is there a way I can achieve this?
Thanks for your support
As IE8 doesn't support SVG, I'd say no, you can't do that. You could possibly make IE8 at least understand that the SVG elements were elements (by using the createElement trick in the head that people use for HTML5 elements so it at least doesn't think they're completely alien), but they won't be displayed properly, so manipulating them probably doesn't make much sense.

svg on older IE browsers [duplicate]

Does anybody know of a comprehensive library to make SVG work with IE (7 and 8 in particular)?
I wanted something Javascript which could be included in my web page and which would silently convert all my SVG to VML in a fashion similar to what excanvas does for Canvas.
The Raphaël—JavaScript Library can help you out there.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics and supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
EDIT:
There are two more js-libraries which use vml to render svgs in IE:
Ample SDK (where it should be possible to easily integrate existing svg files)
DojoX GFX from the Dojo Toolkit
Google's SVG Web does this. According to the project website:
SVG Web is a JavaScript library which
provides SVG support on many browsers,
including Internet Explorer, Firefox,
and Safari. Using the library plus
native SVG support you can instantly
target ~95% of the existing installed
web base.
Whilst it's described as a JavaScript library it also requires Flash 9+. This isn't usually a problem, but if you're in a corporate environment with old Flash or no Flash on the workstations it's not going to work.
Also, it is still in Alpha which could be a problem, depending on what your project is.
I think SVGWeb is the way to go, even if it is based on Flash as VML is far from being fast enough for lots of applications.
Adobe provides scripts to automatically detect, install, and redirect you back to your original site:
http://support.adobe.com/devsup/devsup.nsf/docs/51780.htm
http://www.adobe.com/svg/workflow/autoinstall.html
I have been using this fairly successfully on my site.
A more low tech solution would be to use something like svg_alike (insert conflict of interest notification here :)). It checks for the SVG support, then if it doesn't find it it replaces all SVG images with PNGs.
https://github.com/forwardadvance/svg_alike
You lose the advantages of smooth vector zooming, and retina support, but IE8 users are unlikely to make use of these features anyway.
The advantage is that you don't have to convert your images into JavaScript. I think it provides 80% of the value for 5% of the work.

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.

What browsers support interactive SVG documents?

I'm working on a project that requires an interactive map. I want to use an SVG document with some custom javascript code embedded in it much like this developer has done:
http://treeblurb.com/xmap/svg/melbourne_central.svg
Achieving what I want to do is trivial but I can't tell which browsers would support this level of interaction. Essentially I need to:
Embed custom script tags into the document.
Adjust attributes of nodes (i.e. fill)
Add mouse events to specific elements.
I guess my question is - if a browser supports native SVG, would it allow me to do all of these things?
Native SVG is supported by most versions of Chrome, Firefox, Opera and Safari. IE8 does not support it, but IE9 and above does. Android supports it from Honeycomb onward.
You may want to take a look at Raphael. It not only makes SVG-like functionality available in IE8 and below (by falling back to VML), it also provides methods to manipulate all objects, which you can even combine with JQuery.
There's also good information comparing Raphael to JQuery SVG here.
I.E. 8 and earlier does not support SVG. Android 2.3 and earlier also does not support SVG. Check out more browser compatibility issues here: http://www.caniuse.com/

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);

Categories