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.
Related
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).
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.
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
Is there a javascript solution to make the canvas tag or the video tag in HTML5 behave more like HTML5 in older/current browsers that don't support it?
The canvas tag should ideally behave like the it would in HTML5 supportive browsers, but the video tag is also good if it's replaced with alternate code.
You can use the canvas in Internet Explorer using this library. There is also this library for doing the same with HTML 5 in general and this one for drawing text on a canvas. Here is a canvas library for GWT (which of course gets compiled to javascript).
Edit: Here is a library to add svg support to older browsers.
I've seen a few JavaScript image rotators that use either the HTML5 canvas element or an AJAX call to a server-side script, but is it possible to do it without using those methods? Internet Explorer doesn't support canvas (I'm aware of excanvas, but I'd like to do without if possible) and I'm not sure if AJAX will be fluid enough. If there is a way, are there any open source scripts, examples, or resources that you could point me to?
Alas, CSS does not support rotating images in any way, shape or form (unless you count CSS Transforms, which are only supported by Safari 4 and Firefox 3.1).
Your best bet is to use Raphael's image() and rotate(), which should support all semi-modern browsers (using SVG) and most versions of IE (using VML).
This jQuery plugin works in major browsers including IE: http://wilq32.googlepages.com/wilq32.rollimage222 . It makes use of excanvas, but at least it allows you to evaluate if that method is good enough for your purposes.
Yes, via CSS Transform:
var degree=180;
document.getElementById('image_name').style.transform='rotate('+degree+'deg)';
Google is your friend:
http://www.walterzorn.com/rotate_img/rotate_img.htm
But the downside of this technique (as mentioned) is that it uses hacks by inserting a huge number of DIVS so it could slow down the browser a good bit. Use with caution. Problems like this are why the canvas tag was created in the first place.