Scratch SVG renderer
Find a file
semantic-release-bot 6f367ca531 chore(release): 3.0.139 [skip ci]
## [3.0.139](https://github.com/scratchfoundation/scratch-svg-renderer/compare/v3.0.138...v3.0.139) (2025-07-09)

### Bug Fixes

* **deps:** update dependency scratch-render-fonts to v1.0.212 ([4193d57](4193d57b66))
2025-07-09 13:36:27 +00:00
.github ci: add signature assistant workflow 2024-11-25 07:44:29 -08:00
.husky chore: add husky hook for commitlint 2023-12-20 11:34:32 -08:00
src feat: use isomorphic wrapper for dompurify 2024-02-27 14:52:41 -08:00
test feat: use isomorphic wrapper for dompurify 2024-02-27 14:52:41 -08:00
.editorconfig use scratch-renovate-config:conservative 2021-07-26 16:29:43 -07:00
.eslintignore add end-of-file newline 2019-08-17 17:52:33 -04:00
.eslintrc.js update eslint and babel-eslint versions, one change to obey new rule 2021-05-11 15:42:30 -04:00
.gitattributes use scratch-renovate-config:conservative 2021-07-26 16:29:43 -07:00
.gitignore CCI to GHA migration 2023-10-13 11:32:50 -04:00
.npmignore Add .npmignore to fix deploy 2018-01-16 10:25:03 -05:00
.nvmrc refactor: [UEPR-31] Added new line at end of file 2024-07-19 13:56:20 +03:00
CHANGELOG.md chore(release): 3.0.139 [skip ci] 2025-07-09 13:36:27 +00:00
commitlint.config.js chore: add commitlint 2023-12-20 11:34:29 -08:00
LICENSE chore!: set license to AGPL-3.0-only 2024-11-25 07:44:29 -08:00
package-lock.json chore(release): 3.0.139 [skip ci] 2025-07-09 13:36:27 +00:00
package.json chore(release): 3.0.139 [skip ci] 2025-07-09 13:36:27 +00:00
README.md docs: add mono-repo migration notice 2025-07-02 09:29:31 -07:00
release.config.js ci: use semantic-release 2023-12-20 11:34:56 -08:00
renovate.json5 chore(deps): use js-lib-bundled Renovate config 2024-02-21 09:31:12 -08:00
TRADEMARK Update TRADEMARK 2018-06-18 13:16:35 -04:00
webpack.config.js refactor: [UEPR-17] Changed entry point name 2024-06-26 16:42:19 +03:00

scratch-svg-renderer

⚠️ NOTICE: Repository Migration to Mono-Repo ⚠️

The Scratch Team has migrated the scratch-svg-renderer module into a new mono-repo, scratch-editor. This independent scratch-svg-renderer repository will be archived. Any new issues or pull requests should be opened in the mono-repo.

The new mono-repo version of scratch-svg-renderer is published to the NPM registry as @scratch/scratch-svg-renderer.

Contributors:

  • I would like to thank all past contributors for their work on this repository.
  • If you are aware of valuable issues or pull requests, please consider re-opening them in the mono-repo. If you do so, please link the new issue or pull request to the original one in this repository to help others find it and to reduce the chance of duplicate work.
  • We apologize for the inconvenience and greatly appreciate your help with this transition!

For more information, see the scratch-editor repository on GitHub.

Overview

CI/CD

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.

Installation

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

How to include in a Node.js App

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);
});

How to run locally as part of scratch-gui

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

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

Donate

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!

Committing

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.