diff --git a/README.md b/README.md
index a7bc0e51..cfed2f39 100644
--- a/README.md
+++ b/README.md
@@ -190,7 +190,7 @@ var opt = {
| `height` | Number | Sets the view height in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_height) for details. Note that Vega-Lite overrides this option. |
| `padding` | Number / Object | Sets the view padding in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_padding) for details. |
| `actions` | Boolean / Object | Determines if action links ("Export as PNG/SVG", "View Source", "View Vega" (only for Vega-Lite), "Open in Vega Editor") are included with the embedded view. If the value is `true`, all action links will be shown and none if the value is `false`. This property can take a key-value mapping object that maps keys (`export`, `source`, `compiled`, `editor`) to boolean values for determining if each action link should be shown. By default, `export`, `source`, and `editor` are true and `compiled` is false. These defaults can be overridden: for example, if `actions` is `{export: false, source: true}`, the embedded visualization will have two links – "View Source" and "Open in Vega Editor". The `export` property can take a key-value mapping object that maps keys (svg, png) to boolean values for determining if each export action link should be shown. By default, `svg` and `png` are true. |
-| `scaleFactor` | Number | The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image. |
+| `scaleFactor` | Number / Object | _Number_: The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image.
_Object_: The different multipliers for each format (`{ svg: , png: }`). If one of the formats is omitted, the default value is used. |
| `editorUrl` | String | The URL at which to open embedded Vega specs in a Vega editor. Defaults to `"http://vega.github.io/editor/"`. Internally, Vega-Embed uses [HTML5 postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to pass the specification information to the editor. |
| `sourceHeader` | String | HTML to inject into the `head` tag of the page generated by the "View Source" and "View Vega" action link. For example, this can be used to add code for [syntax highlighting](https://highlightjs.org/). |
| `sourceFooter` | String | HTML to inject into the end of the page generated by the "View Source" and "View Vega" action link. The text will be added immediately before the closing `body` tag. |
diff --git a/src/embed.ts b/src/embed.ts
index ce3ad274..b9329ba7 100644
--- a/src/embed.ts
+++ b/src/embed.ts
@@ -8,6 +8,7 @@ import {
Config as VgConfig,
EncodeEntryName,
isBoolean,
+ isObject,
isString,
Loader,
LoaderOptions,
@@ -81,7 +82,7 @@ export interface EmbedOptions {
width?: number;
height?: number;
padding?: number | {left?: number; right?: number; top?: number; bottom?: number};
- scaleFactor?: number;
+ scaleFactor?: number | {svg?: number; png?: number};
config?: S | Config;
sourceHeader?: string;
sourceFooter?: string;
@@ -462,6 +463,7 @@ async function _embed(
if (actions === true || actions.export === true || (actions.export as {svg?: boolean; png?: boolean})[ext]) {
const i18nExportAction = (i18n as {[key: string]: string})[`${ext.toUpperCase()}_ACTION`];
const exportLink = document.createElement('a');
+ const scaleFactor = isObject(opts.scaleFactor) ? opts.scaleFactor[ext] : opts.scaleFactor;
exportLink.text = i18nExportAction;
exportLink.href = '#';
@@ -470,7 +472,7 @@ async function _embed(
// add link on mousedown so that it's correct when the click happens
exportLink.addEventListener('mousedown', async function (this, e) {
e.preventDefault();
- const url = await view.toImageURL(ext, opts.scaleFactor);
+ const url = await view.toImageURL(ext, scaleFactor);
this.href = url;
});
diff --git a/test-scalefactor.html b/test-scalefactor.html
new file mode 100644
index 00000000..2cab2816
--- /dev/null
+++ b/test-scalefactor.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+ Vega-Embed for Vega-Lite
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/embed.test.ts b/test/embed.test.ts
index 05948eee..f7610bd8 100644
--- a/test/embed.test.ts
+++ b/test/embed.test.ts
@@ -476,3 +476,11 @@ test('cannot set style via usermeta', async () => {
expect(result).toBeTruthy();
expect(result.embedOptions.defaultStyle).toBe(false);
});
+
+test.each([5, {svg: 2, png: 5}, {svg: 2}, {png: 5}])('can set scaleFactor', async (scaleFactor) => {
+ const el = document.createElement('div');
+ const result = await embed(el, vlSpec, {
+ scaleFactor,
+ });
+ expect(result).toBeTruthy();
+});