fibo / svgx

is a universal SVG renderer

SVGx

is a universal SVG renderer

Description | Installation | Usage | Api | License

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

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

svgxRender = svgx(jsxRender)

Get your svgx wrapper.

/**
  * @param {Function} jsxRender function, for instance `reactDom.renderToStaticMarkup`
  * @return {Function} svgxRender wrapper
  */

svgxRender(jsx[, opts])

Wrapper for static JSX 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.
  * @return {String} markup in SVG format
  */

License

MIT

svgx's Issues

svgx bin

Create a bin, that takes in input a .jsx file so it is possible to do

npm install svgx -g
svgx path/to/my.jsx > path/to/my.svg

babel-node

I know this is an old project but wondering should i install babel-node globally to run this?
I tried that but it doesn't seem to work anyway...

is there a more updated project evolved from this you might recommend for server side SVG in 2021 ?

Responsive opt

Consider add a responsive option. If true it injects a style tag that makes responsive the svg. Probably it will be necessary to add an id to select the svg from the dom.

It would be really useful for many applications where I use svgx, most of the time I need responsive output.

Sensible defaults

If no opt is given, it should default to a responsive svg with xmlns and doctype, that is what is needed actually for server side rendering.

xmlns attribute

Waiting for facebook/react#6471

Question: SVG Client-Side methods available?

Hi fibo,
Wondering wether SVG Client-Side methods like getTotalLength, getBBox etc. are available and if so, how they may be called in SVGx or the underlying reactDom?
Thanks, Fabian