Scalable vector images in Tableau
Or, how to make that pretty #popviz with responsive web design.
Proof of Concept here. (You can right click for the source code).
First, download Inkscape.
Import your raster image: PNG, JPEG, BMP.
I’ll use this an example: (or you could scratch build the vector in Inkscape)
(Tableau Software logo, 1024x1024px)
In Inkscape, click the edit -> select all. Then path -> trace path. Check the options you want (colors, smooth, stack scans.). Then file -> save as -> plain svg.
Now edit the SVG in a text editor, such as notepad. Remove the height and width properties:
Then host the svg file on a website using FTP (perhaps using Filezilla).
In Tableau, add a web object, adding the hyperlink:
Then publish to your server (i’m using Tableau Public for my example).
I’m using the Tableau JavaScript API in my webpage: I’ve set the dashboard as automatic, and styled the tableauPlaceholder </div> element 100% width, and 100% of the view-port height. This is an optional step that I used primarily to show the vector image scaling in the browser.
You should end up with something like this:
