Is there a way to restrict paper.js to only the SVG Tiny standard? The current output is more verbose than necessary and some of our downstream processes only allow SVG Tiny.
No, there is no built-in way to do this from Paper.js.
The SVG export options are listed here, maybe some of them will help you getting closer to the expected format.
But you will have to transform the output yourself.
Related
I need to create graphics for documentation, e.g. different functions of soft-keys or pin assignments for embedded systems with different firmware. My first thought was to use an SVG template, i.e. comfortably create the basic graphic with e.g. Inkscape and then use some XML library to set/replace respective strings for labels automatically. The SVG then can be embedded or rendered to any other format required.
I would like to know other ideas, or if there is some sort of standard method of doing this.
SVG is just XML, hence is fairly easy to generate.
You can easily generate SVG using XSLT: http://www.carto.net/papers/svg/samples/xslt/
Many programming languages provide efficient APIs for manipulating XML, which can also be applied to generate SVG. For example, I have had good success using Python and the lxml library.
I am trying to draw this svg of europe using raphael. For each path in the svg, I've parsed it and do: r.path([countrypath]). This works, but the problem is that it is gigantic. For example, some of the paths look like M 11689.234, 6005.2561... It isn't even coming close to fitting on a 500x500 canvas. How do I resize this? Raphael's scale/translate don't seem to work, or I don't know how to use it. I noticed in the SVG each path has transform="translate(5.875e-4,7.538462e-5)" Do I need to somehow change the viewBox? Or change the svg path's somehow before it touches Raphael?
you can use scale(Xtimes,Ytimes,centreX,centreY)
where Xtimes,Ytimes are the proportion reduction if you select 0.2 the images would be reduced to 1/5th
and
centreX, centreY are relative coordinates where you should select 0,0 so that all paths/parts of svg are scaled down uniformly and relatively
if you select scale(0.2,0.2,0,0) your image would be properly reduced to 1/5th
I actual picked out quite a large SVG of the world yesterday and fed it through the SVGTOHTML converter.
You will find the tool and associated info #
http://www.irunmywebsite.com/raphael/svgsource.php
I set up a whole load of resources for Raphael #
http://www.irunmywebsite.com/raphael/raphaelsource.php
Amongst these you will find the world map wrapped in the scale pluton provided by Zeven!
The 20minute exercise delivered this...
http://www.irunmywebsite.com/raphael/colourmap2.php
Hopefully this will help you or someone with a similar problem in the future.
Also note that you can simplify paths in SVG editors as well as scale them before you put them in the SVGTOHTML converter.
Quite often maps can be drawn to extreme detail but simplifying them will greatly reduce path length.
You have two options either use what I did, use the .transform("transform string") to scale the paths, the transform string can be sww,hh,xx,yy where ww and hh is by how much you want to scale the path.
.transform("s0.25,0.25,0,0");
You can find an EXAMPLE HERE or jsfiddle HERE.
Or use
paper.scaleAll(n);
where n is the amount by you want to scale the whole paper by. First create the path in the page and then scale the paper object by maybe half
paper.scaleAll(0.5);
You can find the library and examples for the Scale.Raphaeljs library in the link below:
Scale Raphael library
Translating by such a small amount seems a bit wasteful, it's ~0 anyway, I doubt you'd see much of a difference if you stripped off the transform attributes that look like that.
Yes, changing the viewBox could make it fit to whatever you wanted in all viewers that support SVG, but raphael itself doesn't support viewBox (you'd have to provide some VML fallback yourself).
Either preprocess the path data to fit your particular use (probably a good idea anyway, it always helps to keep the filesize down, wikipedia maps are usually quite large) or use raphael's scale function to scale the paths to a proper size.
Update: Raphaël v2.0 and later does support viewBox (via the setViewBox method).
You can use the Raphael attribute 'translation', which takes an x,y delta. ie:
r.path([countryPath]).attr({translation:'-11689, -6005'});
To make it more reusable for multiple paths, you could parse the x and y values from the M in your svg path. When I did this, it turned out that I didn't want my path to be exactly on the 0,0 since that sent it over the canvas as well -- might take some adjustment depending on the height and width of your element.
I'm using RaphaelJS to implement some event-heavy SVG. I have a set of paths on a canvas, and a point. How can I get all the paths that cross that point? Relatively new at this, but I assumed this would be trivial and I can't find anything about it.
If it helps, the specific implementation is trying to detect on the mousedown event if I've clicked on a path so I can rotate it around another point onmousemove.
Unfortunately, I'm not aware of a portable (supporting both the SVG and VML backends of raphael) way to do this without implementing the math yourself. However, for browsers that support SVG, the SVG spec includes built-in support for exactly what you are requesting:
http://www.w3.org/TR/SVG/struct.html#_svg_SVGSVGElement__getIntersectionList
Vector is math. Find the equations of the lines and see if the point fulfill the equation.
It seems like SVG has be "deprecated" in Flex 4 in favor of Adobe's FXG. What can I do if I have a bunch of SVG graphics that I want to keep using. Is there something reliable to convert SVG to FXG? Are they in feature parity? Is there a converter out there that won't cost me $1500?
Inkscape also exports fxg now (see comments #24 and #42), but with some limitations.
It uses simple XSLT as extension, so you can write simple script in any language that supports XML transformations to produce FXG from your SVG's.
Actually if you are programming in flex 4, check out the spark path primitive. For path data it uses a string that has the same syntax as an svg path. You just have to parse it out but actionscript fully supports regular expressions so it shouldn't be too hard to load an svg as a text/xml file with urlrequest and parse out the path data for your primitives.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/Path.html
Path Objects only support transforms on their entire path so if you want to manipulate path data in real time you will just have to parse the data in a data structure and convert to a string for display.
It used to be that if you wanted to display an svg path with the actionscript 3.0 graphics library you would have to approximate the cubic berzier with quadratic berziers upon display but the spark primitive does do away with that by accepting path data in cubic form-- although even the spark primitives, when they draw themselves out, do seem to be approximations that are reaaallly close.
Depends how much work you want to do to interpret the svg data. If you want to do things like implement styles, masks/clipping and blur effects, the functionality is there in flex 4 with path and all of it's properties but implementing it from the data is going to require work.
Most of the svg graphical elements(shapes and text) can be converted to path data in programs like inkscape. Even so, actionscript has draw method geomitries that most likely support the basic shapes.
Also transforms on groups of elements will have to be parsed if you want to use that as well, or you can just not use groups, they are rather pointless when you aren't manipulating them.
I read while Googling that SVG was "dead". Although I disagree, could anyone tell me more/future vector based format to represent 2d/3d graphics? What about VML? What format should I use to represent 2D and 3D graphics on Web?
I playing around with graphics on web and I would like to know if I'm working with an obsolete technology.
Microsoft is supporting SVG in IE9, and gave a detailed explanation of why they were doing it on the IE blog:
http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx
SVG's main advantage is that it becomes part of the DOM, so you can use CSS to style it and javascript to modify it. Canvas, by contrast, must redraw every frame completely. This makes canvas suited to spectrum analyzers, video processing, fast-paced games, and other non-gradual animations. SVG is better suited for gradual animations.
As far as 3D is concerned, the future is WebGL, a thin shim over OpenGL ES, but it's far off. Microsoft has not committed to supporting it, and that means it's not going to be in IE9. Maybe IE10, maybe not.
If you do use SVG, I recommend using svgweb to abstract away the browser differences (falls back to a flash applet on outdated browsers).
This post is rather late... but I think it is worth re-addressing, since your question has popped up again with all the html5 talk.
SVG is a vector drawing format that also supports animation, timing, and Javascript DOM support. In other words, it is a standalone format for static and dynamic vector graphics; you might say it is a web-focused (or screen-focused) alternative to EPS/PDF. The html5 canvas tag is not a format but a way to draw (static images) to the screen with Javascript — that is all; there is no competition between it and SVG, as they have entirely different purposes.
Most other vector "formats" involve plugins (Flash) or hardware support (webGL). Ironically, the VML format you mentioned is now deprecated in favor of SVG.
To answer your question: SVG is now the standard vector format for the web. Hopefully, in the near future, we will see it being used for video/animation as well.
You can try the Raphaël JavaScript Library.
It is easy to implement and provides the same UI features as SVG (and more!).
If it is SVG you are after the best way to go is svg.js. It supports SVG better and it is a fraction of the size (4.5k gzipped) of Raphaël (31k gzipped). It also has a very intuitive syntax.
All major browsers including ie9, firefox, safari and chrome are starting to supporting svg as part of the upcoming html5 standard. I wouldn't call that "dead"
2D: SVG
3D: X3DOM or webGL directly