Using bonsaijs, is there a way to export the stage (or entire svg) to a png file ?
I saw an option for importing a svg, but couldn't find an easy way to export it. Any leads on this would be appreciated ?
No, there isn't any API provided to export SVG to PNG.
Nevertheless you could either create your own exporter that draws the whole SVG context to a Canvas context and exports that as PNG or instead of storing a static image and losing all movie informations and interactivity you could possibly store the whole Bonsai-Script for that specific user.
Related
Everyone seems to recommend utilizing the Pixi Loader to load textures together, get updates on progress, etc. This works great so far.
However, I am wondering if there is a way to load a texture from an inline SVG using the Pixi Loader? Any insights would be appreciated.
(Note: I am looking to load the SVG as a texture, so I understand it will become a raster image, I am not looking for scalability features of SVG, but to simply reduce the amount of web requests needed by utilizing inline SVG images)
The only way I was able to get this to work, was to make the URL passed into the loader be a base64 encoded dataURI. Everything after "base64," is just a base64 encoded svg. Example:
let svgTest = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5..."
Loader.shared.add('SvgTest',svgTest);
Loader.shared.load((loader, resources) => {
//callback, do what you wish
});
I want user to let download the charts/graphs as PNG image or JPEG image. Is it possible in NVD3.js to allow user to download in this format?
i don't think nvd3 has the function built in and i have very similar requirement and "example of how to export a png directly from an svg" solved my problem (internally it adopted svg-crowbar code). basically, you need to draw the svg to a canvas then export the image to png, and "explicitly set css style" for all svg element is the caveat to make the exported image like original.
I added a data layer on my map and I'm using an svg image to represent the markers.
#points {
point-file: url(marker2.svg);
marker-width:10;
marker-fill:#fff;
}
since it's an SVG image, I'm trying to customize the fill color but it is not working. marker-fill seems to only work on the markers they provide, but not on SVG images. Is this possible to do using TileMill/Mapbox ? Is it possible with the JS API ?
UPDATE
From http://mapbox.com/blog/announcing-tilemill-0.10.0/, it looks like using marker-fill should have done the trick but that's not the case. Could the problem be with my svg image ?
Solved it, looks like if you're looking to customize the marker, you need
marker-file: url(marker2.svg); instead of point-file: url(marker2.svg);
Has anyone in this vast space has ever had the luck to successfully create a PDF with an embedded SVG on an HTML? I've been receiving segmentation fault all the time.
Or perhaps is there any other way to embed an SVG into an HTML file and then export it to PDF instead of wkhtmltopdf?
I had similar problem. Seems like javascript embedded in SVG image can cause segmentation fault.
I was generating SVG graphs using pygal Python module. To successfully generate PDF from HTML with SVG graphs I had to do several things:
Remove reference to javascript. (In case of pygal add js=() key to a graph constructor).
Specify image size in svg tag, like
<svg ... width="300" height="200">
(In case of pygal use explicit_size keywoard)
Embed SVG image into img tag in base64 encoded form, like
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">
I was using 11th version of wkhtmltopdf.
If this fix doesn't work for others, here's what worked for me with chartist.js, and wkhtmltopdf 0.12.2.1 under Ubuntu 64. (Credit to Panokev)
Add this to your javascript before all other JS.
{
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
Definitively set width style for chart div, for example - style="width:950px;"
Right .. I managed to pull it off finally ... all needed was a bit of treatment on the original eps file. I opened the file with illustrator and chose to "flatten transparency" .. maybe what it does was to flatten the many layers of the file or something .. then save as svg .. and it rendered nicely in the PDF ..
Hopefully this helps if anyone out there would have the same issue as I did. Thank you! :D
We fixed this problem by adding a width and height attribute to the svg besides the viewbox attribute.
I'm looking for an app or a script (web service) that can clean up SVG files, by that I mean removing possible copious data such as metadata. When creating the SVG file I've used standard settings in Adobe Illustrator. Upon export the paths look like this -
M 678.567,252.999 c-0.546-1.307-3.898-3.118-5.005-4.007c-1.596-1.276-1.42-3.375-3.09-4.381c-4.297-2.571-9.604-3.125-13.746-5.916
While I need them be cleaned up and reordered in way like this -
M 600.375,693.40625 598.75,695.03125 596.125,694.34375 594.57422,700.50391 592.25,700.16406 591.875,702.59375 593.875,705.53125 592.75,706.40625 593.9375,710.53125 592.75,710.65625 590.3125,712.90625 589,711.96875 587.1875,712.90625 586.8125,711.40625 584.125,710.53125 581.9375,711.03125
Fairly new to working with SVG. What I need these paths for is drawing up a map with Raphael JS and it seems only to take the paths in that particular way.
I tried Scour (http://www.codedread.com/scour/) but with no success unfortunately (the web service isn't working and there were problems running the procedure with Terminal).
To me it looks like Raphaël should support all of the path syntax in SVG 1.1.
Anyway, ReadySetRaphael.com is a site that provides conversion of a subset of SVG to Raphaël code.
Convert .ttf (or other format) to .svg: https://everythingfonts.com/ttf-to-svg .
Convert the svg. to icons separated icomoon.io/app/#/select,
-Import icons'
-Select the icons that you want export
-Click en 'Generate SVG, PNG, PDF'