What is the proper way to render Vega Lite charts as SVG?
I've been trying to render Vega Lite as svg to provide nicer and sharper responsive charts, an option that I know is available off the bat for Vega.
This embed setup was tested after some research:
vegaEmbed(chartDivId, chart, myTooltip).then( function(result) {
var view = result.view;
view.run();
view.logLevel(vega.None);
view.renderer('svg');//<-- render as SVG
}).catch(console.error);
Which actually did convert my charts from pixel image to SVG (tested zooming in and they preserved resolution). However, they got misaligned (see images below).
Yes, using Vega Embed like you are, but it's part of the options:
vegaEmbed(chartDivId, chart, {renderer: 'svg'})
See https://github.com/vega/vega-embed#options for details.
Related
We are building a web app where the user can make a design by using fabric.js and at the end he should receive a pdf file with his work.
At first, we tried to use JSPDF because it was prefered to have a cliente-side solution. However by doing pdf.addImage(canvas.toDataURL(),...) we are rasterizing the design.
In second place, we tried server side solution using WKHTMLTOPDF, sending canvas.toSVG(), but there are some issues with fonts and shapes rendering.
The designs are complex as they can have text, shapes, images and svg.
We also tried INKSCAPE (inkscape --without-gui --export-pdf ...), MPDF and MUPDF without good results. IMAGEMAGICK is not a solution has it also rasterize the design.
The main goal is to get a vector pdf, where it's possible to increase size and where the elements of the design are selectable, and if possible that pdf should be ready to print (300 dpi and cmyk)
Yes its possible using TCPDF library.
Please check this ImageSVG api for more information for converting SVG to PDF.
https://tcpdf.org/examples/example_058/
Export the canvas to svg and use pdflib to make the pdf.
You can find an exemple here:https://www.pdflib.com/pdflib-cookbook/graphics/starter-svg/
I'm trying to convert a pdf figure to svg so I can edit some details with Inkscape. The problem I have is that the import changes slightly through some sort of smoothing.
In particular, this is the original figure:
And this is the figure after converting to SVG
This is the output of pdf2svg, which is exactly the same I get if I use Inkscape directly.
I attach a link where you can get both files.
https://www.dropbox.com/s/domxcc8pncyouy6/images.tar.gz?dl=0
Do you know a workaround to this issue?
Without seeing the SVG it is hard to tell for sure. However it looks like the "heat map" portion of your PDF/SVG may be a low resolution bitmap that is being enlarged in the page.
By default, SVG renderers will use interpolation when enlarging an image. This gives the image a smoothed/blurry look at large scales.
You could try locating the <image> element in your SVG and adding the attribute image-rendering="pixelated" to the <image> tag. Some browsers support that option and will scale the image using the nearest-neighbour scaling method.
Otherwise you may need to extract the image from the PDF or SVG; resample it at a higher (eg. 4x or 8x) resolution; then reinsert it back into the file.
Find the image in the SVG file (<image id="image5" .../>
Extract the Base64 encoded image from the DataURI. And decode it using a Base64 decoder.
Multiply the image resolution using an editor, cusch as Photoshop or Gimp.
Encode the file back to Base64
Update that <image> element with the new Base64.
I'm trying to insert some SVG images in a PDF using TCPDF with the method TCPDF::ImageSVG, but when I try this I get a white space.
If I try to enable TCPDF::setRasterizeVectorImages the image shows in the PDF file, but it is rasterized of course and so its quality is not good.
Do you have any idea?
Thank you very much for your help!
Unfortunately, TCPDF's SVG handling is quite limited, and the cause of your issue depends on the SVG you are trying to use. Later versions of TCPDF support more SVG functionality, so if you haven't done so, try using a later version of TCPDF.
If an update doesn't resolve the issue, and you're forced to use raster images, you can improve quality at the cost of file size. You can do this by rasterizing them at a high DPI yourself outside of TCPDF. Once you've done this, take your new high-resolution raster image and add it to your PDF with the Image method like any other raster image. At work we usually rasterize to 300dpi, but your application may call for more or less.
If your image gets added to the PDF far larger on the page than you expected, specify at least one of the dimensions so TCPDF knows how much of the page you're intending the image to use.
I need help with exporting dojo charts to pdf. How could i export dojo chart like this one to pdf or some other vector formats? i tried to use this but i can't make it work. Any vector format (ie. svg) works for me! also, i tried to use this example, but don't know what to do.
Can somebody help me!!!
Thanks!
I too was trying to export a dojo chart to pdf.
I tried to use toSvg function of dojox gfx utils then sent the svg stream to server and used apache's Batik for generating the image or pdf.
This works great, except that i am not able export the chart labels.
I tried to do this, with the chart you had shared (http://www.hiim.unizg.hr/mihovil/dojo/dojo.html) and it export had worked well exept the labels again.
Let me know, the exact problem you are seeing.
Thanks,
Srilatha.
You have to set the property of the dojox chart htmlLabels to false and then you can get the svg with:
var def = dojox.gfx.utils.toSvg(chart.surface);
I just want to know how to convert Google Gauge Chart in PDF Format.
Is there any way to get a url for gauge chart like bar chart and pie chart, which I have sent and received respective gauge chart in PDF format.
Yeah you can try to convert the google chart to a canvas and then get png image data from that, this will allow you to send png image data to libraries such as FPDF in which you can save the image as a PDF.
Google charts are created using SVG ... to convert SVG to canvas you can use the library canvg. It works like canvg(yourCanvas, yourSVG) then use var PNGimg = canvas.toDataURL("image/png");
This should pretty much do the trick
There isn't a simple way to do this. Since visualization charts with google are made with javascript you are pretty much helpless if you want it as an image.