npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

svgx

2.0.2 • Public • Published

SVGx

is a universal SVG renderer

Description | Installation | Usage | Api | License

NPM version Build Status No deps JavaScript Style Guide Change log

Description

Thanks to React it is feasible to achieve server side rendering SVG. However, there is a pit fall: doctype is missing. This package prepends a doctype to generated SVG.

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. Same logic applies to awesome babel packages, you could use any other transpiler.

Anyway, to get the job done, you can do

npm install react react-dom babel-cli babel-env --save-dev

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
    xmlns='http://www.w3.org/2000/svg'
    xmlnsXlink='http://www.w3.org/1999/xlink'
    width={200} height={200}
  >
    <circle cx={100} cy={100} r={50} />
  </svg>
)
 
const svgOutput = render(jsx)
 
console.log(svgOutput)

NOTA BENE: Attributes xmlns and xmlnsXlink are mandatory to get a valid SVG file.

API

render = svgx(renderer)

Static render function: it works server side.

  • @param {Object} renderer, for instance reactDom.renderToStaticMarkup
  • @return {Function} render

render(jsx[, opts])

Static render function: it works server side.

  • @param {ReactElement} jsx to be rendered.
  • @param {Object} [opts] Options can be omitted, just ignore them and it will work fine.
  • @param {String} [opts.doctype] defaults to a common SVG doctype. You can remove it by setting it to the blank string '' or any other doctype you need.

License

MIT

install

npm i svgx

Downloadsweekly downloads

242

version

2.0.2

license

MIT

homepage

g14n.info

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability