svg

Capture Signature using HTML5 and iPad

Anyone know how this can be done? Would you use a canvas object, svg, jQuery, etc? ...

Gradient transparency of object in RaphaelJS

I'm trying to get a rectangle partly transparent where the left part is opaque while the right part is more transparent if you go into that direction. This works in Firefox, Chrome but not in Internet Explorer 7 or IE8. In IE all rectangles are displayed with the same transparent gradient. function drawTest(y, pct) { var recttest =...

How to assign gradient fill to SVG shape via JavaScript?

Hi, I'm creating an SVG rectangle using the Raphael JavaScript library, and assigning it a fill using the following line of code: this.myBox.attr({fill: 'white'}); This works fine. However, now I want to tie this to a linear gradient. I have borrowed some gradient code to test it out, using the code below: <defs> <linearGradient id=...

How do I use SVG images interchangably with PNGs in Firefox?

My project supports users uploading their own icons to be used for various entities in the system. I'd like to support SVGs, as this means that the same image can be scaled nicely and thus used in multiple places. Firefox has a current bug that prevents SVG files being used in <img> tags. It was my understanding from my other xhtml work...

SVG arcs in java2D for general path

I found this method in this page, that add an arc2D to an general path, i try to understand the method, but i can't, could you help me? public static final void arcTo(GeneralPath path, float rx, float ry, float theta, boolean largeArcFlag, boolean sweepFlag, float x, float y) { // Ensure radii are valid if (rx == 0 || ry...

transform .SVG images by the help of PHP - Image Magick similar

Hello. There's a need to transform .svg files and save em either in .svg or jpeg format. The problems with ImageMagick is that it saves transformed files on white background and I deadly need it on transparent. Any suggestions with other tools or clear php? Would really appreciate it. ...

Resizing SVG in html?

So, I have an SVG file in HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it. I know with a jpeg or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and w...

How to convert large SVG file to tiled PNGs?

I have a large SVG file (approx. 60 MB, 10000x10000 pixels but with the potential to get much larger), and I'm wanting to create, say, many tiled 256x256 PNG images from it (in that example there would be 1600 images; round(10000/256)^2). Does anyone have any idea of how to do this on a web server (running PHP amongst other things)? I ...

SVG problem; updating moving elements is CHOPPY, why?

Drawing more than ~5+ SVG lines with the code below makes performance choppy when moving elements, especially if long SVG lines are drawn. Is this just a natural SVG performance limitation (because of the svg canvas size) or is there something fishy with my code? Project in action can be seen here (only supports Chrome and Firefox so fa...

is Raphaël using canvas or svg?

I've been looking for a good vector solution, and have heard good things about Raphaël. But all over its docs it talks about defining canvases, which just made me confused. Is Raphaël a canvas or SVG library? ...

Restrict SVG to div boundaries

Hi, I'm trying to show multiple polygons as SVG image on a div using Raphael. Although, I've set up the size for the div Raphael gets as an argument to create the paper object, the size of the div element is not respected and the image is drawn outside of the div boundaries (which I somehow understand, as the polygon coordinates go beyo...

SVG Polyline (and Path) Scaling Issue

I have written a mathematical software that is able to plot graphs (among other things). First it creates the graph itself, i.e. a set (or list, call it whatever you want) of points { (x0, y0), (x1, y1), ..., (xn, yn) }, and then lines are drawn between these points. On-screen, using either Windows GDI or OpenGL, it looks great, if onl...

HTML5 SVG jQuery problem in FireFox 3.6

Here is my HTML file (jQuery needed and enable HTML5 in FireFox about:config) <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('svg').append("<rect x='100px' y='...

Is there any way to tell when an SVG animation is complete?

I'm using the Raphael library to draw some shapes, and then animate them into view within the browser. Is there any way I can check when one of these animations is complete in order to then trigger another function? ...

SVG files in Raphael, can they be used?

I have an SVG file that I would like to display via Raphael (each svg file is a node in a tree I'm trying to draw, the actual connections of the tree will be made by raphael). I tried something like: var vector_image = paper.image("test.svg", 50,50,50,50); but no dice, seems only "real" image files like png or jpeg are accepted? I fi...

How to animate 'Raphael' canvas?

Hi, I'm using the Raphael library to create SVG objects. To initialise the SVG shape and create a canvas for everything inside, I've used the following line as stated in the documentation: var paper = Raphael(10, 50, 320, 200); I now want to animate the paper and everything inside it, just like I would animate a shape which had been...

How to either determine SVG text box width, or force line breaks after 'x' characters?

Hi, I'm creating an SVG text box using the Raphael library, and filling it with a dynamic string which is extracted from an XML document. Sometimes, this string is longer than the canvas I am placing the text box on, so I need to either limit the width of the box which will itself force the line breaks (I can't find any evidence of thi...

SVG arabic fonts not showing properly

Hi all, I have SVG embedded arabic font. It's not showing properly in browsers: Chrome 5, Safari 5, Opera 10.54. But batik's Squiggle shows correctly for SVG arabic fonts. After some testing and searching I've found that my SVG embedded arabic font contains valid glyph data for the character(for all four positions: initia...

Question about SVG path specification regarding absolute and relative path definitions

Hi all! Currently I'm developing an app that converts svg-paths created by Inkscape. Now I'm not clear about the path specification regarding absolute and relative path-combinations. Does the specification say anything about a path definition, that holds relative and absolute coodinates at the same time? Espacially the case regarding an...

Having trouble animating SVG rect's opacity using Raphael.

Hi, I'm using the Raphael library and trying to animate the opacity of a rectangle from 0 to 1. Here's the code I've written: this.myRect.attr( 'opacity', 0); this.myRect.animate({opacity: 1}, 1000); This does not work, and I believe it's the animation line which is incorrect as I can set the initial attribute to a lower val...