Обработка SVG данных через Clipboard API

Функция находится в статусе ограниченной доступности в Baseline.

Объекты ClipboardItem позволяют писать и читать данные в буфер обмена в различных форматах, в том числе и SVG (image/svg+xml). Это удобно, если нужно скопировать или вставить графику в веб-приложения, сохраняя векторное качество изображения.

Пример использования — создание ClipboardItem для SVG и его копирование в буфер:

const svgData = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>`;

const blob = new Blob([svgData], { type: 'image/svg+xml' });
const item = new ClipboardItem({ 'image/svg+xml': blob });

navigator.clipboard.write([item])
  .then(() => console.log('SVG скопирован в буфер'))
  .catch(err => console.error('Ошибка копирования', err));

Чтобы считать SVG из буфера:

navigator.clipboard.read().then(data => {
  for (const item of data) {
    if (item.types.includes('image/svg+xml')) {
      item.getType('image/svg+xml').then(blob => {
        const reader = new FileReader();
        reader.onload = () => console.log('SVG из буфера:', reader.result);
        reader.readAsText(blob);
      });
    }
  }
});

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.