# svgViewExtension

Registers the svg runtime, sharing document and layout contracts with Canvas. Change modes through the editor rather than recreating content.

Registers the svg runtime, sharing document and layout contracts with Canvas. Change modes through the editor rather than recreating content.

`@quirekit/view` · **AGPL-3.0-only**

## Editor compatibility
Layer：**View integration**
| Editor | Status | Assembly and boundaries |
| --- | --- | --- |
| Classic | Supported | [classicEditorPreset](/en/plugins/reference/classic-editor-preset) — Classic presets already register Canvas and SVG. Select view.backend instead of registering a duplicate View in extensions. |
| Block | Unsupported | This View is outside the product's current mounting contract. Independent Core hosts can select it through the View guide; adding the extension does not switch product form. |

“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See [status and integration rules](/en/plugins/compatibility). Licensing is shown separately.

## Installation

```sh
pnpm add @quirekit/view@alpha
```

Install in Editor extensions. The host supplies a view, container and persistence; see [Quick start](/en/guide/quick-start).

```ts
import { svgViewExtension } from '@quirekit/view'
```

Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see [support and licensing](/en/support).

## Integration by editor

These snippets use an existing host element named element. The host owns container sizing and persistence; call instance.destroy() on teardown. Avoid duplicating preset capabilities and supply required host ports before installation.

### Classic

Classic presets already register Canvas and SVG. Select view.backend instead of registering a duplicate View in extensions.

[classicEditorPreset](/en/plugins/reference/classic-editor-preset)

```ts
import { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'

const instance = createClassicEditor({
  element,
  view: { backend: 'svg' },
})
```

### Block

This View is outside the product's current mounting contract. Independent Core hosts can select it through the View guide; adding the extension does not switch product form.

## Configuration

These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See [configuration](/en/plugins/configuration).

### runtime

Runtime options applied when the editor mounts SVG mode.

Type：`SvgMountedViewRuntimeOptions | undefined`

Default：`undefined`

## Commands and runtime

This entry declares no directly enumerable commands. Children supply bundle commands; product plugins use contributions or document services.

## Next steps

Return to [all plugins](/en/plugins), or read [configuration](/en/plugins/configuration) to distinguish options, attributes and commands.

See [extension development](/en/build/extension) for custom capabilities and [Build a product](/en/build) for complete hosting.