Examples of what I'm looking to do:
I've been looking for a tool to manipulate a loaded svg path and polygon as I can use Snap.svg Free Transform for resizing and rotating.
Well I couldn't find a library besides Paper.js that allows me to have interactive editing of Bezier curves however I don't want to work with canvas at all JUST SVG and I couldn't find anything for the SVG element.
I'm still super confused as all I can find via Codepen and Github are demos in which the svg objects are inline HTML and the Javascript is targeting the inline HTML that wasn't dynamically added.
I know there are libraries like Vector.js, Snap.svg or SVG.js that I maybe able to use. However while reading up on the API's I know SVGGeometryElement has a method getPointAtLength() which returns the point at a given distance along the path.
My question is first is there a js library that allows me to have interactive editing of Bezier curves both fill and stroke? If so where and is there a demo to help me understand how to use it? If there isn't based upon what I want to do which is to to ONLY work with SVG what library of the 3 is the best and why?
The getPointAtLength() method is not useful for your needs. You need to be able to access a list of path commands and their parameters. But getPointAtLength() is not that.
SVG has an old API for accessing path segments. However this is deprecated now, because it was somewhat ugly and difficult to use. I'm not sure which of the browsers, if any, still support it.
There is also a new API that has been proposed in a new SVG Paths module.
I've lost track of which browsers have removed the old API, and which have implemented the new one. You'll need to check.
If you want to be backward compatible, Philip Rogers has created a polyfill library for the old API.
If you get desperate, there are other libraries for parsing path definitions that you could use. For example: https://www.npmjs.com/package/svg-path-segments. Note that this is not a recommendation. I have not used that library.
Related
I like to load a svg into my qooxdoo gui, link some event handlers to svg elements (pointerdown, pointermove) and manipulate the svg elements from outside (style.transform=rotate). So I need access to the svg elements from the qooxdoo level. But how to embed the svg into qooxdoo not only as an image?
Is there support for handling a svg in qooxdoo?
I found a way how to embed svg in html5. Here you can embed the svg dom-structure by the tag: object. This is what I am looking for in qooxdoo.
And I found a qooxdoo svg-contrib; But this is some years old (2011) and I am wondering if it is already integrated into qooxdoo or if it is still the best starting point?
D3.js is a good module to manipulate svg objects in Javascript. However, I'm not sure whether you can integrate the module to qooxdoo framework.
Having used snap.svg, svg.js, raphael and fabric.js for interactive as well as graphic production stuff (engineering data to PDF reports) I'm currently relying on fabric.js only, allowing for easy dynamic loading of SVG, a pretty good transition to HTML5 canvas and with that a good level of possible interaction with controls on the page. All of these libraries come with quite a learning curve, but using Inkscape as the basic SVG templating tool and fabric.js as the rendering library lets you streamline the production process quite nicely.
I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?
Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.
You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.
The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.
I'm trying to render these files http://registro.soveci.com/dom_izq.svg and http://registro.soveci.com/dom_der.svg with RaphaelJS and raphael-svg-import, but somehow a path appears misplaced on the screen. If you view it with a standard compliant browser, you can see the path being rendered right, so it must be a problem with raphael-svg-import.
Can you provide me some hints??? (I'm new to SVG)
I have been experimenting with SVG for a little bit now and it's a bit of a coincidence because I just finished playing with that plugin today.
The url to a demo I have there also contains zip files in the documentation so you could experiment with these in Inkscape or any SVG editor and see if you cannot configure them to something in your project.
For what ever reason this plugin "likes" some SVG's but not others so maybe you could adapt one of the SVGs in the zip and it will probably work.
The authors know the plugin does not always work but it is gradually improving and even now I think it's possible to write compatible SVG's if you tinker with them.
If you need a facility to convert certain SVG's just to javascript you could use this.
After not finding anything I like with regards to this question I'm looking to build my own in-browser graph editor. As a first step, I'm looking for a Closure based library to draw objects on a canvas where so I can do things like update an objects definition and trigger a redraw without to much complication.
From a breef look this lib looks to do what I want but I see nothing indicating that it's intended to work with closure (and in fact seems to be targeted at jQuery).
It seems the question is to spesific: the standard closure libs contain goog.graphics supporting general drawing primitives that white washes over the difference between canvas, SVG and VML to give a general retained graphics mode effect via each. goog.graphics.createGraphics selects the 'best' implementation based on what platform is being used.
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).