Illustrator не открывает svg

Обновлено: 07.07.2024

Как правильно сохранить SVG, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?

В чем работать с векторной графикой?

В основном, дизайнеры используют в работе векторные графические пакеты Sketch, Illustrator. Значительно реже идут в ход профориентированные под работу с SVG графические пакеты, такие как например Inkscape.

Подробонее про графические пакеты и js-библиотеки:

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

Сразу нужно отметить, что для целей веб-разработки, в основном, вставка в файл растровых изображений не требуется, но SVG формат такую возможность поддерживает. Поэтому нужно проверить, не затесался ли где-то растровый слой или слой с эффектом из иллюстратора, который преображается в растр при сохранении в SVG. Это будет видно в структуре кода SVG файла или в прилинкованных файлах сохраняющихся вместе с SVG файлом (об этом подробнее в пункте 5).

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

3. Оптимизируем вектор в иллюстраторе

Сливаем массу слоев в минимальное количество, убирая группы. Взаимосвязанные слои, представляющие собой единый объект, стремимся склеить, а при необходимости - вырезать друг из друга.

4. Сохраняем: File / Save As

В общем списке форматов находим SVG, выбираем его, а так же берем на заметку то, что там есть еще и SVGZ (сжатый файл, еще меньше по размеру, без потери качества).

5. Знакомимся с диалоговым окном сохранения

SVG Profiles
По умолчанию используется SVG 1.1
Fonts
Type / Convert to outlines - что означает "перевести в кривые", то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
Type / SVG - Нужен в случае, если в SVG встраивается текст
Type / Subsetting - Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
Options
Image Location / Embed - при наличии растровых изображений позволит включить их в состав SVG файла
Image Location / Link - при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
Preserve Illustrator Capabilities - галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
More options
Трогать для решения наших задач необязательно.
SVG Code
Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

По структуре кода можно даже совершенно не профессиональным взглядом выявить вставки растровой графики.

Всё дело в том, что в SVG очень четко виден принцип описательной части векторной формы в XML формате. В то же время, код растрового изображения визуальному анализу никак не поддается.

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

Если в файле оказался растровый фрагмент, то его рекомендуется ликвидировать, перерисовав растровый слой в векторе. Это значительно уменьшит размер файла и позволит не потерять качества при масштабировании.

6. Иконка планеты

Открывает SVG файл для просмотра в браузере установленном основным по умолчанию.

7. На выходе получаем SVG или SVGZ файл

Формат:	Без оптимизации векторной формы в иллюстраторе *	С учетом оптимизации векторной формы в иллюстраторе *
SVG	36 813 bytes	35 941 bytes
SVGZ	15 310 bytes	15 214 bytes

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

Важно отметить, что полученный на выходе файл при этом содержит большое количество сносок, комментариев, пробелов, переносов, свойств, которые совершенно не являются обязательными.

Я пытаюсь загрузить SVG в Hype-Processing. Вы можете сделать это, заявив:

Первоначально он работает на SVG, который я получил из интернета. Однако когда я группирую объекты в Illustrator и группирую некоторые пути, а затем пытаюсь снова загрузить svg, это не удается. Ошибка заключается в приведенной ниже сути.

Я предполагаю, что причиной ошибки является версия Creative Cloud illustrator, которую я использую. Либо это, либо, возможно, проблема с группировкой путей.

У кого-нибудь еще была эта ошибка, и если да, то как бы Вы ее разрешили? Я подумывал о том, чтобы попытаться изменить сам код SVG. Если нет, то есть ли способ обеспечить сохранение illustrator в обратно совместимом состоянии?

примечание: в основном я хотел сгруппировать пути так, чтобы некоторые объекты были одного цвета на основе симметрии. Цвет определяется случайным образом.

3 ответа

Мы производим значки в Illustrator как SVGs, а затем производим значки на основе шрифтов с помощью fontcustom. Откуда ни возьмись, они летели слишком низко. Я нашел в svg этот странный viewBox с отрицательным 49 на нем. Как это контролируется в Illustrator? Мне не нужно никакого окна просмотра.

Когда вы сохраняете SVG с помощью Illustrator, он добавляет тег <style> , чтобы он мог повторно использовать классы. Однако обработка не поддерживает этот тег, выплевывая предупреждение: "ignoring style tag" . Это эффективно удаляет весь цвет из эскиза, в результате чего фигуры отображаются как черные. Самое простое решение-использовать стиль "in-line" при сохранении SVG из Illustrator, чтобы обработка могла получить доступ к этой информации. Для этого 1) Выберите "More Options" в диалоговом окне SVG Options, а затем 2)Выберите "Style Attributes" в раскрывающемся списке Drop CSS Properties.

Вы можете открыть SVG в текстовом редакторе, чтобы убедиться, что фигуры выглядят примерно так (где style -атрибут фигуры):

А вот и настройка в Illustrator:

я сам только что столкнулся с этой проблемой. Я изменил три вещи, теперь это снова работает:

Надеюсь, это поможет!

Кажется, illustrator при экспорте сохраняет SVG немного иначе, чем при простом использовании SAVE. Использование export создает проблему выше, поэтому SVG не может быть загружен в Hype. Но спасти его, кажется, нет никакой проблемы!

У меня есть коллега, который использует Illustrator для объединения 2 SVG. 1 svg использовал несколько элементов <path> , но они были преобразованы в элементы <line> . Я знаю, что существует общий алгоритм преобразования и svg <line> в svg <path> . Например, вот пример.

Восстановление до последней сохранённой версии

