SVG в SwiftUI: добавление ресурсов и управление цветом

Для статичного SVG, включённого в приложение SwiftUI, поместите графику в каталог ресурсов Xcode и загрузите изображение по имени ресурса. Затем решите, сохранять исходные цвета или превращать его в окрашенный силуэт. Apple добавила ресурсы изображений SVG в Xcode 12; примечания к выпуску указывают сохранение вектора для целевых версий iOS 13, iPadOS 13 и macOS 10.15 или новее.

Этот процесс работы с каталогом отличается от скачивания SVG-файла во время работы приложения. Он также отличается от создания собственного SF Symbol. Выберите способ передачи перед изменением графики или добавлением пакета рендерера.

Выберите способ для конкретного изображения

SVG — исходный файл. Следующий шаг определяется тем, как приложение получает и использует его.

Это руководство использует первый способ. Небольшая двухцветная чашка помогает заметить две отдельные ошибки: потерю кораллового цвета пара и заполнение открытой ручки. Для их диагностики не нужна сложная иллюстрация.

Руководство по подготовке UI-кита разбирает более общую работу по согласованию набора. Здесь вопрос в том, как один принятый SVG попадает в SwiftUI Image.

Подготовьте небольшой исходник с видимыми признаками для проверки

Сохраните этот оригинальный пример как CupMark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
    fill="#147D73"/>
  <path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
    fill="none" stroke="#147D73" stroke-width="5"/>
  <path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
    fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>

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

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

Храните редактируемый оригинал отдельно от копии для приложения. Если иконка содержит буквы, решите вопрос нужного шрифта или перевода в контуры в оригинале; см. процесс изменения шрифтов SVG. Изменение стиля текста SwiftUI не заменяет проверку букв внутри изображения.

Добавьте графику как обычный набор изображений

Откройте каталог ресурсов приложения, обычно Assets.xcassets. Добавьте новый набор изображений и назовите его CupMark. Перетащите SVG в соответствующую область изображения. Руководство Apple по каталогам ресурсов описывает создание наборов, импорт ресурсов и варианты через инспектор Attributes.

Используйте набор изображений для этого примера. Не выбирайте процесс создания изображения-символа только потому, что исходник заканчивается на .svg.

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

CupMark — имя ресурса изображения, используемое ниже. Это не URL скачивания и не путь к исходному SVG в папке дизайна. Инициализатор Apple Image ищет ресурс по имени в bundle; по умолчанию — основном bundle. Если изображение принадлежит другому bundle ресурсов, укажите его намеренно.

Сохраните различие имени файла и имени ресурса в заметках передачи. Коллега может переименовать набор ресурсов без изменения исходного имени файла дизайна, а код должен следовать имени реально загружаемого ресурса.

Сравните исходный и шаблонный режимы

Используйте это представление после добавления набора CupMark:

import SwiftUI
 
struct CupComparison: View {
    var body: some View {
        HStack(spacing: 24) {
            Image("CupMark")
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .accessibilityLabel("Cup with rising steam")
 
            Image("CupMark")
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .foregroundStyle(Color.blue)
                .accessibilityLabel("Cup with rising steam")
        }
        .padding()
    }
}

Левый экземпляр явно запрашивает исходный режим. Правый — шаблонный и задаёт синий как стиль переднего плана. Документация Apple по шаблонному режиму определяет его как окрашивание непрозрачных пикселей цветом переднего плана. Это обработка силуэта, а не команда перекрасить лишь один контур SVG.

Для чашки это означает, что правый вариант должен иметь синие пар и чашку. Кораллово-бирюзовое различие намеренно исчезает. Отверстие ручки должно оставаться пустым. Если приложению нужно менять пар независимо от чашки, выберите структуру передачи, раскрывающую эти части отдельно, вместо ожидания поконтурного оформления от одного шаблонного изображения.

Модификаторы также явно задают решение о размере. resizable() включает изменение размера изображения, а scaledToFit() сохраняет пропорции внутри рамки в 48 пунктов. Рамка представления и собственный холст графики — отдельные границы: дополнительное пустое пространство внутри SVG остаётся частью исходника.

Это документированный пример для проверки в проекте, а не отчёт о тесте нативной отрисовки. Проверьте реальное собранное приложение, включая самый маленький размер использования знака. Чёткий просмотр в 48 пунктов не подтверждает полезность обеих линий пара при 16 пунктах.

