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.
Related
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.
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
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.
What cross-browser JavaScript SVG library will allow me to display and interact with pre-made SVG images.
I know of these libraries:
Raphaël: I'm currently using this along with a SVG loading plugin. But that plugin does not support Inkscape or Adobe Illustrator SVGs (i.e. most SVGs).
cang: This library looks promising, but it requires <canvas> support, which IE doesn't have natively.
svgweb: Another more-promising library. It requires Flash, but most IE users have Flash.
jQuery SVG: It seems to be able to load SVG images, but development seems to have died. And it requires me to use a modified version of jQuery 1.3.
I'm basically trying to make chunks of arbitrary images "selectable".
Any help would be greatly appreciated.
Raphaël does support importing of Illustrator SVGs, through the use of this great plugin. All you have to do is save your ai file as an SVG, open it up using a text editor, copy out the code and import it with the plugin. Works great, except : only supports "path" objects, no text, no gradients, no shadows...
I'm using http://excanvas.sourceforge.net/ for Canvas support in IE and Cang for SVG suport using Canvas.
What you could do is use a combo of cang and svgweb, you could check to see if the browser allows canvases, and if so, load cang and use it. Otherwise check if they have flash, and if so, use svgweb. If they have neither, then tell them to upgrade their browser.
You could read http://ejohn.org/blog/future-proofing-javascript-libraries/ if you are unsure about javascript feature detection.
I'd be tempted to make use of Google Chrome Frame (an IE plug-in). This will save you maintaining two sets of code (one for IE users, another for regular browser users). Adding the following meta-tag to your page will enable SVG to render in IE (via GCF):
<meta http-equiv="X-UA-Compatible" content="chrome=1">
See here for instructions how to detect, and potentially prompt the user to install GCF.
The best solution I've found is to use Raphael along with this tool, which allows you to convert SVG files (generated by Illustrator, in my case) to Raphael code almost as-is. And since Raphael is IE6+ - you could easily be crossbrowsy with some effort on your part.
Here is my example of what can be achieved with a combination of these two things.
I wanted to build a product customizer similar to http://www.getuncommon.com. But instead of Flash, I will utilize HTML5 canvas and Javascript.
Is there a library which I can use to create and achieve similar editor/product customizer as Uncommon?
I did look at jQuery UI but it is seem more focused on interface than creating my own editor.
Take a look at Fabric.js canvas library.
We're using it in production for design editor on printio.ru
I did something similar to this a while ago.
I used JQuery and Raphael JS. Raphael uses VML in Internet Explorer and SVG and Canvas in other browsers making it a very good cross-browser compatible option.
A good demo of a project using Raphael can be found here.
I used a lot of code from this demo to develop my own tool.
Hope that helps.
I used kineticjs to create an E-Card editor. It was a great experience using the library.