# @scratch/scratch-svg-renderer

> SVG renderer for Scratch

Latest version **15.1.1** (published 2026-09-02) · AGPL-3.0-only license · 0 weekly downloads

## Install

```sh
npm install @scratch/scratch-svg-renderer
pnpm add @scratch/scratch-svg-renderer
yarn add @scratch/scratch-svg-renderer
bun add @scratch/scratch-svg-renderer
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 15.1.1 |
| Published | 2026-09-02 |
| First published | 2025-01-23 |
| Weekly downloads | 0 |
| License | AGPL-3.0-only |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 5.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 284 |
| Author | Massachusetts Institute of Technology |
| Maintainers | cwillisf.scratch |

## Links

- npm: https://www.npmjs.com/package/@scratch/scratch-svg-renderer
- Repository: https://github.com/scratchfoundation/scratch-editor
- Homepage: https://github.com/scratchfoundation/scratch-svg-renderer#readme
- Issues: https://github.com/scratchfoundation/scratch-editor/issues
- npm.io page: https://npm.io/package/@scratch/scratch-svg-renderer

## Dependencies (8)

- [svgo](https://npm.io/package/svgo.md) 4.1.0
- [tslog](https://npm.io/package/tslog.md) 4.11.0
- [css-tree](https://npm.io/package/css-tree.md) 3.2.1
- [base64-js](https://npm.io/package/base64-js.md) 1.5.1
- [base64-loader](https://npm.io/package/base64-loader.md) 1.0.0
- [isomorphic-dompurify](https://npm.io/package/isomorphic-dompurify.md) 2.36.0
- [transformation-matrix](https://npm.io/package/transformation-matrix.md) 1.15.3
- [fastestsmallesttextencoderdecoder](https://npm.io/package/fastestsmallesttextencoderdecoder.md) 1.0.22

## Recent versions

- 15.1.1 (latest) — 2026-09-02
- 15.0.2-revert-react-context-menu-static-init.1 (revert-react-context-menu-static-init) — 2026-08-07
- 15.0.0-svg-sandboxing.1 (svg-sandboxing) — 2026-07-24
- 14.2.0-accessibility-fixes-and-costume-updates.1 (accessibility-fixes-and-costume-updates) — 2026-07-03
- 14.2.0-2026-07-02.1 (2026-07-02) — 2026-07-02
- 13.8.0-UEPR-297-accessibility-improvements.1 (UEPR-297-accessibility-improvements) — 2026-05-26
- 13.8.0-test-new-release-workflow.1 (release/test-new-release-workflow) — 2026-05-19
- 14.0.0-accessibility-improvements.4 (release/UEPR-297-accessibility-improvements) — 2026-05-13
- 13.7.4-svg (hotfix/scratch-paint-svg-sanitization) — 2026-05-05
- 13.7.3 (hotfix/scratch-blocks-release-triage) — 2026-04-30
- 12.7.1 (hotfix/more-svg-sanitization) — 2026-04-07
- 13.4.0-test.7 (beta) — 2026-03-26
- 13.3.0-build-media-scripts (uepr-530-separate-media-libraries-build-script-in-its-own-package) — 2026-03-19
- 13.2.0-configurable-backpack (backpack-interface) — 2026-03-12
- 13.0.0-spork.1 (spork) — 2026-03-03
- … 108 more at https://npm.io/package/@scratch/scratch-svg-renderer/versions

## README

# scratch-svg-renderer

[![CI/CD](https://github.com/scratchfoundation/scratch-svg-renderer/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/scratchfoundation/scratch-svg-renderer/actions/workflows/ci-cd.yml)

A class built for importing SVGs into [Scratch](https://github.com/scratchfoundation/scratch-gui). 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:

```bash
npm install scratch-svg-renderer
```

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

```bash
git clone https://github.com/scratchfoundation/scratch-svg-renderer.git
cd scratch-svg-renderer
npm install
```

## How to include in a Node.js App

```js
import SvgRenderer from '@scratch/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](https://github.com/scratchfoundation/scratch-render)
    3. [scratch-paint](https://github.com/scratchfoundation/scratch-paint)
    4. [scratch-gui](https://github.com/scratchfoundation/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](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a
[donation](https://secure.donationpay.org/scratchfoundation/) 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](https://github.com/semantic-release/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](https://github.com/bcoe/conventional-changelog-standard/blob/master/convention.md)
specification.

You can use the [commitizen CLI](https://github.com/commitizen/cz-cli) to make commits formatted in this way:

```bash
npm install -g commitizen@latest cz-conventional-changelog@latest
```

Now you're ready to make commits using `git cz`.

---
_Source: https://npm.io/package/@scratch/scratch-svg-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._