SVG

  1. Руководство пользователя Illustrator
  2. Основы работы с Illustrator
    1. Введение в Illustrator
      1. Новые возможности в приложении Illustrator
      2. Часто задаваемые вопросы
      3. Системные требования Illustrator
      4. Illustrator для Apple Silicon
    2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Создание документов
      3. Инструменты/комбинации клавиш по умолчанию | Illustrator
      4. Настройка комбинаций клавиш
      5. Монтажные области
      6. Настройка рабочей среды
      7. Панель «Свойства»
      8. Установка параметров
      9. Рабочая среда «Сенсорное управление»
      10. Поддержка Microsoft Surface Dial в Illustrator
      11. Восстановление, отмена и автоматизация
      12. Поворот вида
      13. Линейки, сетки и направляющие
      14. Специальные возможности в Illustrator
      15. Безопасный режим
      16. Просмотр графических объектов
      17. Работа в Illustrator с использованием Touch Bar
      18. Файлы и шаблоны
      19. Синхронизация настроек в Adobe Creative Cloud
    3. Инструменты в Illustrator
      1. Выделение
        1. Обзор
        2. Выделение
        3. Частичное выделение
        4. Лассо
      2. Навигация
        1. Обзор
        2. Масштаб
        3. Повернуть вид
      3. Раскрашивание
        1. Обзор
        2. Градиент
        3. Создание фигур
      4. Текст
        1. Обзор
        2. Текст
        3. Текст по контуру
  3. Illustrator на iPad
    1. Представляем Illustrator на iPad
      1. Обзор по Illustrator на iPad.
      2. Ответы на часто задаваемые вопросы по Illustrator на iPad
      3. Системные требования | Illustrator на iPad
      4. Что можно и нельзя делать в Illustrator на iPad
    2. Рабочая среда
      1. Рабочая среда Illustrator на iPad
      2. Сенсорные ярлыки и жесты
      3. Комбинации клавиш для Illustrator на iPad
      4. Управление настройками приложения
    3. Документы
      1. Работа с документами в Illustrator на iPad
      2. Импорт документов Photoshop и Fresco
    4. Выбор и упорядочение объектов
      1. Создание повторяющихся объектов
      2. Объекты с переходами
    5. Рисование
      1. Создание и изменение контуров
      2. Рисование и редактирование фигур
    6. Текст
      1. Работа с текстом и шрифтами
      2. Создание текстовых надписей по контуру
      3. Добавление собственных шрифтов
    7. Работа с изображениями
      1. Работа с изображениями
    8. Цвет
      1. Применение цветов и градиентов
  4. Облачные документы
    1. Основы работы
      1. Работа с облачными документами Illustrator
      2. Общий доступ к облачным документам Illustrator и совместная работа над ними
      3. Обновление облачного хранилища для Adobe Illustrator
      4. Облачные документы в Illustrator | Часто задаваемые вопросы
    2. Устранение неполадок
      1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
      2. Устранение неполадок с облачными документами в Illustrator
  5. Добавление и редактирование контента
    1. Рисование
      1. Основы рисования
      2. Редактирование контуров
      3. Рисование графического объекта с точностью на уровне пикселей
      4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
      5. Рисование простых линий и фигур
      6. Трассировка изображения
      7. Упрощение контура
      8. Определение сеток перспективы
      9. Инструменты для работы с символами и наборы символов
      10. Корректировка сегментов контура
      11. Создание цветка в пять простых шагов
      12. Рисование перспективы
      13. Символы
      14. Рисование контуров, выровненных по пикселям, при создании проектов для Интернета
    2. 3D-эффекты и материалы Adobe Substance
      1. Подробнее о 3D-эффектах в Illustrator
      2. Создание трехмерной графики
      3. Создание трехмерных объектов
      4. Создание трехмерного текста
    3. Цвет
      1. О цвете
      2. Выбор цветов
      3. Использование и создание цветовых образцов
      4. Коррекция цвета
      5. Панель «Темы Adobe Color»
      6. Цветовые группы (гармонии)
      7. Панель «Темы Color»
      8. Перекрашивание графического объекта
    4. Раскрашивание
      1. О раскрашивании
      2. Раскрашивание с помощью заливок и обводок
      3. Группы с быстрой заливкой
      4. Градиенты
      5. Кисти
      6. Прозрачность и режимы наложения
      7. Применение обводок к объектам
      8. Создание и редактирование узоров
      9. Сетки
      10. Узоры
    5. Выбор и упорядочение объектов
      1. Выделение объектов
      2. Слои
      3. Группировка и разбор объектов
      4. Перемещение, выравнивание и распределение объектов
      5. Размещение объектов    
      6. Блокировка, скрытие и удаление объектов
      7. Создание дубликатов объектов
      8. Поворот и отражение объектов
    6. Перерисовка объектов
      1. Кадрирование изображений
      2. Трансформирование объектов
      3. Объединение объектов
      4. Вырезание, разделение и обрезка объектов
      5. Марионеточная деформация
      6. Масштабирование, наклон и искажение объектов
      7. Объекты с переходами
      8. Перерисовка с помощью оболочек
      9. Перерисовка объектов с эффектами
      10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
      11. Работа с динамическими углами
      12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
      13. Редактирование обтравочных масок
      14. Динамические фигуры
      15. Создание фигур с помощью инструмента «Создание фигур»
      16. Глобальное изменение
    7. Текст
      1. Создание текста
      2. Шрифты и оформление
      3. Форматирование текста
      4. Импорт и экспорт текста
      5. Форматирование абзацев
      6. Специальные символы
      7. Создание текста по контуру
      8. Стили символов и абзацев
      9. Табуляция
      10. Текст и шрифты
      11. Поиск отсутствующих шрифтов (технологический процесс Typekit)
      12. Обновление текста из Illustrator 10
      13. Шрифт для арабского языка и иврита
      14. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
      15. Создание эффекта 3D-текста
      16. Творческий подход к оформлению
      17. Масштабирование и поворот текста
      18. Интерлиньяж и межбуквенные интервалы
      19. Расстановка переносов и переходы на новую строку
      20. Усовершенствования работы с текстом
      21. Проверка орфографии и языковые словари
      22. Форматирование азиатских символов
      23. Компоновщики для азиатской письменности
      24. Создание текстовых проектов с переходами между объектами
      25. Создание текстового плаката с помощью трассировки изображения
    8. Создание специальных эффектов
      1. Работа с эффектами
      2. Стили графики
      3. Создание тени
      4. Атрибуты оформления
      5. Создание эскизов и мозаики
      6. Тени, свечения и растушевка
      7. Обзор эффектов
    9. Вeб-графика
      1. Лучшие методы создания веб-графики
      2. Диаграммы
      3. SVG
      4. Создание анимации
      5. Фрагменты и карты изображений
  6. Импорт, экспорт и сохранение
    1. Импорт
      1. Импорт файлов графических объектов
      2. Импорт растровых изображений
      3. Импорт графического объекта из Photoshop
      4. Помещение нескольких файлов в документ  | Illustrator CC
      5. Извлечение изображений
      6. Импорт файлов Adobe PDF
      7. Импорт файлов EPS, DCS и AutoCAD
      8. Сведения о связях
    2. Библиотеки Creative Cloud Libraries в Illustrator 
      1. Библиотеки Creative Cloud Libraries в Illustrator
    3. Диалоговое окно «Сохранить»
      1. Сохранение иллюстраций
    4. Экспорт
      1. Экспорт иллюстрации
      2. Сбор ресурсов и их массовый экспорт
      3. Упаковка файлов
      4. Создание файлов Adobe PDF
      5. Извлечение CSS | Illustrator CC
      6. Параметры Adobe PDF
      7. Информация о файле и метаданные
  7. Печать
    1. Подготовка к печати
      1. Настройка документов для печати
      2. Изменение размера и ориентации страницы
      3. Задание меток обреза для обрезки и выравнивания
      4. Начало работы с большим холстом
    2. Печать
      1. Наложение
      2. Печать с управлением цветами
      3. Печать PostScript
      4. Стили печати
      5. Метки и выпуск за обрез
      6. Печать и сохранение прозрачных графических объектов
      7. Треппинг
      8. Печать цветоделенных форм
      9. Печать градиентов, сеток и наложения цветов
      10. Наложение белого
  8. Автоматизация задач
    1. Объединение данных с помощью панели «Переменные»
    2. Автоматизация с использованием сценариев
    3. Автоматизация с использованием операций
  9. Устранение неполадок 
    1. Проблемы аварийного завершения работы при запуске
    2. Восстановление файлов после сбоя
    3. Проблемы с файлами
    4. Проблемы с драйвером ГП
    5. Проблемы устройств Wacom
    6. Проблемы с файлами DLL
    7. Проблемы с памятью
    8. Проблемы с файлом настроек
    9. Проблемы со шрифтами
    10. Проблемы с принтером
    11. Как поделиться отчетом о сбое с Adobe

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

