SVG в WPF: рендерер или рисунок XAML

SVG открывается в браузере, но вставка его имени файла в WPF Image не даёт такой же процесс отрисовки. Сначала выберите, что именно получит приложение: SVG, обработанный библиотекой, объекты рисования WPF или растровый экспорт.

Встроенные кодеки изображений WPF включают PNG и JPEG, но не перечисляют SVG. Элемент Image также может показывать DrawingImage, поэтому векторное отображение не обязательно означает прямую загрузку SVG-файла. Microsoft описывает их как отдельные способы работы с изображениями и использования рисунка как источника изображения.

Это руководство использует собственную иконку закладки для конкретизации выбора. SVG и XAML ниже написаны вручную; это не тест конвертера и не снимок приложения Windows.

Выберите представление перед изменением файла

Этот выбор касается объекта, отображаемого приложением. Он не определяет, должен ли дизайнер хранить редактируемый SVG-оригинал. Сохраняйте его, даже если приложение получает PNG.

Сначала попробуйте небольшой штатный DrawingImage

Для простой иконки написанный вручную рисунок даёт полезный эталон без добавления парсера SVG. Microsoft показывает структуру: установите Image.Source в DrawingImage, затем назначьте рисунок его свойству Drawing. Следующий собственный пример следует этому документированному шаблону.

Вот дизайн SVG: бирюзовая закладка и отдельный коралловый круг. Сохраните его как bookmark.svg, если нужен исходник для сравнения в редакторе.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Поместите этот Image в контейнер макета существующего окна WPF, например Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

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

Координаты — намеренные авторские решения. Сравните два фрагмента: закладка использует те же точки, а круг — тот же центр и радиус. Это небольшое ручное преобразование, которое можно проверить, а не рецепт перевода любой возможности SVG в XAML.

Исходные файлы проверены как XML, но этот пример не собран и не отрисован в приложении Windows WPF. Проверьте его в своём проекте перед применением.

Проверьте границы и кисти перед повторным использованием

Начните с указанного размера. Убедитесь, что нижняя выемка закладки остаётся видимой, а круг — отдельным. Затем попробуйте более широкое или высокое место в макете. Stretch="Uniform" сохраняет пропорции при вписывании в доступную область, как описывают рекомендации Microsoft по растягиванию изображений.

Измените коралловое значение Brush на другой цвет. Это намеренная правка объекта рисования WPF, а не доказательство, что произвольные импортированные части SVG предоставят такие же удобные настройки.

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

Используйте рендерер, если входным форматом остаётся SVG

Если ручная поддержка геометрии WPF непрактична, оцените библиотеку, которая явно читает SVG для WPF. Пакет SharpVectors.Wpf предоставляет компоненты разбора, преобразования и просмотра SVG. Страница пакета — подходящее место для проверки текущей версии, целевых платформ и зависимостей перед добавлением в проект.

Вводная документация SharpVectors описывает преобразование в объекты рисования WPF и примеры отображения через изображения. Это другой способ, чем ожидание декодирования SVG-файла обычным растровым процессом.

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

1. Загрузка: находит ли выбранный пример файл или ресурс приложения в проекте?
2. Представление: возвращает ли API объекты рисования, создаёт XAML или отрисовывает растр для вашей задачи?
3. Внешний вид: правильны ли выемка, отдельный круг, цвета и пустые отступы в работающем приложении?
4. Развёртывание: нужна ли результату сборка библиотеки времени выполнения или другие ресурсы на целевом компьютере?

Следуйте примерам установленного выпуска. SharpVectors описывает настройку IncludeRuntime, отмечает TextAsGeometry как устаревшую и предупреждает об изменениях пространств имён в версии 2.0. Это причины проверять старые фрагменты перед копированием настроек, а не ожидать вечной пригодности одной конфигурации преобразования. Документация SharpVectors

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

Не заимствуйте SvgImageSource из другого фреймворка XAML

Поиск решения может привести к справочнику Microsoft SvgImageSource. Документация класса UWP помещает этот тип в Windows.UI.Xaml.Media.Imaging. Это другой API, чем элементы управления и классы мультимедиа WPF System.Windows.

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

Решите, достаточно ли PNG

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

Также проверьте содержимое SVG перед затратой времени на библиотеку отрисовки. Если он лишь встраивает растр, импорт оболочки не сделает картинку редактируемой геометрией. Руководство по встроенному растру SVG показывает, что проверять. Для коллекции иконок применяйте одинаковые проверки отступов и силуэтов по набору; наш процесс подготовки UI-иконок разбирает этот этап графики.

Если закладка или логотип сохранились только в PNG или JPG, процесс преобразования изображения в вектор PerfectVector может помочь подготовить редактируемый вариант SVG. Проверьте восстановленные силуэт, выемку и отдельные детали перед выбором способа передачи в WPF. Векторизация готовит графику; она не устанавливает рендерер WPF и не гарантирует преобразование в XAML с геометрией WPF.

Более общее руководство по векторизации изображений объясняет этот этап восстановления исходника. Когда исходник готов, проверки приложения всё ещё выполняются в WPF.

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

Может ли WPF Image загружать SVG-файл напрямую? Документированные встроенные кодеки изображений WPF не включают SVG. Используйте библиотеку с поддержкой SVG, предоставьте объекты рисования WPF через DrawingImage или поддерживаемый растровый формат, например PNG.

DrawingImage — то же самое, что SVG-файл? Нет. DrawingImage отображает объекты рисования WPF. Библиотека SVG может создавать их, или вы можете написать их напрямую, как в небольшом примере здесь.

Можно ли использовать пример UWP SvgImageSource в WPF? Не считайте его встроенным API WPF. Справочник UWP относится к другому пространству имён и фреймворку; выбирайте код и зависимости реального приложения.

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

Источники

1. Microsoft — WPF Imaging Overview — Встроенные растровые форматы и поведение растягивания изображений.
2. Microsoft — Use a Drawing as an Image Source — Штатный DrawingImage и структура объектов рисования.
3. SharpVectors — Getting Started — Преобразование в рисунки WPF, настройки времени выполнения и документированные оговорки миграции.
4. NuGet — SharpVectors.Wpf — Текущий пакет и сведения о совместимости.
5. Microsoft — UWP SvgImageSource Class — Граница фреймворка и пространства имён часто путаемого API.

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