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.
Related
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?
As far as I read about this topic d3.js uses for the main part SVG and not HTML5's Canvas. The advantages and disadvantages of SVG and Canvas are clear and already discussed. Now I found out that it is possible to use Canvas instead or in combination with SVG in d3.js. The main reason should be to get a better performance for large datasets (like cubism.js does for realtime data visualization). My question is: When I do use Canvas over SVG to get a better performance, do I have still the possibilities of interaction? I know that Canvas itself allows manipulation, but it is much harder to implement than it is for SVG. So can I maintain the interaction of SVGs when I use the d3.js Canvas approach?
First of all, D3 doesn't require any specific rendering technology as such. It is mostly (except for some specialised helpers) agnostic of whether you use HTML, SVG, Canvas or something completely different for rendering.
One of the main differences between SVG and Canvas, as you've pointed out, is that SVG has the interaction "built in", i.e. it provides facilities for event listeners and such. Canvas has none of this.
You can however get the same kind of interactivity as in SVG in Canvas. The trick is to use Javascript to monitor what the user does in relation to the various elements. For an introduction to this, see e.g. here.
Note that, depending on what kind of interaction you want exactly, there may be significant implementation effort to achieve the same as SVG already provides. Also note that this incurs a performance penalty which may negate some of the benefits of Canvas over SVG.
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?
I am creating a dynamic, interactive network diagram with php, javascript and either Canvas or SVG
However, with canvas, I don't know how to make each object selectable. i don't want to use the hidden canvas and to detect if a mouse is on an object, because I will have lots of intersecting objects and having lots of layers of canvas will be messy.
I don't know anything about SVG.
Would SVG serves the purpose better? or what is a canvas solution to this.
One advantage of SVG is that it has concrete DOM objects representing the shapes in the drawing, so you automatically get a lot of mouse event handling and event bubbling.
Alternatively, you could use EaselJS, which provides a pretty robust display-list, freeing you from managing hidden canvases.
There are some projects for building diagrams and graphics already. You could try Raphaël which is svg based, so it should be ie compatible as well.
I assume by "the hidden canvas" you mean my tutorial. It will still work with multiple objects and multiple layers, you just need to paint them in the proper z-order.
There are of course much faster (but more sophisticated) ways.
If you don't want to deal with it, SVG has all the object selection built in. Give Raphael a try as Zlatev suggests. If the performance gets too bad (Too many objects) you will have to switch to canvas, so it really depends on your number of nodes/links in your diagrams.
You will have to take care of sending data to your server (in whatever way you prefer) yourself though. There's nothing built into SVG/Canvas/Raphael that will do it for you.
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...