Rogapp
🖼️ Используем SVG в .NET MAUI: рисуем в Figma — вставляем в XAML
Хочешь нарисовать иконку или фигуру в Figma и вставить прямо в MAUI-приложение без лишних библиотек? Это возможно! В этой статье разберём, как это работает, как скопировать path из Figma, вставить его в XAML и что означают основные параметры.

🧩 Что такое Path?

Элемент <Path> в MAUI позволяет отрисовывать векторную графику прямо в интерфейсе. Он принимает строку Data, которая соответствует SVG path, и рендерит нужную фигуру.
  • Пример:
<Path Fill="Green"
      Stroke="Black"
      StrokeThickness="1"
      WidthRequest="100"
      HeightRequest="100"
      Aspect="UniformToFill"
      Data="M1451 725.5C1451 1126.18 1126.18 1451 725.5 1451C324.817 1451 0 1126.18 0 725.5C0 324.817 324.817 0 725.5 0C1126.18 0 1451 324.817 1451 725.5Z" />
  • Этот путь — это круг, скопированный из Figma.
🎨 Как скопировать путь из Figma
  1. Нарисуй фигуру (например, круг, иконку, кастомную форму)
  2. Выдели элемент
  3. Нажми ⌘ + Shift + C (или Ctrl + Shift + C) — это копировать SVG
  4. Вставь в текстовый редактор или прямо в XAML
  5. Найди внутри d="..." — это и есть значение для атрибута Data
💡 Пример из Figma:
<svg width="1451" height="1451" viewBox="0 0 1451 1451" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1451 725.5C1451 1126.18 1126.18 1451 725.5 1451C324.817 1451 0 1126.18 0 725.5C0 324.817 324.817 0 725.5 0C1126.18 0 1451 324.817 1451 725.5Z" fill="#D9D9D9"/>
</svg>
Ты копируешь только строку:
M1451 725.5C1451 1126.18 1126.18 1451 725.5 1451C324.817 1451 0 1126.18 0 725.5C0 324.817 324.817 0 725.5 0C1126.18 0 1451 324.817 1451 725.5Z
И вставляешь её в Data:
<Path Data="M1451 725.5C1451 1126.18 1126.18 1451 725.5 1451C324.817 1451 0 1126.18 0 725.5C0 324.817 324.817 0 725.5 0C1126.18 0 1451 324.817 1451 725.5Z" />
🧠 Что означают параметры в XAML?
⚠️ Важное про Aspect
🧪 Пример круга с Figma
<Path Fill="#00CFC5"
      Stroke="Black"
      StrokeThickness="2"
      WidthRequest="100"
      HeightRequest="100"
      Aspect="UniformToFill"
      Data="M1451 725.5C1451 1126.18 1126.18 1451 725.5 1451C324.817 1451 0 1126.18 0 725.5C0 324.817 324.817 0 725.5 0C1126.18 0 1451 324.817 1451 725.5Z" />
💡 Лайфхаки:
✅ Если SVG сложный — используй только path d="..." — остальные атрибуты Figma не нужны
✅ SVG можно вставлять прямо в XAML, но лучше избегать ViewBox/Transform
❌ Не вставляй <svg>...</svg> в XAML — только путь d=...
🧩 Альтернатива: использовать SkiaSharp или SvgImageSource
Если у тебя сложные SVG иконки с масками, градиентами и группами, используй:
  • SkiaSharp — полная отрисовка SVG
  • SvgImageSource — загрузка SVG через Image
Но для простых иконок — Path хватает с головой.
✅ Итого
🔧 Нарисовал в Figma → ⌘+Shift+C → вставил Path → получил чистую иконку прямо в UI.
Можно использовать для кнопок, иконок, фонов — без сторонних библиотек.