Руководство пользователя Отмена

SVG

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

О формате 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 использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings/<каталог_пользователя>/Application Data/Adobe/Adobe Illustrator <номер_версии> Settings/<название_папки>. Можно изменить или удалить существующие определения фильтра, а также добавить новые.

  1. Выберите объект или группу (или назначьте слой на палитре «Слои»).
  2. Чтобы применить эффект, выполните одно из приведенных ниже действий:

    С использованием настроек по умолчанию

    Перейдите к пункту Эффект > Фильтры SVG > Применить фильтр SVG.

    С использованием пользовательских настроек

    1. Перейдите к пункту Эффект > Фильтры SVG > Применить фильтр SVG.

    2. Выберите эффект в диалоговом окне и нажмите кнопку Редактировать фильтр SVG  . Отредактируйте код по умолчанию и нажмите кнопку ОК.

    Создание и применение нового эффекта

    1. Перейдите к пункту Эффект > Фильтры SVG > Применить фильтр SVG.

    2. Выберите эффект в диалоговом окне и нажмите кнопку Создать фильтр SVG  . Введите новый код и нажмите кнопку ОК.

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

Примечание.

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

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

  1. Выберите Эффект > Фильтр SVG > Импортировать фильтр SVG.

  2. Выберите файл SVG, из которого хотите импортировать эффекты, и нажмите кнопку Открыть.

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

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

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

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

Удаление одного события

  • Выберите событие и нажмите кнопку Удалить выбранную запись  .

Удаление всех событий

  • Выберите Удалить события в меню палитры  

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

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

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

  1. На палитре Интерактивность SVG выберите Событие. (см. События SVG).

  2. Введите соответствующий сценарий JavaScript и нажмите Enter.

События SVG

onfocusin

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

onfocusout

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

onactivate

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

onmousedown

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

onmouseup

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

onclick

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

onmouseover

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

onmousemove

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

onmouseout

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

onkeydown

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

onkeypress

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

onkeyup

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

onload

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

onerror

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

onabort

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

onunload

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

onzoom

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

onresize

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

onscroll

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

Подсказки для создания файлов 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.


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

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

Вопросы сообществу

Если вы хотите задать вопрос или поделиться идеей, присоединяйтесь к сообществу Adobe Illustrator. Мы будем рады узнать ваше мнение.

Получайте помощь быстрее и проще

Новый пользователь?