How to create or download high resolution figure using Vega-Lite rather than SVG?

Community Help
1

How to create or download high resolution figure using Vega-Lite rather than SVG? Because when I’m using VL, it only allow me to download PNG. Thus I’m wondering how to increase the resolution or download high resolution figure when I using Vega-Lite? Thank you very much in advance.

1 Like
2

The default renderer for Vega Lite is canvas; that’s why you can only download the image as PNG. If you’d like to download as SVG, simply specify the renderer to be SVG. To do so, simply use an option in your final render statement, like so:

  .render({renderer: 'svg'});
4 Likes
3

Dear mcmcclur,

I’ve tried your method, the svg can be downloaded, but when I open the svg file, a error come out:

“This page contains the following errors:
error on line 1 at column 226: Attribute xmlns redefined
Below is a rendering of the page up to the first error.”

Have you met this issue before?
Thank you !

4

No - Can you point me to a notebook with a graphic you’re trying to download as SVG?

5

Thank you for your reply. The link is attached:

https://observablehq.com/d/63b721df33ccc73c

all the figures here met the same issue

6

Well that is odd and definitely looks like a bug! As a short term fix, note that the SVG does download and it’s first few lines looks like so:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1" class="marks" width="1120" height="91" 
  viewBox="0 0 1120 91" style="background-color: white;" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

Indeed, the xmlns and smlns:xlink attributes are are both duplicated. You can just delete those. That’s how I grabbed this SVG for example.

Hope that helps!

7

Sorry I’m a new learner and not familiar with JS, etc. Could you please give me a little more details, like how could I delete the duplicated lines? Is it in the page source? Thank you !

8

When you choose the “Download SVG” option, a file does download with a name like “heatmapF_P.svg”. That file is a simple text file that you can open in a text editor on your computer. The lines that I refer to in my previous post are lines in that file so that’s the file you need to edit.

9

Thanks, I’ve tried, it works! Thank you very much!

1 Like
10

… which may originate in Vega. Vega uses setAttribute to set the first three attributes (code, metadata), while Observable uses .setAttributeNS() in its conversion code:

image
image1128×618 103 KB

… so the SVG ends up with two distinct xmlns attributes. Not sure who’s right or wrong here, but @mbostock may want to look into it.

Edit: Things can get quite bizarre:

image
image1288×768 102 KB

2 Likes
11

I honestly don’t know where the problem originates. If you enter something like the following:

heatmapF_P.querySelector('svg').outerHTML

you actually get correctly formed SVG. That suggests to me that the problem arises in “Download SVG” process. Again, though, I’m definitely certain that I definitely don’t know for sure.

1 Like