Retinafy everything
Why you should bother about vector graphics now
Retina screens (thanks to Apple for such convenient marketing term) are part of our lives now. If you are a web-developer/designer and you’re not keep in mind how your work displays on a high-density screen then you're totally missing a modern tendencies now.
Is it simple to implement this “retina-driven solutions” now? If we are talking about frontend, then short answer is “yes”, there are some of tricks and caveats (the best and the most complete list of them is in the “Retinafy” book by Thomas Fuchs). But when you understand all the limitations and solutions there is no problem to create modern and sharp-everywhere websites.
And finally there is a last stand — images that you're generating on the server: graphs, reports, any kind of visualisations. They are totally cool and eye-catchy, but not when you are sending them via email or give to your users as a file to download. For example: Google Analytics report by visual.ly is looking totally rad in the browser and completely blurry when downloading.
What is the problem? Why do not just increase the image resolution and everyone will be happy? Maybe today will, but this is a dead-end: you can not increase resolution indefinitely: resulting image size won't satisfy your customers absolutely.
Then we come to the vector images: they are just text representation of the resulting graphics, there is no resolution limit to them: scale as much as you want without quality or size degradation. There is another problem: we have a lot of solutions to create vector-images (or svg in particular) in the browser (Raphaël.js, D3, Highcharts etc), but no powerful answer for the server, only some hacks. Many of them are based on running headless version of Webkit: Highcharts solution, Freckle solution.
Working in ResumUP we've spent a lot of time investigating, measuring and comparing all of them and came to our own as a result. One year more of tuning and optimising we understood that we could share this tool with a developers suffering the same problem. This is how Svable was born.
Svable is a svg-generation service in the cloud. Everything you should care about is just sending us a json-payload with commands and get back your svg (or retina-ready png or pdf if you want).
But what about code duplication? As a developer myself I hate this, and if any service forces me to duplicate all the logic that uses Raphaël.js for example to create some ‘json-payload’ of commands I'll better stick with a browser-on-the-server approach. We share this pain and are creating adapters to popular solutions and languages now, so you will just copy-paste your access key and then adapter will convert Raphaël’s output to Svable’s json. No duplication at all: you could use the same code on the client and/or on the server.
We are only in our early stages and seeking for real customers to integrate and tune our solution before open it to everyone. If you have complex svg (or want to create them and make you “retina” customers happy), you have a good chance to do this on very favorable terms, just drop us a line about your use case (at the bottom of the Svable page). Let’s make the web beautiful together.
