Используем SVG в .NET MAUI: рисуем в Figma — вставляем в XAML
Хочешь нарисовать иконку или фигуру в Figma и вставить прямо в MAUI-приложение без лишних библиотек? Это возможно! В этой статье разберём, как это работает, как скопировать path из Figma, вставить его в XAML и что означают основные параметры.
Что такое Path?
Элемент в MAUI позволяет отрисовывать векторную графику прямо в интерфейсе. Он принимает строку Data, которая соответствует SVG path, и рендерит нужную фигуру. Пример:
Этот путь — это круг, скопированный из Figma.
Как скопировать путь из Figma
Нарисуй фигуру (например, круг, иконку, кастомную форму) Выдели элемент Нажми ⌘ + Shift + C (или Ctrl + Shift + C) — это копировать SVG Вставь в текстовый редактор или прямо в XAML Найди внутри d="..." — это и есть значение для атрибута Data 💡 Пример из Figma:
Ты копируешь только строку:
И вставляешь её в Data:
Что означают параметры в XAML?
Атрибут - Что делает
Data - Сам путь из Figma или SVG, описывает фигуру
Fill - Заливка — можно задать цвет (например, Red, #00CFC5)
Stroke - Цвет обводки (например, Black) StrokeThickness
WidthRequest - Ширина Path (в пикселях, может адаптироваться)
HeightRequest - Высота Path (часто нужна вместе с WidthRequest)
Aspect - Способ масштабирования: None, Fill, Uniform, UniformToFill
HorizontalOptions / VerticalOptions - Позиционирование в layout'е
Важное про Aspect
Значение - Описание Fill - Заполнит всё пространство, без сохранения пропорций Uniform - Сохраняет пропорции, вписывает в контейнер UniformToFill - Сохраняет пропорции, но может выходить за границы None - Не масштабируется вообще
💡 Лайфхаки
✅ Если SVG сложный — используй только path d="..." — остальные атрибуты Figma не нужны ✅ SVG можно вставлять прямо в XAML, но лучше избегать ViewBox/Transform ❌ Не вставляй ... в XAML — только путь d=...
Альтернатива: использовать SkiaSharp или SvgImageSource
Если у тебя сложные SVG иконки с масками, градиентами и группами, используй: SkiaSharp — полная отрисовка SVG SvgImageSource — загрузка SVG через Image Но для простых иконок — Path хватает с головой.
Итого
Нарисовал в Figma → ⌘+Shift+C → вставил Path → получил чистую иконку прямо в UI. Можно использовать для кнопок, иконок, фонов — без сторонних библиотек.