---
name: reference_svg_drawer
description: "Лёгкий векторный SVG-редактор (рисовалка) для уроков — API виджета, санитайзер, точки переиспользования"
metadata: 
  node_type: memory
  type: reference
  originSessionId: 60467058-b40e-4bd9-9f7f-d1e362e8039a
---

SVG-рисовалка в редакторе уроков. Сделано 2026-06-03 (commit ef59023).

**Виджет:** `frontend/js/svg-draw.js` → `window.SvgDraw.mount(container, {svg, width, height, onChange})`
→ `{getSVG(), destroy(), el}`. Vanilla, рендер в SVG-DOM (НЕ canvas, в отличие от whiteboard.js).
Инструменты: перо (Catmull-Rom→bezier), линия, прямоугольник, эллипс, стрелка, текст,
цвет/толщина/заливка, выбор (перемещение+Delete), undo/redo, очистка. Стили инжектятся сами.
Координаты через `svg.getScreenCTM().inverse()`. viewBox по умолчанию 800×500.

**Санитайзер:** `frontend/js/svg-sanitize.js` — UMD (`window.SvgSanitize` + `module.exports`),
`clean(str)`. Браузер → DOM-whitelist; node → консервативный regex. Whitelist тегов
(svg,g,path,line,rect,circle,ellipse,polyline,polygon,text,tspan,defs,*Gradient,stop) и
геометрия/стиль-атрибутов; режет script/foreignObject/style/image/a/use, on*=, href/xlink:href,
javascript:. БЕЗ зависимостей. Бэкенд `lessonController.js` подключает его кросс-путём
`require('../../../frontend/js/svg-sanitize.js')` — единый источник правды.

**Блок урока `svg-draw`** (хранение inline, переоткрывается для дорисовки):
- `lessonController.js`: `svg-draw` в VALID_TYPES + `cleanSvg(data.svg)` при сохранении (defense-in-depth).
- `lesson-editor.html`: палитра «Рисунок», BLOCK_DEFAULTS `{svg:'',caption:''}`, `renderBlockEditor`
  case (host `.svgdraw-host[data-bid]` + подпись), `mountSvgDrawEditors()` (монтаж/перемонтаж в
  renderBlocks, инстансы в `_svgDrawInst`), `renderPreviewBlock` case (санитизированный inline-svg).
- `lesson.html`: `renderBlock` case svg-draw (санитизированный inline-svg, адаптивно `max-width:100%`).

**Переиспользование (заявлено):** тот же `SvgDraw`/`SvgSanitize` пригодны для картинок флешкарт и
**фигур генератора задач** (см. [[reference_exam_textbook_links]] / обсуждение параметрического генератора).

**MVP-ограничения (на доработку):** select только move+delete (нет resize/rotate); нет слоёв/
группировки, привязки к сетке, импорта картинки-подложки; текст однострочный; один размер холста.