Build your svg on the server using Swagger, Node, Express

Recently, I had the need to share an svg chart between a javascript (React) app, an android app, and an iOS app. One option would be to write code in all three application to generate the chart, but a better option is to push the generation of the chart to our Swagger Express Server.

The chart I created only had a couple dozen data points on it, but its easy to imagine a case were we had many hundreds of points that we would want to use the server to generate. Moving your svg to the server also gives you the ability to use server caching, and insulate you from the limitations of your user’s machine.

Swagger yaml

First we need to setup swagger to return our image

swagger: "2.0"
info:
  version: "0.0.1"
  title: SVG App
host: localhost:10010
basePath: /
schemes:
  - http
  - https
consumes:
  - application/json
produces:
  - image/svg+xml
paths:
  /svg:
    x-swagger-router-controller: svg
    get:
      operationId: chart
      summary: Get the logo image
      responses:
        "200":
          description: Success
          schema:
            type: file
        default:
          description: Error
          schema:
            $ref: "#/definitions/ErrorResponse"
  /swagger:
    x-swagger-pipe: swagger_raw
definitions:
  ErrorResponse:
    required:
      - message
    properties:
      message:
        type: string

Controller

Next we need to setup our controller to return the correct content-type and call our service to build the chart.

'use strict';
 
const chartService = require('../services/chartService')
 
module.exports = {
  chart: chart
}
 
function chart (req, res) {
 
  res.setHeader('content-type', 'image/svg+xml')
 
  res.status(200).send(chartService.buildChart())
 
}

Service

Finally, let’s build our svg in our ChartService. In this simple example, its just a red circle, but here you could use a library like d3-node to create something more powerful.

Build svg in service

'use strict'
 
module.exports = {
  buildChart: buildChart
}
 
function buildChart(){
 
  const chart = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />Sorry, your browser does not support inline SVG. </svg>'
 
  return chart
 
}

Check out the whole example project.

About the Author

Scott Bock profile.

Scott Bock

Principal Technologist

Scott is a Senior Software Engineer with over 12 years of experience using Java, and 5 years experience in technical leadership positions. His strengths include troubleshooting and problem solving abilities, excellent repertoire with customers and management, and verbal and written communication. He develops code across the entire technology stack including database, application, and user interface.

Leave a Reply

Your email address will not be published.

Related Blog Posts
Natively Compiled Java on Google App Engine
Google App Engine is a platform-as-a-service product that is marketed as a way to get your applications into the cloud without necessarily knowing all of the infrastructure bits and pieces to do so. Google App […]
Building Better Data Visualization Experiences: Part 2 of 2
If you don't have a Ph.D. in data science, the raw data might be difficult to comprehend. This is where data visualization comes in.
Unleashing Feature Flags onto Kafka Consumers
Feature flags are a tool to strategically enable or disable functionality at runtime. They are often used to drive different user experiences but can also be useful in real-time data systems. In this post, we’ll […]
A security model for developers
Software security is more important than ever, but developing secure applications is more confusing than ever. TLS, mTLS, RBAC, SAML, OAUTH, OWASP, GDPR, SASL, RSA, JWT, cookie, attack vector, DDoS, firewall, VPN, security groups, exploit, […]