О формате SVG

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

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

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

Настройки объекта в Illustrator влияют на то, каким будет файл SVG. Помните следующие рекомендации.

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

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

  • Растровые данные не масштабируются в средстве просмотра SVG и не могут отредактироваться, как другие элементы SVG. Старайтесь не создавать объекты, которые будут растрироваться в файле SVG. Сетчатые градиенты и объекты с градиентной заливкой, использующие эффекты «Растрировать», «Имитация», «Размытие», «Штрихи», «Искажение», «Оформление», «Резкость», «Эскиз», «Стилизация», «Текстура» и «Видео», растрируются при сохранении в формате SVG. Графические стили с этими эффектами также вызывают растрирование. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.

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

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

  • Язык сценариев (например, JavaScript) открывает неограниченные функциональные возможности для файла SVG. Перемещения с помощью курсора и клавиатуры могут вызвать сценарные функции (например, эффекты прокрутки). Сценарии могут также использовать объектную модель документов (DOM) для обращения к файлу SVG и внесения изменений (например, для вставки или удаления элементов 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 CS5 Settings/<язык>. Можно изменить или удалить существующие определения фильтра, а также добавить новые.

  1. Выберите объект или группу (или назначьте слой на палитре «Слои»).
  2. Выполните одно из действий, описанных ниже.
    • Для применения эффекта с параметрами по умолчанию выберите эффект в нижней части вложенного меню Эффект > Фильтры SVG.

    • Для применения эффекта с параметрами пользователя выберите Эффект > Фильтры SVG > Применить фильтр SVG. Выберите эффект в диалоговом окне и нажмите кнопку «Редактировать SVG-фильтр»  . Отредактируйте код по умолчанию и нажмите кнопку ОК.

    • Для создания и применения нового эффекта выберите Эффект > Фильтры SVG > Применить фильтр SVG. В диалоговом окне нажмите кнопку «Новый фильтр SVG»   и  новый код и нажмите ОК.

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

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

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

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

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

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

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

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

  • Чтобы удалить одно событие, выберите его и нажмите кнопку «Удалить» или выберите Удалить событие в меню палитры.
  • Для удаления всех событий выберите Удалить события в меню палитры.

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

  1. Нажмите кнопку «Ссылка на файлы JavaScript» .
  2. В диалоговом окне «Файлы JavaScript» выберите запись 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). Для создания стандартизированных файлов SVG, оптимизированных для Интернета, для проектов в области веб-дизайна и дизайна графического интерфейса пользователя используется новый рабочий процесс.

