Я недавно начал использовать инструмент анимации в браузере под названием SpiritApp, он использует SVG, которые изменены, чтобы изменить свойство <g id
на <g spirit-data-id
, после чего файл кода вставляется в тело вашего HTML-файла.
Сначала я использовал урок (https://www.youtube.com/watch?v=pggg-W3qS_o&t=212s), который был очень простым, а SVG не был огромным файлом и его было легко разместить в разметке. Затем я использовал ProCreate для создания мой дизайн, экспортированный в PSD, а затем AI и сохраненный для экранов в формате SVG в точности так, как это было показано в руководстве.
После нескольких сбоев Brackets при открытии файла SVG, когда он открылся, я был озадачен тем, что идентификаторы изображений были ОГРОМНЫМИ, я подумал, что сначала я случайно уменьшил размер файла, но заново сохранил SVG, и он определенно не был уменьшен. Мне придется сделать снимок экрана, так как для одного слоя есть тысячи строк кода (!). Кажется, там, где это объявляет xlink:href
, кто-нибудь знает, что я делаю не так? В учебнике был показан очень чистый отформатированный SVG-файл в скобках, но я не уверен, почему мой размер примерно на 10 КБ длиннее, чем 4 слоя.
![Example of Code](https://i.stack.imgur.com/BOMSZ.jpg)