how can I save a dom as svg file using html2canvas ?
For downlading as png , I've done something like below :
html2canvas(document.querySelector('#demo')).then(function(canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
How can I achieve similar result to save it as svg file ?
You don't.
The reason you can export to png/jpg/etc is that the canvas is a pixel graphic presentation layer, so for convenience it knows how to generate the browser-supported image types that use embedded bitmaps.
If you want vector graphics instead, then you'll need to actually draw vectors, and that means not relying on the canvas APIs. You either roll your own vector drawing instruction set (directly generating SVG yourself, or rasterizing objects to the canvas purely as presentation layer), which I would recommend against, or you use one of several vector graphics packages already out there like Paper.js, Three.js, Rafael, and so forth.
Related
I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.
I can create a transparent image with several images using gimp and use http://www.spritecow.com/ to get the image coordinates for sprite.
what is the best way to create svg sprite ? I have several svgs - and I would like to create a single svg sprite image and then get the coordinate to create the individual classes.
I am on windows machines - so I am hoping for a online solution.
thanks
may I suggest that you look at icomoon.com/app. The service is very similar to your spritecow.
The better part is you take individual svg and upload it - and then download the sprite.
I am using KineticJS to build a scene where I want to add some vector drawings to the canvas, and I have provided with lots of Adobe Illustrator files which contain shapes to add to the scene.
How can I convert these into the right Path properties to draw a shape in my KineticJS scene?
I saw this question: Loading SVG in KineticJS but they are asking about specifically SVG files where I have access to the RAW *.ai files.
A Caveat to my answer: You need access to Adobe Illustrator...the free trial version will work!
Check out Mike Swanson's AI converter that creates canvas drawings.
If any .ai sub-element can't be converted to context draws, his converter even creates a raster image for that one element while still creating what can be context drawn.
It's updated for CS6 (the latest AI version).
http://blog.mikeswanson.com/post/29634279264/ai2canvas
Is it possible to convert a HTML 5 canvas drawing into a file readable by 3D printers (e.g., .ply, .sty)?
We couldn't find any libraries that exist ... does anyone know of any?
The drawing on a HTML5 canvas is a pixel based images. 3D printers expect vector based formats. So technically you'd have to vectorize the image first.
Since drawing on a HTML5 canvas requires to perform drawing operations, the straightforward way was to log the drawing operations to turn those into a vector based format.
Another method would be not using a HTML5 canvas, but creating a SVG DOM. SVG by it's nature is a vector format; also a lot of the tools used to prepare a 3D printing control file either accept SVG directly, or formats for which SVG convertors exist for.
Is it possible to export Kinetic JS object to SVG?
Or workaround is to convert Kintetic JS's canvas to SVG.
EDIT:
The best is to use fabricJS since it supports canvas to SVG rendering while working with fabric objects.
I accepted Phrogz's answer since it also does conversion canvas to svg without using some other library for drawing on canvas.
EDIT 2: OK, i messed up, Phrogz's library is wrapper around canvas element so you use it's methods to draw on canvas (I thought that it just 'listens' on canvas and creates SVG paths). So the best solution is fabricJS definitely.
The best solution is to use Fabric.js!
I've created an alpha version of a library that allows you to extend an HTML5 Canvas Context such that it tracks all vector drawing commands and stores them as an array SVG elements in a ctx.svgObjects property of the context.
You can see the library in action here: http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
The demo turns on recording, draws a few shapes to the HTML5 Canvas, and then appends the 'recorded' SVG objects to an SVG container next door.
In general the library:
Keeps track of the current context transformation via an SVGMatrix object. (This is because the HTML5 Context api lets you set the current transform to a matrix, but does not let you get the current matrix.) It does this by intercepting calls like translate() and rotate() and updating the matrix accordingly.
Intercepts beginPath() and creates a new SVG Path element, and then intercepts further commands like moveTo() and lineTo() in order to add the equivalent path commands to the SVG path.
Note: not all path commands are supported or tested in the library at the time of this writing.
Intercepts fill() and stroke() to add a copy of the current SVG <path> to the svgObjects array, setting the current transformation matrix, fill and stroke styles.
Note: not all stroke styles (lineCap, lineJoin, miterLimit) are supported as of this writing.
Note: calling fill() followed by stroke() creates two separate SVG elements; there is no optimization to differentiate this specific case from stroke/fill, or changing the transform or path between calls.
Intercepts fillRect() and strokeRect() to create an SVG <rect> element.
More work could be done on this library to flesh out all the commands (not just path commands, but also things like fillText()). But it's not something that I personally need, so I'm not inclined to spend hours carrying it over the finish line.
basicly you can convert the canvas to base64 png and then put it on svg
maybe this could help you
http://svgkit.sourceforge.net/tests/canvas_tests.html