SVG

SVG — векторный формат, описывающий изображения в виде фигур, линий, текста и фильтров. Сохраняемые файлы невелики по размеру и обеспечивают высокое качество изображений в Интернете, на печати и даже на портативных устройствах с ограниченными ресурсами в отличие от форматов GIF, JPEG, WBMP и PNG, которые занимают много места. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично передает текст и цвет, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.

Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям. 

Сохранить объект в формате SVG можно с помощью команд Сохранить, Сохранить как, Сохранить копию и Сохранить для Web и устройств. Для доступа к полному набору параметров экспорта в формате SVG используйте команды Сохранить, Сохранить как и Сохранить копию. Команда Сохранить для Web и устройств предоставляет ограниченный набор экспорта в формате SVG (только те, которые используются для работы в Интернете).

Применение эффектов SVG

Эффекты SVG можно использовать для добавления в объект таких графических свойств, как тени. Эффекты SVG отличаются от битовых эквивалентов тем, что они основаны на XML и не зависят от разрешения. Фактически, эффект SVG — это не что иное, как серия свойств XML, описывающих различные математические операции. Полученный эффект визуализируется для целевого объекта, а не для исходной графики.

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

Если применяется эффект «Фильтр SVG», Illustrator отображает растрированную версию эффекта на монтажной области. Можно контролировать разрешение миниатюры, изменяя параметр разрешения растрирования документа.

Импорт эффектов из файла SVG

Обзор палитры «Интерактивность SVG»

Палитра «Интерактивность SVG» позволяет также увидеть все события и файлы JavaScript, связанные с текущим файлом.
Палитра «Интерактивность SVG» (Окно > Интерактивность SVG) используется для добавления интерактивности в объект при его экспорте для просмотра в веб-браузере. Например, создав событие, запускающее команду языка JavaScript, можно быстро создать движение на веб-странице, когда пользователь выполняет такое действие, как перемещение курсора мыши над объектом.

Удаление события из палитры «Интерактивность SVG»

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

Просмотр, добавление или удаление событий, связанных с файлом

Нажмите кнопку Ссылка на файлы JavaScript  , после чего нажмите кнопку Добавить, чтобы добавить дополнительные файлы JavaScript, либо нажмите кнопку Удалить, чтобы удалить выбранный файл JavaScript.

Добавление интерактивности SVG в объект

События SVG

Запускает действие, когда элемент получает фокус (например, выделение курсором).

Запускает действие, когда элемент теряет фокус (часто при переходе фокуса другому элементу).

Запускает действие по щелчку кнопки мыши или нажатию клавиши в зависимости от элемента SVG.

Запускает действие, когда пользователь нажимает кнопку мыши на элементе.

Запускает действие, когда пользователь отпускает кнопку мыши на элементе.

Запускает действие по щелчку кнопки мыши на элементе.

Запускает действие при наведении курсора на элемент.

Запускает действие, когда курсор находится на элементе.

Запускает действие, когда пользователь уводит курсор с элемента.

Запускает действие при нажатии клавиши.

Запускает действие, когда пользователь держит клавишу нажатой.

Запускает действие, когда пользователь отпускает клавишу.

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

Запускает действие при неправильной загрузке элемента или другой ошибке.

Запускает действие при остановке загрузки страницы до того, как элемент полностью загружается.

Запускает действие при удалении документа SVG из окна или кадра.

Запускает действие, когда меняется масштаб для документа.

Запускает действие, когда меняется размер окна просмотра документа.

Запускает действие при прокрутке или панорамировании окна просмотра документа.

Подсказки для создания файлов SVG

• Используйте слои для добавления структуры в файл SVG. Если объект сохраняется в формате SVG, каждый слой преобразуется в групповой элемент (<g>). (Например, слой «Button1» становится <g id="Button1_ver3.0">). Вложенные слои становятся вложенными группами SVG, а скрытые слои сохраняются со свойством «отображение:нет» стиля SVG.

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

• Растровые данные не масштабируются в средстве просмотра SVG и не могут редактироваться, как другие SVG-элементы. Старайтесь не создавать объекты, которые будут растрироваться в SVG-файле. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.

• Для повышения производительности файла SVG используйте символы в объекте и упрощайте контуры. Кроме того, если в первую очередь требуется производительность, старайтесь не пользоваться кистями, которые производят большое количество данных контура («Уголь», «Пепел», «Ручка»).

• Используйте фрагменты, карты ссылок и сценарии для добавления веб-ссылок в файл SVG.

• Язык сценариев (например, JavaScript) открывает неограниченные функциональные возможности для файла SVG. Перемещения с помощью курсора и клавиатуры могут вызвать сценарные функции (например, эффекты прокрутки).

Параметры экспорта файлов SVG, оптимизированных для Интернета

Добавлен новый вариант экспорта в формате SVG (Файл > Экспорт > Экспортировать как > SVG). Для создания стандартизированных файлов SVG, оптимизированных для Интернета, для проектов в области веб-дизайна и дизайна графического интерфейса пользователя используется новый рабочий процесс. Дополнительные сведения см. в разделе Параметры экспорта SVG.

Связанные ресурсы

Обращайтесь к нам