I am developing a SVG viewer for a web application. I have to work with existing SVG files and deal with them to show tooltips, do effects with mouse events...
I have looked for a good library to do that and RaphaelJS seems useful and it has IE compatibility (even IE8).
However, after several attemps, I can't get the embed element with SVG throught Raphael.
Is this not possible? If not, How can I do it?
My code where I load SVG files is:
<embed wmode="transparent" id="viewer" src="svg/mouseover.svg" pluginspage="http://www.adobe.com/svg/viewer/install/" type="image/svg+xml" width="100%" height="100%"/>
Thanks in advanced.
as fas as i know, raphael is not used to embed existing svg in web pages. instead, its purpose is to allow you to use javascript to create svg dynamically
see http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/
EDIT:
have a look at https://github.com/wout/raphael-svg-import, though
Finally, I have reached the solution using jQuery SVG (http://keith-wood.name/svg.html) instead of RaphaelJS (http://raphaeljs.com/).
This is the code using this plugin:
var svgDoc = $(document.getElementById("viewer").getSVGDocument().documentElement);
$(svgDoc.get(0)).svg();
var svg = $(svgDoc).svg('get');
Moreover, this code works for the majority of browsers (IE8, IE9, Firefox y Chrome).
Related
I have a WordPress site with lots of custom fields that contain images in .svg format.
Now I want to add support to IE8, which won't display SVG, so I need to find a solution.
The first thing I think of is to add custom fields to add a .png along with every .svg on the site, but this means to go through each and every custom fields to modify them...
I've also seen that there's a library called Raphael.js that supports IE, but it's intended to draw the SVGs, and I already have many complex SVGs created with Illustrator, so this is not a solution for me...
Is there any way (i.e. JS library) that, each time you want to load a SVG with:
<img src="http://mydomain/Homepage-1.svg" alt="Image Alt">
it automatically converts it to plain image?
You can include a call for Adobe's SVG Viewer for IE8
see:
http://www.iegallery.com/en-us/Addons/Details/444
It still works nicely for svg including filters.
Adobe SVG Viewer was discontinued in 2009. I still have clients from time to time that have need of support for IE8. This page has a few polyfills worth trying:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#svg
You'll need to decide what you want your fallback to be, Flash, Canvas, Silverlight, and then choose the right solution for you.
I have an SVG with some basic javascript interactivity, and I would love to be able to put some audio into it as well.
To clarify:
This is for an SVG that is by itself, not inlined in HTML
I would prefer to avoid having to use a javascript library, but i can if it's necessary.
Any insight on how this could be accomplished?
There are SVG <audio> and <video> element tags defined in SVG 1.2 Tiny. Opera supports them but no other UA does as yet.
A solution that will work most places except IE 9/10 would be to use a <foreignObject> element with an html <audio> element as a child.
I don't think there's a good answer if you need IE9/10 support as it doesn't support <foreignObject>
If you require a browser with support for HTML5 audio, then it's possible to just put the audio elements in the svg (use the XHTML namespace for the audio element and its children). Last time I tried it didn't require a foreignObject wrapper. Here's an example showing how to do that (works in chrome, firefox and opera).
It's also possible to create HTML5 audio elements with javascript and use them inside the SVG.
I've seen a lot of people fighting with this matter, but I can't find a proper solution, nor one that fit my needs.
I'm doing some charts with Raphael, and I basically need to get them as PNG (for export, or later use in a PDF, and some other stuff). For Firefox, Chrome, IE 9, and any other browser with SVG support is easy. There are actually two ways to achieve it: using canvg to render the SVG into a canvas element and then obtain the image data; or sending the SVG to the server (C#) and using a library to rasterize it.
The problem is, of course, IE 8 and 7. In these browsers, Raphael outputs VML, and there is no way apparently of getting the SVG source. I couldn't find any VML rasterizer, so it lets me one only solution: to translate the VML to SVG, or to redraw the paper in SVG.
I checked the vectorconvert library por PHP, that actually uses XSLT transformations to translate VML to SVG, but I couldn't make it work (I've tried several tools to test the XSL but neither seem to work).
I tried to force Raphael to output SVG to a hidden div, by changing its properties .type, .svg, and .vml properly, but that didn't work either.
I think there might be a way to write the SVG tree into a hidden DIV while in IE; despite the fact it won't be shown by the browser, the text should be there.
Does anyone knows a way to achieve it? Thanks!
To render SVG you can also use CanVG library.
It is SVG parser and renderer with canvas resulting output.
Next you can simply output pixel data from canvas to PNG.
To resolve IE limits you can use Chrome Frame.
What cross-browser JavaScript SVG library will allow me to display and interact with pre-made SVG images.
I know of these libraries:
Raphaël: I'm currently using this along with a SVG loading plugin. But that plugin does not support Inkscape or Adobe Illustrator SVGs (i.e. most SVGs).
cang: This library looks promising, but it requires <canvas> support, which IE doesn't have natively.
svgweb: Another more-promising library. It requires Flash, but most IE users have Flash.
jQuery SVG: It seems to be able to load SVG images, but development seems to have died. And it requires me to use a modified version of jQuery 1.3.
I'm basically trying to make chunks of arbitrary images "selectable".
Any help would be greatly appreciated.
Raphaël does support importing of Illustrator SVGs, through the use of this great plugin. All you have to do is save your ai file as an SVG, open it up using a text editor, copy out the code and import it with the plugin. Works great, except : only supports "path" objects, no text, no gradients, no shadows...
I'm using http://excanvas.sourceforge.net/ for Canvas support in IE and Cang for SVG suport using Canvas.
What you could do is use a combo of cang and svgweb, you could check to see if the browser allows canvases, and if so, load cang and use it. Otherwise check if they have flash, and if so, use svgweb. If they have neither, then tell them to upgrade their browser.
You could read http://ejohn.org/blog/future-proofing-javascript-libraries/ if you are unsure about javascript feature detection.
I'd be tempted to make use of Google Chrome Frame (an IE plug-in). This will save you maintaining two sets of code (one for IE users, another for regular browser users). Adding the following meta-tag to your page will enable SVG to render in IE (via GCF):
<meta http-equiv="X-UA-Compatible" content="chrome=1">
See here for instructions how to detect, and potentially prompt the user to install GCF.
The best solution I've found is to use Raphael along with this tool, which allows you to convert SVG files (generated by Illustrator, in my case) to Raphael code almost as-is. And since Raphael is IE6+ - you could easily be crossbrowsy with some effort on your part.
Here is my example of what can be achieved with a combination of these two things.
I created an SVG using inkscape and now I want to add some animation according to some logic to it.
I know JavaScript quite well and have basic experience with jQuery. So I thought I can animate my SVG with jQuery as well.
Google finds countless tutorials on how to work with inline SVG embedded in XHTML, but I have a stand-alone SVG and Firefox complains
Error: b.style is undefined
Source File: [...]jquery.js
Line: 16
Is there a way to get jQuery working? Or, as an alternative, can you recommand another JavaScript library I could use that fulfills the purpose?
I would recommend to try the Raphaël library. The API was inspired by jQuery so it should be familiar to you.
Also keep in mind that IE doesn't support SVG so having an SVG-only solution won't be portable across major browsers. Raphaël takes care of it for you - it uses VML on IE and SVG on other browsers. It works on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
You can create SVG using Inkscape and then import the paths to your Raphaël code. See the talk by Dmitry Baranovskiy at JSConf 2010.
I agree with the last answer. Drop your SVG into the converter at
http://irunmywebsite.com/raphael/svgsource.php
This will put your SVG into html4 and it will work on all browsers except android.
You can animate the paths with Raphael.
The output from the converter is all Raphael / SVG / VML