Диагностируйте видимый результат перед изменением файла

Отсутствие изображения, изменённый цвет и плохой силуэт малого размера требуют разных исправлений.

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

Для иконки рядом с видимым текстом проверяйте доступное имя в полном контексте элемента управления. Пример задаёт описание каждому изображению сравнения. Декоративному повтору рядом с уже именованным элементом управления может требоваться другое обращение с доступностью; не переносите подписи представления сравнения механически в каждое размещение.

Решайте вопросы SVG во время выполнения и SF Symbols отдельно

Именованное изображение каталога — не API загрузки и разбора произвольного XML SVG. Если файл приходит после сборки приложения, выберите рендерер, явно обрабатывающий такой вход. Например, README проекта SVGView описывает парсер и рендерер SVG, написанные в SwiftUI. Оцените реальные возможности SVG ваших файлов; цель пакета иметь широкую поддержку не доказывает правильную отрисовку всего вашего набора.

Предусмотрите загрузку, обработку ошибок и неподдерживаемых файлов в реализации этой возможности во время выполнения. Не добавляйте пакет лишь потому, что старый ответ говорит об отсутствии SVG в SwiftUI, если вам нужно статичное изображение, уже покрытое каталогом ресурсов.

У собственных SF Symbols другой контракт исходника. Apple описывает процесс создания и проверки на основе шаблона, включая варианты символа и информацию выравнивания. Обычный SVG чашки не приобретает эти свойства при помещении в набор изображений. Используйте этот процесс, если приложению нужно поведение символов, и сохраняйте нужную структуру шаблона.

Форматы передачи платформам стоит проверять независимо. Если та же графика идёт и в Android, следуйте руководству по передаче VectorDrawable; принятие импортёром одной платформы не доказывает принятия другой.

Когда ваша иконка существует только в PNG

Если редактируемый исходник утрачен, а PNG — простая иконка, конвертер PNG в SVG PerfectVector может помочь подготовить вариант графики. Обрежьте до иконки, проверьте просмотр на потерянные отверстия, слившиеся детали и нежелательные фоновые фигуры, затем сравните с оригиналом. Скачайте принятый SVG и протестируйте через те же проверки набора изображений и режима отрисовки.

Используйте исходный вектор, если он есть. Оставляйте фотографии и графику с множеством эффектов растровыми, если так лучше сохраняется внешний вид. Векторизация готовит геометрию; она не компилирует каталог Xcode, не выбирает bundle ресурсов и не создаёт шаблон SF Symbols с нужными вариантами.

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

Частые вопросы

Может ли SwiftUI использовать SVG из каталога ресурсов? Да. Xcode поддерживает ресурсы изображений SVG. Добавьте файл в обычный набор изображений и загрузите именованный ресурс через Image. Проверьте целевую версию и реальную сборку каталога, не считая это поддержкой произвольных SVG-файлов во время выполнения.

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

Может ли Image загружать SVG по веб-адресу? Именованный инициализатор Image — поиск ресурса, а не парсер SVG по URL. Файлы SVG во время выполнения требуют подходящего процесса отрисовки и загрузки, проверенного на реальных исходниках.

Набор SVG-изображений — то же самое, что собственный SF Symbol? Нет. Собственные символы используют шаблон с нужной структурой, вариантами, информацией выравнивания и проверкой. Обычный набор SVG-изображений не предоставляет этих свойств автоматически.

Источники

1. Apple — Xcode 12 Release Notes — Поддержка SVG-ресурсов и документированные целевые версии с сохранением вектора.
2. Apple — Managing assets with asset catalogs — Наборы ресурсов, области импорта и варианты.
3. Apple — Image init(_:bundle:) — Поиск именованного ресурса и bundle.
4. Apple — Image.TemplateRenderingMode — Исходный и шаблонный режимы отрисовки.
5. Apple — resizable(capInsets:resizingMode:) — Явное поведение изменения размера изображения.
6. Apple — scaledToFit() — Вписывание с сохранением пропорций.
7. Apple — Creating custom symbol images for your app — Шаблоны собственных символов, варианты и проверка.
8. Exyte — SVGView — Отдельное решение разбора и отрисовки SVG для SwiftUI.

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