Работа с векторной графикой в Adobe Illustrator, это долгий и кропотливый процесс. Поэтому для тех случаев, когда с иллюстрацией произведён определённый объём работы, который в результате оказывается не совсем тем, чего хотел добиться дизайнер, в программе присутствует функция возврата к последней сохранённой версии. Чтобы воспользоваться ею, достаточно перейти в меню Файл / Восстановить .

В результате восстановления, изображение будет возвращено к состоянию последнего сохранения, все сделанные после этого изменения будут отменены.

Функция автоматического сохранения и восстановления изображения Adobe Illustrator

С помощью встроенных в Adobe Illustrator инструментов пользователь имеет возможность восстановить несохраненную иллюстрацию в случае сбоя в работе программы или компьютера.

Чтобы иметь возможность воспользоваться данной функцией, её необходимо настроить. Для этого, перейдите в меню Редактирование / Установки / Обработка файлов и буфер обмена…

В подразделе Восстановление данных открывшегося меню укажите периодичность автоматического сохранения данных для восстановления (от 30 секунд до 1 часа) и папку куда их сохранять. По умолчанию, это папка на диске С:

C:\Users\Имя Пользователя\AppData\Roaming\Adobe\Adobe Illustrator 21 Settings\ru_RU\x64\DataRecovery

В случае сбоя в работе программного обеспечения или непредвиденного закрытия Adobe Illustrator, после повторного открытия программа восстановит все автоматически сохранённые данные.

Сам файл автовосстановления имеет расширение .aid и выглядит следующим образом: AIDBTemp1482247306297777136.aid

Примечание . Если по каким-то причинам, при открытии Adobe Illustrator программа не осуществляет восстановление иллюстрации из файла автоматически сохранённых данных, то такой файл можно запустить вручную, открыв его с помощью Adobe Illustrator. В таком случае восстановление автоматически сохранённой иллюстрации также произойдёт в штатном режиме.

Только не забудьте сохранить открытую таким образом иллюстрацию, если не сделать этого, то после закрытия .aid файла, он исчезает и возможности открыть его повторно не будет.

Программа для восстановления файлов .ai, .eps, .ait, .svg

Иллюстрации, создаваемые Adobe Illustrator, являются довольно специфическими файлами, восстановление которых в случае утери или удаления, это непростой процесс. Если в результате сбоя или по другим причинам ваши иллюстрации оказались утеряны, то их можно восстановить с помощью Hetman Partition Recovery .

Для этого, запустите утилиту и просканируйте носитель информации на который сохранялись иллюстрации.

Палитра SVG Interactivity (SVG интерактивность)

Эта палитра предназначена для задания тем или иным объектам, которые должны войти в SVG файл, элементов интерактивности, то есть, взаимодействия с пользователем.
Основано это на языке Java Script, поэтому для того, чтобы работать с SVG Interactivity, нужны определенные навыки программиста или хотя бы понимание основных принципов объектно-ориентированного программирования.
Палитра SVG Interactivity показана на рис.1. В этой палитре всего есть четыре элемента.
Event (Событие). В этом выпадающем меню определяется, на какое событие относительно выделенного объекта будет производиться действие. События нет смысла перечислять — они стандартны как для Java Script, так и для любого другого объектно-ориентированного языка программирования.
JavaScript. В этой строке записываются команды реагирования на событие. Они могут быть настолько разнообразными, что охватить их описанием просто невозможно. Подходят и стандартные Java Script команды.
Link JavaScript File. Присоединить готовые Java Script файлы. Может быть полезно, если вы имеете готовые сценарии или описания процедур.

Пример создания интерактивного SVG

SVG Filters (SVG фильтры)
SVG фильтры — это совершенно особый тип фильтров, и они будут рассмотрены в отдельном пункте.
Их даже в стандартной поставке достаточно много. Однако, вы можете экспортировать и любые другие фильтры из SVG файлов, используя команду IMPORT.
Основная особенность SVG фильтров заключается в том, что их результат должен быть возможен к передаче через запись в XML (как мы уже говорили, именно на нем основан SVG).
Разумеется, вы не можете записать в SVG абсолютно любой рисунок, как, например, в EPS — особенность формата накладывает отпечатки. Поэтому создатели программы разработали сами несколько эффектов, которые могут быть переданы через XML, и назвали их SVG Filters.
Основная проблема, которая возникает в отношении SVG, это даже не то, как его использовать, а стоит ли его использовать вообще. Я не сомневаюсь в том, что через несколько лет SVG станет одним из самых применяемых стандартов, но сейчас его использование сильно затрудненно.
Первая причина — требуется установка плагина. А весит он не несколько сотен килобайт, как Flash, а более чем 3 мегабайта! Разумеется, поставить его на автоскачивание для всех посетителей, как это делается для Flash, никак нельзя.
То есть, золотое время SVG наступит только тогда, когда плагин будет поставляться вместе с обозревателем в системе. Какие-то намеки относительно этого делались в анонсах Window XP, реализовалось или нет, мне лично не известно. Но для передачи сложных векторных изображений через Интернет, требующих редактирования, например, карт или микросхем, более удобного формата пока не создано и вряд ли это произойдет (разве что на основе этого же SVG).
Если же говорить о конкуренции с Flash, то я думаю, что это несколько неверно. SWF и SVG занимают хоть и близкие, даже в чем-то смежные ниши, но все же назначение у них разное. Flash это, прежде всего, внешние эффекты, работа на зрителя: поддержка звука, огромные возможности для анимирования.
SVG — это формат, который имеет более практичное назначение — передача графических данных, которые невозможно или неудобно передавать другими способами, например, тех же микросхем.
Поэтому эти форматы будут скорее взаимодействовать, чем конкурировать.

Юрий Гурский

Компьютерная газета. Статья была опубликована в номере 09 за 2002 год в рубрике soft :: графика

Читайте также: