svg

Coverting SVG Path from inkscape to Raphaeljs

In inkscape the coordinate system is bottom/top corner (meaning, 0,0 is left bottom corner). This is the same case with Adobe Illustrator. But, when I try to use this path string in raphael it use top/bottom (meaning, 0,0 is top/left corner) approach. How to convert this path string according to browser's coordinates or raphael's coordin...

Multiple SVG document loaded dynamically in an HTML page

I dynamically load multiple external SVG documents in an HTML page and attach them inline. But the lineargradient defined in the first SVG file "pollute" lineargradient defined with the same id in subsequent SVG files. It means the first loaded lineargradient defined with an ID override other lineargradient defined with the same id in o...

Choosing right technology (SVG vs Canvas)

I'm writing an app for shape manipulation, such that after creating simple shapes the user can create more complex ones by clipping the shapes against each other (i.e. combining two circles together into a figure 8 stored using a single path rather than a group, or performing intersection of two circles to create a "bite" mark), and am t...

How to add JavaScript onClick handler to an embedded html object?

I'm trying to add an onClick handler to an embedded object. The handler needs to execute a function which is in an external .js file which is linked to the current html file via <script src=".... Do I need to reference the function differently due to it being located elsewhere? Here is the code as it currently stands (which does not wo...

What is a good alternative to SVG in IE7?

I have a graph rendered in web by means of embedded <svg> object. Works properly in Firefox, Safari and other browsers. Except IE7+. What is a good alternative to SVG for IE? The graph is very simple, and uses just lines, circles, and texts. Thanks in advance. ...

Obtaining svg element 'id' attribute dynamically (Google SVG web)

(using http://code.google.com/p/svgweb/) window.onsvgload = function() { function onEnter(e) { var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; alert(targ.hasAt...

Use Raphael to manipulate svg

Hi, is it possible to use Raphael to manipulate an embedded svg? I used Raphael in the past to draw shapes, but haven't actually seen it being used to manipulate an existing svg image. If not, is there anything else that allows me to easily change colours, add events, etc to polygons of an embedded svg? Cheers, Max ...

Is there an equivalent of canvas's toDataURL method for SVG?

I am trying to load an svg image into canvas for pixel manipulation I need a method like toDataURL or getImageData for svg on Chrome/Safari I can try doing it through and image and canvas var img = new Image() img.onload = function(){ ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however... var dataURL ...

Changing the size of the SVG image using JavaScript?

Hi, I have a .svg file that has the following code: <svg version="1.1" x="0" y="0" width="256" height="256" viewBox="0 0 335 394"> plus a ton more code (namespaces etc) that is unnecessary to this situation, but the problem I have is that I need to somehow alter that width and height (from 256px to arbitrary size) using JavaScript. T...

How do I paint clouds?

I need an algorithm to paint clouds, or cloud like shapes. Obviously, I wouldn't want them all to be similar. What should I use to generate the relevant series of X,Y coordinates to paint the clouds? I am going to implement this either in SVG or Canvas ...

Drag and dropping using Raphael js

Hi, I'm trying to build a puzzle game in javascript, using raphael to take care of the drag and drop and rotation of the pieces. The problem I'm facing is: Whenever I rotate an image, its coordinate system is rotated as well and the drag and drop doesn't work anymore as expected. Edit2: Here is a simple test case. Drag around the elli...

Coloring a triangle "naturally" using SVG gradients

I have 3 points colored H1, H2, and H3, where each Hi is has 100% saturation and value, and only the hue varies. In other words, these are "rainbow" colors. I want to use SVG's gradient function to color the triangle "naturally". In other words, points close to H1 should have hue H1, the coloring should be continuous, etc. Is thi...

IE7 not showing SVG contents instead of that its opening the content as an Office document.

Hi I am facing an issue with IE7 browser if i launch any URL with .svg or any page with svg content its asking for file download and trying to open with MS Office. is ther a fix for this? ...

What are the good javascript libraries for drawing shapes?

I'm wanting to create various shapes in HTML pages and am looking for a decent javascript library to simplify the task. What type of js libraries exist for drawing shapes on the web? I am familiar with Raphaël for SVG - but don't really know what else is out there for SVG or non-SVG drawing. ...

How do I represent used space in 2d?

I have fixed area 2d space filled with rectangles. I'd like to move the rectangles around, add new ones, remove some, but not allow them to overlap. If all of the rects are the same height and width (50x50px), what data structure should I use to store their position and what space they are using and what lookup method should I use agains...

Scaling problem with CSS and SVG.

Hi, I have this SVG file: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"&gt; ]> <svg version="1.1" xmlns="http://www.w3...

jQuery $.position() on Safari & Chrome

Hello there, I have an issue using $.position to retrieve the relative x/y offset on an element. It was mentioned before that both Safari and Chrome differ in handling it as the others. I'm using Raphael-JS. To cut the long story short, what I have is an SVG element wrapped by the parent, centered DIV wrapper: <div> <svg> ...

Inline SVG Animation: Compatibility Oddities

I've been working on this for some time, but can't seem to find an adequate solution yet. The page is XHTML with inline SVG which is animated with ECMAscript once the SVG is finished loading. There is a 0.5s pause, then an eye in the middle opens. It works on Safari, Firefox, and Chrome on MacOS X. The problem is in Chrome on Windows t...

Convert PowerPoint 2007/2010 file formats to svg using pptx4j in Java

In my Java project I am working on PowerPoint 2007/2010 file format so I am Using pptx4j open source project. However, I don't know how to convert PowerPoint 2007/2010 file formats to an SVG file. Can anybody help me? ...

implement 'math' array as web-ready image (e.g. SVG)

...