Работа с внешними файлами

Библиотека SVG.js предоставляет удобные методы для работы с внешними SVG-файлами, позволяя динамически загружать и манипулировать ими в DOM. Основной инструмент для этого — метод SVG().load(url, callback).

SVG().load('icon.svg', function(loader) {
    this.addTo('#drawing'); // добавление загруженного SVG в контейнер
    this.size(200, 200);    // изменение размера
});
  • url — путь к внешнему SVG-файлу.
  • callback — функция, вызываемая после успешной загрузки, где this ссылается на загруженный SVG-элемент.
  • addTo(selector) позволяет вставить SVG в конкретный контейнер DOM.
  • Методы изменения размеров (size(width, height)) и позиционирования (move(x, y)) работают на загруженных элементах так же, как и на созданных программно.

Для асинхронной загрузки можно использовать промисы:

SVG().load('icon.svg').then(svg => {
    svg.addTo('#drawing').center(150, 150);
});

Интеграция с HTML через <object> и <img>

SVG-файлы можно подключать через HTML-теги <object> или <img>, а затем использовать SVG.js для управления содержимым через метод SVG.adopt(element):

const obj = document.querySelector('object#mySVG');
obj.addEventListener('load', () => {
    const svgDoc = obj.contentDocument.querySelector('svg');
    const svg = SVG.adopt(svgDoc);
    svg.fill('#f06').stroke({ width: 2 });
});
  • SVG.adopt(element) превращает существующий DOM-элемент <svg> в объект SVG.js, позволяя применять к нему стандартные методы библиотеки.

Работа с фрагментами SVG

Загрузка всего файла не всегда нужна. Можно извлекать отдельные элементы с помощью селекторов и манипулировать ими:

SVG().load('icons.svg').then(svg => {
    const icon = svg.findOne('#icon-star'); // выбор элемента по id
    icon.fill('gold').scale(1.5);
});
  • findOne(selector) — возвращает первый элемент, соответствующий CSS-подобному селектору.
  • find(selector) — возвращает массив элементов, соответствующих селектору, поддерживает групповые операции.

Это особенно удобно для иконок и спрайтов, когда требуется работать только с частью SVG.

Импорт и использование спрайтов

SVG-спрайты позволяют хранить множество иконок в одном файле. SVG.js поддерживает импорт отдельных символов через <use>:

const draw = SVG().addTo('#drawing').size(400, 400);
draw.use('icons.svg#icon-heart').move(50, 50).scale(2);
draw.use('icons.svg#icon-star').move(150, 50).scale(1.5);
  • use(url#id) — создаёт экземпляр символа с заданного id внутри внешнего файла.
  • Позволяет создавать повторяющиеся элементы без дублирования кода и экономит трафик.

Асинхронная загрузка и обработка ошибок

Работа с внешними файлами всегда подразумевает возможность ошибки загрузки. SVG.js предоставляет события error и промисы для безопасного управления:

SVG().load('icon.svg')
   .then(svg => svg.addTo('#drawing'))
   .catch(err => console.error('Ошибка загрузки SVG:', err));
  • Промис отклоняется при сетевой ошибке или если файл не является корректным SVG.
  • Для <object> и <img> рекомендуется проверять событие onerror:
const img = document.querySelector('#iconImg');
img.oner ror = () => console.error('Не удалось загрузить SVG');

Интеграция с AJAX и fetch

SVG-файлы можно загружать вручную через fetch, а затем вставлять в DOM и обрабатывать через SVG.js:

fetch('icon.svg')
  .then(res => res.text())
  .then(text => {
      const container = document.querySelector('#drawing');
      container.innerHTML = text;
      const svg = SVG.adopt(container.querySelector('svg'));
      svg.fill('red').stroke({ width: 3 });
  });
  • Позволяет предварительно модифицировать содержимое SVG перед вставкой.
  • Удобно для динамических интерфейсов, где SVG генерируются сервером или на лету.

Обновление и повторная загрузка

Для динамически изменяемых интерфейсов важно уметь перезагружать SVG:

function reloadSVG(selector, url) {
    const container = document.querySelector(selector);
    container.innerHTML = ''; // очистка предыдущего SVG
    SVG().load(url).then(svg => svg.addTo(container));
}
  • Позволяет обновлять графику без перезагрузки страницы.
  • Хорошо сочетается с реактивными фреймворками, где состояние интерфейса изменяется часто.

Особенности работы с CORS

При загрузке внешних SVG важно учитывать политику CORS:

  • Файлы должны быть на том же домене или разрешены заголовками Access-Control-Allow-Origin.
  • В противном случае методы SVG.adopt и прямой доступ к внутреннему содержимому через <object> будут недоступны из-за ограничений браузера.

Для обхода ограничений можно использовать серверный прокси или инлайновое внедрение SVG через fetch.

Эти возможности делают SVG.js мощным инструментом для динамического взаимодействия с внешними SVG-файлами, позволяя создавать интерактивную графику, иконки и визуализации с полным контролем над элементами.

Оглавление