This technique is absolutely suitable not only for Raphaël, but for any SVG-generating library. In case your browser does not support this image, here’s a PNG version. Here is the resulting image, in case you’re curious: On the server, we just cache the result and store or process it any way we’d like. Var paper = Raphael(svgContainer, 640, 480) Var svgContainer = document.getElementById("svg") Let’s start with simple HTML as a boilerplate: The easiest way to put the generated SVG on the server is just to send the generated data with an AJAX request when it’s complete.īelow is a simple example with Raphaël.js and jQuery. We do not want to recreate the same logic twice, because that would lead to bugs, integration problems and a burdensome need for support. The majority of mature back-end languages have libraries for generating SVG. This solution is possible, just not practical. Solutions Simply Recreate All Logic on the Server By generating the SVG on the server, we can cache the result and then deliver the cached SVG when the next user wants it. Complex visualization logic can easily hang the browser for multiple seconds. To enable a graphic to be displayed on another website.We all love charts in our emails, and we prefer Retina-ready ones. To enable a graphic to inserted in an email.If we don’t want to scare the user with this “unknown” format, then we should convert the SVG to a PNG or PDF. To enable the user to download a graphic.So the right question is, how do we continue generating SVG with JavaScript while also putting the results of the generation on the server? The question is a bit long, but here are the reasons why we should answer it: When we talk about “generating SVG” nowadays, we mean “generating SVG with JavaScript.” The current state of browser support and libraries makes the creation of complex visuals (even with animations and user interaction) a trivial task: Just pick the library that suits your need.Īnd there are a lot to choose from, from general-purpose ones such as Raphaël.js, Snap.svg and svg.js to the myriad of smaller ones, as well as, if you do plotting and data visualization, gRaphaël, Highcharts and D3. Before answering these questions, let’s look at the state of the industry.
0 Comments
Leave a Reply. |