Импорт SVG
Как принести векторную графику из Illustrator, Affinity Designer, Inkscape или Figma редактируемыми слоями фигур и какие возможности SVG дорогу не переживают.
SVG становится здесь настоящей геометрией: контуры превращаются в слои фигур с якорями и рычагами, которые можно править инструментом «Узел», а не в картинку с изображением рисунка. Группы в файле становятся группами в панели «Слои».
Путей внутрь четыре, и все они запускают один и тот же читатель:
- Файл ▸ Импорт ▸ SVG… импортирует в открытый у вас проект
- Файл ▸ Открыть… с выбранным SVG строит вокруг него новый безымянный проект
- Бросок файла на холст импортирует его; бросок в другое место открывает его новым проектом
- Ctrl+V вставляет разметку SVG, скопированную из другой программы
При импорте из файла группа-обёртка берёт имя файла. При вставке из буфера обмена она называется SVG.
Что во что превращается
| В SVG | В Celas Studio |
|---|---|
| g, a и вложенный svg | Слой группы |
| path, rect, circle, ellipse, polygon, polyline, line | По одному слою фигуры на каждый |
| image | Слой изображения |
| linearGradient, radialGradient | Градиентная заливка или обводка на использующей их фигуре |
| text | Пустой слой-заполнитель, названный по первым нескольким символам |
Понимаются все команды контура, включая эллиптические дуги, и всё это переводится в кубические кривые Безье. Составной контур (буква O, бублик, что угодно с дыркой) остаётся одним слоем фигуры с целыми внутренними контурами, поэтому дырка продолжает работать, а вся вещь остаётся редактируемой как один объект.
Заливки, правило заливки, обводки, толщина обводки, концы и стыки, непрозрачность и градиенты переезжают все, а толщина обводки масштабируется вместе с графикой, чтобы вес линии выглядел правильно. Всё, что в файле помечено скрытым, приходит скрытым.
Цвета читаются во всех формах CSS, которыми пользуется модель рисования: именованные цвета, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() и rgba(), причём в числовых формах принимаются проценты. Четырёх- и восьмизначные шестнадцатеричные формы проносят свою альфу насквозь.
Прямоугольник со скруглением, у которого rx отличается от ry, импортируется с по-настоящему эллиптическими углами. Когда rx и ry совпадают, он остаётся обычным прямоугольником, несущим радиус угла, поэтому рычаг радиуса угла инструмента «Узел» на нём по-прежнему работает.
Связанный <image> разрешается относительно папки самого SVG, поэтому графика, ссылающаяся на соседний файл, загружается. Встроенный data: URI декодируется напрямую.
Группы не несут трансформации
Трансформации из файла запекаются в саму графику, поэтому группы, которые вы получаете, — это чистая структура без собственного поворота и масштаба. Рисунок ложится ровно туда, куда велит файл, и вы вольны потом вращать или масштабировать группу, ничего под ней не сдвигая.
Что не поддерживается
Читатель покрывает модель рисования, а не всю спецификацию SVG. Всё нижеперечисленное пропускается без сообщения.
- Блоки style в CSS и атрибуты class: смотрите предупреждение ниже
- use и symbol: спрайтовые листы и повторяющиеся экземпляры импортируются пустыми
- clipPath и mask: обтравка не применяется, поэтому обрезанная графика может появиться
- Заливки узором, которые откатываются к плоскому серому
- Эффекты filter: размытия, тени и всё остальное
- marker: наконечники стрелок и концы линий
- stroke-dasharray и stroke-dashoffset, поэтому пунктирные обводки импортируются сплошными
- switch, foreignObject и анимация SMIL
- Текст: шрифт, кегль и положение теряются, остаётся только именованный слой-заполнитель
- Процентные и относительные единицы, а также трансформации, записанные внутри атрибута style
Как подготовить файл, который импортируется чисто
- Переведите текст в кривые перед выгрузкой; текст приходит только заполнителем.
- Разберите обводки, пунктиры, узоры и любой эффект фильтра, который вы хотите сохранить.
- Освободите обтравочные маски или обрежьте графику до того, что должно быть видно.
- Разберите символы и повторяющиеся экземпляры, чтобы ничто не опиралось на use.
- Выгружайте с атрибутами представления, а не с CSS, и дайте документу viewBox.
Размер и размещение
Ширина и высота документа читаются в пикселях, пунктах, пиках, дюймах, миллиметрах или сантиметрах и сводятся с viewBox, чтобы разумно отмасштабировать рисунок. Файл, размеченный в процентах (обычный веб-логотип с width=100%), импортируется в размере своего viewBox, а не растягивается. Затем графика ставится по центру вашего холста.