SVGx

is a universal SVG renderer

NPM version Build Status Dependency Status Greenkeeper badge Change log

js-standard-style

Description | Installation | Usage | Api | License

Description

Thanks to React it is feasible to achieve server side rendering SVG. However, there are few common pit falls. In order to avoid them this package implements the following features:

Actually, this package is also a recipe to render and test SVG server side.

You can try this example.js script, by launching commands

git clone https://github.com/fibo/SVGx.git
cd SVGx
npm install
npm run example

It generates the following SVG output

SVG example

Installation

With npm do

npm install svgx

Usage

Installing react and react-dom is up to you: svgx does not declare them as dependencies, cause you could use a different version or even other React-like engine.

For instance do

npm install react react-dom babel-cli

Then run the following script with babel.

#!/usr/bin/env babel-node

import React from 'react'
import reactDom from 'react-dom/server'
import svgx from 'svgx'

const render = svgx(reactDom.renderToStaticMarkup)

const jsx = (
  <svg width={200} height={200}>
    <circle cx={100} cy={100} r={50} />
  </svg>
)

const svgOutput = render(jsx, { doctype: true, xmlns: true })

console.log(svgOutput)

API

render = svgx(renderer)

Static render function: it works server side.

render(jsx[, opts])

Static render function: it works server side.

License

MIT