search

Quartz / Chartbuilder

A front-end charting application that facilitates easy creation of simple beautiful charts
http://quartz.github.io/Chartbuilder
MIT License
2.1k stars 354 forks source link

Multiple font faces prevent SVGs from downloading #255

Closed duner closed 7 years ago

duner commented 7 years ago

Hey y'all! I've run into a bug where including multiple font faces in the fonts.styl file prevents the SVG from downloading properly. If I comment out all but one of the fonts, the download button works. I tried limiting the file formats I was using in the font declarations to just use woff2 (which is what your branch does) and that didn't seem to work. I also noticed there are some font related things in the ChartExport.jsx file in the SVG function that might be related but I wasn't entirely sure.

Our fork lives here: http://github.com/axioscode/Chartbuilder

Thanks for the help!

duner commented 7 years ago

Also: in Chrome the error manifests as "Download: Failed - Network Error"; in Safari, Chartbuilder is able to render the SVG, but then the browser becomes unresponsive.

Is the problem that too many fonts (I think we're using three different weights) in the chart causes the file to get to big? Is it something to do with using external font resources? Is it something to do with the fontFamilyRemap that's happening in the downloadSVG function in ChartExport.jsx? What's ultimately confusing me on this is that everything works as expected when only using one font, but breaks when using more than one font.

nsonnad commented 7 years ago

I believe you are running up against the upper size limits of a base64 url. In order to export the SVG as perfectly as possible we have to inline all of them, and it looks like a data url might have a limit of 1 or 2 mb, depending on the browser.

Since this is just for SVG export (and not image), you could either find a way to disable saveSvgAsPng's inlining or possibly replace the font declarations in the markup that is passed to downloadSVG in ChartExport.

Closing since we don't really have a fix for this, as it's a browser limitation