少有人走的路-Avalonia学习（十一）SVG图形显示

SVG图形显示

SVG资源：

heart.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>

home.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
  <polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>

settings.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="3"></circle>
  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>

star.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>

user.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
  <circle cx="12" cy="7" r="4"></circle>
</svg>

App.axaml

<Application 
    x:Class="_11_SVGGraphics.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Application.Styles>
        <FluentTheme  />
    </Application.Styles>

</Application>

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:svg="clr-namespace:Avalonia.Svg;assembly=Avalonia.Svg"
        xmlns:local="clr-namespace:_11_SVGGraphics"
        x:DataType="local:MainWindow"
        x:Class="_11_SVGGraphics.MainWindow" 
        Title="SVG演示（外置文件版）"
        Width="600" Height="550">

    <ScrollViewer>
        <StackPanel Margin="20" Spacing="25">

            <TextBlock Text="SVG 矢量图形演示（外置文件）" FontSize="20" FontWeight="Bold"/>

            <!-- ✅ 这里全部使用 外置SVG 文件，无任何内置代码 -->
            <Border Background="#F5F5F5" Padding="15" CornerRadius="8">
                <StackPanel Spacing="15">
                    <TextBlock Text="1. 加载外置 SVG 文件" FontSize="16" FontWeight="Bold"/>

                    <WrapPanel HorizontalAlignment="Center" >
                        <svg:Svg Width="60" Height="60" Path="avares://11_SVGGraphics/Assets/home.svg"/>
                        <svg:Svg Width="60" Height="60" Path="avares://11_SVGGraphics/Assets/settings.svg"/>
                        <svg:Svg Width="60" Height="60" Path="avares://11_SVGGraphics/Assets/user.svg"/>
                        <svg:Svg Width="60" Height="60" Path="avares://11_SVGGraphics/Assets/star.svg"/>
                        <svg:Svg Width="60" Height="60" Path="avares://11_SVGGraphics/Assets/heart.svg"/>
                    </WrapPanel>

                    <TextBlock Text="提示：SVG 是矢量格式，放大缩小都不会失真"
                               FontSize="12"
                               Foreground="Gray"
                               HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>

            <Border Background="#F5F5F5" Padding="15" CornerRadius="8">
                <StackPanel Spacing="15">
                    <TextBlock Text="2. 路径绘制矢量图形（代码绘制）" FontSize="16" FontWeight="Bold"/>

                    <Grid ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto">
                        <Border Grid.Column="0" Grid.Row="0" Background="White" Padding="10" Margin="5" CornerRadius="5">
                            <StackPanel HorizontalAlignment="Center">
                                <PathIcon Data="{Binding Geometry1}" Width="50" Height="50" Foreground="#6200EE"/>
                                <TextBlock Text="圆形" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                            </StackPanel>
                        </Border>
                        <Border Grid.Column="1" Grid.Row="0" Background="White" Padding="10" Margin="5" CornerRadius="5">
                            <StackPanel HorizontalAlignment="Center">
                                <PathIcon Data="{Binding Geometry2}" Width="50" Height="50" Foreground="#03DAC6"/>
                                <TextBlock Text="方形" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                            </StackPanel>
                        </Border>
                        <Border Grid.Column="2" Grid.Row="0" Background="White" Padding="10" Margin="5" CornerRadius="5">
                            <StackPanel HorizontalAlignment="Center">
                                <PathIcon Data="{Binding Geometry3}" Width="50" Height="50" Foreground="#CF6679"/>
                                <TextBlock Text="三角形" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                            </StackPanel>
                        </Border>
                        <Border Grid.Column="0" Grid.Row="1" Background="White" Padding="10" Margin="5" CornerRadius="5">
                            <StackPanel HorizontalAlignment="Center">
                                <PathIcon Data="{Binding Geometry4}" Width="50" Height="50" Foreground="#FF9800"/>
                                <TextBlock Text="星形" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                            </StackPanel>
                        </Border>
                        <Border Grid.Column="1" Grid.Row="1" Background="White" Padding="10" Margin="5" CornerRadius="5">
                            <StackPanel HorizontalAlignment="Center">
                                <PathIcon Data="{Binding Geometry5}" Width="50" Height="50" Foreground="#4CAF50"/>
                                <TextBlock Text="心形" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                            </StackPanel>
                        </Border>
                        <Border Grid.Column="2" Grid.Row="1" Background="White" Padding="10" Margin="5" CornerRadius="5">
                            <StackPanel HorizontalAlignment="Center">
                                <PathIcon Data="{Binding Geometry6}" Width="50" Height="50" Foreground="#2196F3"/>
                                <TextBlock Text="箭头" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                            </StackPanel>
                        </Border>
                    </Grid>
                </StackPanel>
            </Border>

            <Border Background="#E3F2FD" Padding="15" CornerRadius="8">
                <StackPanel Spacing="10">
                    <TextBlock Text="学习要点" FontSize="16" FontWeight="Bold" Foreground="#1565C0"/>
                    <TextBlock Text="- SVG 是基于 XML 的矢量图形格式，放大不失真" TextWrapping="Wrap"/>
                    <TextBlock Text="- Avalonia.Svg 加载外部 .svg 文件" TextWrapping="Wrap"/>
                    <TextBlock Text="- PathIcon 使用路径数据绘制矢量图形" TextWrapping="Wrap"/>
                    <TextBlock Text="- 适合图标、Logo、插画等需要缩放的场景" TextWrapping="Wrap"/>
                </StackPanel>
            </Border>

        </StackPanel>
    </ScrollViewer>
</Window>

MainWindow.axaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;

namespace _11_SVGGraphics;

public partial class MainWindow : Window
{
    // 提供 XAML 里绑定的矢量图形数据
    public Geometry Geometry1 { get; } = Geometry.Parse("M 25,0 A 25,25 0 0 1 50,25 A 25,25 0 0 1 0,25 A 25,25 0 0 1 25,0 Z");
    public Geometry Geometry2 { get; } = Geometry.Parse("M 0,0 H 50 V 50 H 0 Z");
    public Geometry Geometry3 { get; } = Geometry.Parse("M 25,0 L 50,50 L 0,50 Z");
    public Geometry Geometry4 { get; } = Geometry.Parse("M25 0L31.75 18.25L50 18.25L35.875 29.75L41.25 50L25 37.5L8.75 50L14.125 29.75L0 18.25L18.25 18.25Z");
    public Geometry Geometry5 { get; } = Geometry.Parse("M25 40C-16.67 15 40 -10 25 30C10 -10 66.67 15 25 40Z");
    public Geometry Geometry6 { get; } = Geometry.Parse("M 0,25 L 50,25 M 25,0 L 50,25 L 25,50");

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this; // 关键：让绑定生效
    }
}

效果：

少有人走的路

勇哥的工业自动化技术网站

Avalonia学习（十一）SVG图形显示2026-03-26 10:37:33

« 2026年3月 »
一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31