I'm developing an application where users draw stuff on SVG dynamically with the use of RaphaelJS. JQuery & PHP are also involved. The stuff being drawn is pretty lightweight, just some paths and lines. I have noticed that the "drawings" can be easily accessed and stored by simply calling $('svg').html() and this made me wonder whether it's possible and feasible to build a mechanism that allows the users to store their drawings using web storage, then load them for further editing. The challenge, as I see it, is loading that saved content into a new SVG and making Raphael work with it. JQuery html() obviousy won't work and appending every single path and line with createElementNS is pretty cumbersome. Is there any way, a library perhaps, that can take html() from one SVG and simply insert it into another?
Related
I want to include this embedded-SVG-Object as an interactive web element inside my web app.
Within this whole svg, these (red)marked overlay-ed objects will communicate through ajax calling to a separate application,which will decide their state(change of position or color) in runtime.
As a novice in svg, need help to determine how can I build this SVG object, for my specific purpose. Found inline SVG better among others. Any easier handy useful tool idea or online platform to draw this SVG object, would be really a great help.
All elements of an SVG are loaded into the DOM, so you can manipulate a loaded SVG through javascript or you could use a library to help you with that, based on my personal preference, I would recommend looking at something like SVG.JS wich lets you easily build/manipulate svg images through javascript.
I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.
Can it be possible to use Raphael js with svg web and svg core (original SVG API), so that I can get the benefit of all available features? I tried to load them together, but nothing would happen. Perhaps they overwrite each other's functionalities.
More precisely, once again my question is can I apply Raphael js along with svgweb on a single SVG.
I tried combining SVG libraries , the main problem is that they use their own canvas so one will always be on top of the other.
I suppose they wouldn't just conflict with each other, but those libraries are also quite big so that's a lot of stuff to download for your visitors. Also think of the added burden for the browser which has to interpret all of the libs and hold them in memory, potentially making the browsing experience less snappy.
What exactly are you trying to achieve that can't be done with a single one of those libs?
Is it possible to use Raphael to manipulate an embedded SVG image? 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 image?
From my experience reading the Raphael.js source, I have to agree with previous posts. The only way I can think of to replace or modify the SVG is by replacing/modifying the markup/DOM itself.
All I want to add in my answer is a short, general explanation of why this is so. Raphael is designed as an SVG/VML generator. That is, Raphael makes JavaScript objects and appends their corresponding SVG/VML markup to the DOM as they are made. The objects have lots of additional properties that make them work within the Raphael framework.
It may be possible to write a plugin that can construct a Raphael object around an SVG element by reading its properties, but, I suspect that such an object may not have all the information it needs to coexist with the other Raphael objects. Certainly, no such parsing/reconstruction functionality currently exists.
Funny, yesterday I found the glitchsvgicons page doing that.
Although in a very primitive way, just using a regex replace of parts.
It can be hint, though: apparently you can use good old search/replace of text parts on SVG icons. But it is more prone to issues than using a real Dom tree...
This is a bit of a vague notion which I have been running over in my head, and which I am very curious if there is an elegant method of solving. Perhaps it should be taken as a thought experiment.
Imagine you have an XML schema with a corresponding XSL transform, which renders the XML as SVG in the browser. The XSL generates SVG with appropriate Javascript handlers that, ultimately, implement editing-like functionality such that properties of the objects or their locations on the SVG canvas can be edited by the user. For instance, an element can be dragged from one location to another.
Now, this isn't particularly difficult - the drag/drop example is simply a matter of changing the (x,y) coordinates of the SVG object, or a resize operation would be a simple matter of changing its width or height.
But is there an elegant way to have Javascript work on the DOM of the source XML document instead of the rendered SVG? Why, you ask? Well, imagine you have very complex XSL transforms, where the modification of one property results in complex changes to the SVG. You want to maintain simplicity in your Javascript code, but also a simple way to persist the modified XML back to the server.
Some possibilities of how this may function:
After modification of the source DOM, simply re-run the XSL transform and replace the original. Downside: brute force, potentially expensive operation.
Create id/class naming conventions in the source and target XML/SVG so elements can be related back to each other, and do an XSL transform on only a subset of the new DOM. In other words, modify temporary DOM, apply XSL to it, remove changed elements from SVG, and insert the new one. Downside: May not be possible to apply XSL to temporary in-browser DOMs(?). Also, perhaps a bit convoluted or ugly to maintain.
I think that it may be possible to come up with a framework that handles the second scenario, but the challenge would be making it lightweight and not heavily tied to the actual XML schema. Any ideas or other possibilities? Or is there maybe an existing method of doing this which I'm not aware of?
UPDATE: To clarify, as I mentioned in a comment below, this aids in separating the draw code from the edit code. For a more concrete example of how this is useful, imagine an element which determines how it is drawn dependent on the value of a property of an adjacent element. It's better to condense that logic directly in the draw code instead of also duplicating it in the edit code.
We have done this in our in-browser XML editor Xopus. You can see an example here.
We load the XML source document, an XML Schema and an XSLT that outputs HTML+SVG. Internally we rewrite your XSLT into XSLT' which will allow us to track the output HTML+SVG back to the original XML that was the context in the XSL to output that HTML or SVG node. This is the framework you're referring to.
To facilitate editing we position a cursor over your XSLT output and update the XML DOM when you type or insert elements. After each change we will rerun the XSLT. For performance reasons we will compare the XSLT output with the previous output and apply the changes using HTML DOM operations to the WYSIWYG view.
We diff the two XSLT outputs using another XSLT. We can do so because we have modified the original XSLT (resulting in XSLT') so that is will output unique and persistant IDs for each output node. So all new nodes will have new IDs and missing IDs are removed nodes.
XSLT' is the rewritten version of the original XSLT you provide. It is still XSLT, but we've added a few things to it so it outputs IDs for all output nodes (we do so with yet another XSLT). Other than that it is functionally equivalent to your original XSLT.
Maybe use can AJAX: Instead of editing the document locally, send editing commands for the original XML to the server which transforms again and then sends the new SVG back.
The main problem here will be what happens when you update the SVG element on the current page. Will drag'n'drop still feel smooth? If not, then you might have to resort to some mix of the two methods: Drag the SVG node using JavaScript and when the user drops the node, send an update to the server for a new SVG.
You will want to avoid trying to synchronize updates in XML and the local SVG (which would mean to replicate part of the XSLT in JavaScript -> stay on one world, don't mix).