SVG во Flutter: упаковка, размеры и проверка ресурсов

Для отображения ресурса SVG во Flutter добавьте flutter_svg, объявите файл в pubspec.yaml и загрузите тот же путь через SvgPicture.asset. Задайте виджету размеры или подходящие ограничения макета, затем проверьте графику в приложении. Конструктор ресурса пакета описывает способ загрузки.

Разделяйте два вопроса: загрузило ли приложение нужный файл и воспроизвел ли рендерер нужную графику? Повторный экспорт рисунка не исправит ошибку ключа ресурса. Исправление ключа не упростит неподдерживаемый эффект.

Руководство использует оригинальную иллюстрацию холмов и солнца, чтобы упростить проверки. Код следует документированному API; это не отчет о тесте скомпилированного приложения.

Начните с небольшого исходника для проверки

Создайте assets/illustrations/hills.svg в проекте Flutter:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

Исходник имеет два перекрывающихся треугольных холма и отдельное янтарное солнце. Он использует явные заливки, не содержит текста и связанных изображений и оставляет видимый зазор между солнцем и холмами. Эти детали дают короткий список приемки в приложении.

Сохраните копию простого файла при последующем добавлении своей графики. Если маленький исходник работает, а замена нет, сравните структуру перед изменением всей настройки загрузки.

Ресурс SVG Flutter также отличается от XML Android VectorDrawable по способу передачи. Если назначение — нативный drawable Android, используйте руководство подготовки Android VectorDrawable вместо признания форматов взаимозаменяемыми.

Добавьте пакет и объявите точный файл

Из корня проекта Flutter используйте официальную команду установки:

flutter pub add flutter_svg

Затем добавьте ресурс под существующим разделом flutter: файла pubspec.yaml:

flutter:
  assets:
    - assets/illustrations/hills.svg

Включите запись в текущую конфигурацию вместо создания второго flutter:. Сохраните показанные отступы. Документация ресурсов Flutter определяет пути относительно pubspec.yaml и объясняет включение файлов в пакет приложения.

Сохраняйте одинаковые написание, регистр и структуру каталогов в имени файла, объявлении и вызове Dart. Для первой проверки явную запись файла проще сравнить, чем общую запись папки. Если позднее объявляете каталоги, Flutter указывает, что запись каталога включает непосредственные файлы; вложенным каталогам нужны собственные записи.

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

Загрузите графику в определенный блок

Добавьте импорты в Dart-файл виджета:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

Поместите виджет в подходящую часть экрана:

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

Блок следует пропорциям исходника. Проверьте отдельное солнце, оба цвета холмов и внешние поля перед меньшим размером. Затем используйте размеры настоящего компонента; числа выше — пример, а не минимальный размер или рекомендация производительности.

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

Подпись описывает назначение отдельной картинки. API semanticsLabel связывает ее с семантической подписью изображения. Для декоративного изображения рядом с текстом, уже передающим смысл, рассмотрите исключение изображения из семантики. excludeFromSemantics конструктора имеет приоритет над подписью. Проверяйте озвучиваемый смысл всего компонента вместо подписывания каждой фигуры отдельно.

Отличайте заглушку загрузки от ошибки

Индикатор загрузки не доказывает принятие SVG. Пакет дает placeholderBuilder для получения или декодирования, а текущий API errorBuilder предоставляет виджет при сбое загрузки.

Пример выше использует короткий запасной текст. При разработке намеренно измените путь Dart на несуществующий файл и проверьте распознаваемость сбоя. Верните правильный путь перед продолжением. Это проверяет представление ошибки без изменения рисунка.

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

Решите, сохранить ли палитру или применить тонирование

Оставьте colorFilter незаданным, если холмы должны остаться бирюзовым и темно-синим с янтарным солнцем. Для намеренно одноцветного оформления добавьте фильтр вроде:

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

Пакет описывает такое тонирование. Справочник BlendMode Flutter объясняет: srcIn использует непрозрачность целевого изображения, игнорируя его цветовые каналы. Поэтому единое тонирование убирает различия исходной палитры; это выбор дизайна, а не исправление сохранности цветов.

Для холмов проверьте, ухудшает ли читаемость потеря контраста двух перекрывающихся треугольников. Сохраните палитру, если области должны различаться. Пакет также описывает ColorMapper для выборочных замен, но при диагностике начните с более простого случая без фильтра.

Упрощайте возможности только после загрузки файла

Документация flutter_svg рекомендует атрибуты представления при экспорте из Illustrator из-за неполной поддержки CSS, а также встроенные вместо внешне связанных изображений. Она предоставляет проверку совместимости через компилятор. Следуйте ей в собственном окружении Flutter/Dart при исследовании сложного ресурса.

Браузерный предпросмотр — полезный образец нужного внешнего вида, а не доказательство идентичного рендеринга каждой возможности SVG пакетом. Храните оригинальную графику и упрощайте копию по одному изменению.

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

Для семейства ресурсов UI сравнивайте визуальные размеры и интервалы вместе. Руководство подготовки иконок UI-kit помогает проверить согласованность.

Используйте векторизацию, если нужно восстановить исходник

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

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

Для холмов ищите отдельное солнце и разделение двух цветных склонов. Подтвердите нужную структуру файла; руководство по встроенному растру объясняет, почему оболочка SVG может содержать пиксели.

Оцените ресурс в приложении перед выбором оптимизации. Процесс не обещает в целом меньший размер или большую скорость SVG относительно PNG.

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

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

Как добавить изображение SVG во Flutter? Добавьте flutter_svg, объявите ресурс SVG в pubspec.yaml и загрузите совпадающий путь через SvgPicture.asset. Задайте размеры или подходящие ограничения и проверьте результат.

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

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

Обязательно ли превращать PNG в SVG для Flutter? Нет. Используйте подходящий растр, если он соответствует графике. Векторизация — возможный вариант для восстановления редактируемых фигур из простого растрового исходника.

Источники

1. flutter_svg — Installing — Установка пакета и импорт Dart.
2. Flutter — Adding assets and images — Объявления ресурсов, пути и упаковка.
3. flutter_svg — SvgPicture.asset — Загрузка ресурса, размеры, вписывание и семантика.
4. flutter_svg — errorBuilder — Представление ошибки отдельно от заглушек загрузки.
5. flutter_svg — semanticsLabel — Семантическое назначение изображения.
6. Flutter — BlendMode — Обработка цвета srcIn на основе непрозрачности.
7. flutter_svg — Package documentation — Тонирование, выборочные замены цвета, экспорт и проверки совместимости.

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