happycode-svg-renderer

A class built for importing SVGs into Happycode. Imports an SVG string to a DOM element or an HTML canvas. Handles some of the quirks with Happycode 2.0 SVGs, which sometimes misreport their width, height and view box.

Installation

This requires you to have Git and Node.js installed.

To install as a dependency for your own application:

npm install happycode-svg-renderer

To set up a development environment to edit happycode-svg-renderer yourself:

git clone https://gitee.com/happycoding-cx/happycode-svg-renderer.git
cd happycode-svg-renderer
npm install

How to include in a Node.js App

import SvgRenderer from 'happycode-svg-renderer';

const svgRenderer = new SvgRenderer();

const svgData = "<svg>...</svg>";
const scale = 1;
const quirksMode = false; // If true, emulate Happycode 2.0 SVG rendering "quirks"
function doSomethingWith(canvas) {...};

svgRenderer.loadSVG(svgData, quirksMode, () => {
	svgRenderer.draw(scale);
	doSomethingWith(svgRenderer.canvas);
});

How to run locally as part of happycode-gui

To run happycode-svg-renderer locally as part of happycode-gui, for development:

1. Set up local repositories (or pull updated code):
   1. happycode-svg-renderer (this repo)
   2. happycode-render
   3. happycode-paint
   4. happycode-gui
2. In each of the local repos above, run npm install
3. Run npm link in each of these local repos:
   1. happycode-svg-renderer
   2. happycode-render
   3. happycode-paint
4. Run npm link happycode-svg-renderer in each of these local repos:
   1. happycode-render
   2. happycode-paint
   3. happycode-gui
5. In your local happycode-gui repo:
   1. run npm link happycode-render
   2. run npm link happycode-paint
6. In happycode-gui, follow its instructions to run it or build its code

Donate

We provide Happycode free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!