Доступны следующие варианты:

  • Стили: выберите способ хранения информации о визуальных стилях в разметке SVG.
    • Атрибуты презентации: использует отдельные атрибуты XML для каждого отдельного свойства стиля в каждом теге SVG. Этот формат необходим для использования ресурсов SVG с Android Studio.
    • Внутренний CSS: использует один тег <style> с классами CSS, разделяя настройки стиля между объектами, имеющими одинаковые стили. Это может привести к уменьшению размера файла.
    • Встроенный стиль: использует один атрибут style для каждого тега SVG, содержащий все свойства стиля тега, объединенные в синтаксисе CSS.

Примечание. Стиль по умолчанию для SVG имеет значение Атрибуты презентации, потому что он улучшает совместимость с распространенными инструментами разработчика, например Android Studio.

  • Шрифт. Выберите представление шрифтов в файле SVG. Контуры сохраняют определение линии  и  являются самыми совместимыми.
  • Изображения. Выберите, нужно ли при сохранении встроить изображения в документ или привязать их к документу.
  • ID объектов. Выберите способ назначения типов идентификатора (имен) объектам в файле SVG. Доступные варианты: «Имена слоев», «Минимальный» и «Уникальный». Этот параметр определяет способ обработки одинаковых имен объектов, а также именование объектов в экспортируемом файле CSS.
  • Десятичное значение. Выберите объем информации, который необходимо сохранить в зависимости от требуемой точности местоположения объектов. При увеличении десятичного значения увеличивается точность размещения объектов и, соответственно, увеличивается качество отображения визуализируемых файлов SVG. Однако при увеличении десятичного значения также увеличивается размер получаемого в результате экспорта файла SVG.
  • Уменьшить. Оптимизирует размер файла в формате SVG путем удаления пустых групп и пробелов. При выборе этого параметра также снижается удобочитаемость полученного кода SVG.
  • Адаптивный SVG. При установке этого параметра обеспечивается масштабирование созданного SVG в окне браузера. Абсолютные значения не используются.
  • Показать код. Открывает экспортированное содержимое в текстовом редакторе по умолчанию.
  • Показать в браузере (значок). Открывает изображение в веб-браузере по умолчанию.
Логотип Adobe

Вход в учетную запись