A class built for importing SVGs into Scratch. Imports an SVG string to a DOM element or an HTML canvas. Handles some of the quirks with Scratch 2.0 SVGs, which sometimes misreport their width, height and view box.
This requires you to have Git and Node.js installed.
To install as a dependency for your own application:
npm install scratch-svg-renderer
To set up a development environment to edit scratch-svg-renderer yourself:
git clone https://github.com/scratchfoundation/scratch-svg-renderer.git
cd scratch-svg-renderer
npm install
import SvgRenderer from 'scratch-svg-renderer';
const svgRenderer = new SvgRenderer();
const svgData = "<svg>...</svg>";
const scale = 1;
const quirksMode = false; // If true, emulate Scratch 2.0 SVG rendering "quirks"
function doSomethingWith(canvas) {...};
svgRenderer.loadSVG(svgData, quirksMode, () => {
svgRenderer.draw(scale);
doSomethingWith(svgRenderer.canvas);
});
To run scratch-svg-renderer locally as part of scratch-gui, for development:
- Set up local repositories (or pull updated code):
- scratch-svg-renderer (this repo)
- scratch-render
- scratch-paint
- scratch-gui
- In each of the local repos above, run
npm install
- Run
npm link
in each of these local repos:- scratch-svg-renderer
- scratch-render
- scratch-paint
- Run
npm link scratch-svg-renderer
in each of these local repos:- scratch-render
- scratch-paint
- scratch-gui
- In your local scratch-gui repo:
- run
npm link scratch-render
- run
npm link scratch-paint
- run
- In scratch-gui, follow its instructions to run it or build its code
We provide Scratch 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!
This project uses semantic release to ensure version bumps follow semver so that projects depending on it don't break unexpectedly.
In order to automatically determine version updates, semantic release expects commit messages to follow the conventional-changelog specification.
You can use the commitizen CLI to make commits formatted in this way:
npm install -g commitizen@latest cz-conventional-changelog@latest
Now you're ready to make commits using git cz
.