如何在Flutter原生端使用SVG图片创建启动屏

架构老林

2026-7-23

在Flutter中使用SVG原生实现启动屏

问题描述

我想要在Flutter中创建启动屏，拥有SVG格式的图片文件，不想将其转换为JPG或PNG格式。是否有办法直接使用SVG图片文件在Flutter中创建启动屏？要求在原生端实现该启动屏。附SVG代码如下：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="800px" height="800px" viewBox="0 0 45.917 45.917"
     xml:space="preserve">
<g>
    <g>
        <path d="M33.523,28.334c-0.717,1.155-1.498,2.358-2.344,3.608c7.121,1.065,10.766,3.347,10.766,4.481
            c0,1.511-6.459,5.054-18.986,5.054c-12.528,0-18.988-3.543-18.988-5.054c0-1.135,3.645-3.416,10.768-4.481
            c-0.847-1.25-1.628-2.453-2.345-3.608C5.365,29.661,0,32.385,0,36.424c0,5.925,11.551,9.024,22.959,9.024s22.958-3.1,22.958-9.024
            C45.917,32.385,40.553,29.661,33.523,28.334z"/>
        <path d="M22.96,36.047c1.032,0,2.003-0.491,2.613-1.325c3.905-5.33,10.813-15.508,10.813-20.827
            c0-7.416-6.012-13.427-13.427-13.427c-7.417,0-13.427,6.011-13.427,13.427c0,5.318,6.906,15.497,10.812,20.827
            C20.957,35.556,21.928,36.047,22.96,36.047z M17.374,13.63c0-3.084,2.5-5.584,5.585-5.584c3.084,0,5.584,2.5,5.584,5.584
            s-2.5,5.584-5.584,5.584C19.874,19.215,17.374,16.715,17.374,13.63z"/>
    </g>
</g>
</svg>

解决方案

可以直接在Android和iOS原生端分别配置SVG作为启动屏，无需转换为位图格式，以下是具体步骤：

Android 原生实现步骤

1. 放置SVG资源

将你的SVG文件命名为splash_icon.svg，复制到android/app/src/main/res/drawable目录下。

2. 创建启动屏布局

在android/app/src/main/res/layout目录下新建splash_screen.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/splash_icon" />
</LinearLayout>

3. 配置启动屏样式

打开android/app/src/main/res/values/styles.xml，添加启动屏专属样式：

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@layout/splash_screen</item>
    <item name="android:windowFullscreen">true</item>
</style>

4. 修改Manifest配置

打开android/app/src/main/AndroidManifest.xml，将MainActivity的默认主题替换为刚才创建的SplashTheme：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/SplashTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <meta-data
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme" />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

iOS 原生实现步骤

1. 添加SVG到项目

打开iOS项目（ios/Runner.xcworkspace），右键点击Runner目录，选择"Add Files to 'Runner'"，选中你的SVG文件，确保勾选Copy items if needed和Add to targets: Runner。

2. 配置Launch Screen

打开LaunchScreen.storyboard，删除默认控件后：

拖拽ImageView到画布中央
在属性面板中，将ImageView的Image设置为你的SVG文件
添加约束：设置ImageView的宽高或居中约束，确保在不同屏幕上适配
设置背景色：选中根View，在属性面板修改Background为所需颜色

3. 确认启动屏配置

在Xcode中选择Runner项目，进入General标签，在App Icons and Launch Images部分，确认Launch Screen File选择的是LaunchScreen.storyboard。

注意事项

Android 5.0（API 21）及以上原生支持SVG，低版本可考虑使用第三方兼容库
iOS 13及以上原生支持SVG作为ImageView源文件，若需兼容iOS 12及以下，建议将SVG转为PDF格式（Xcode支持PDF矢量资源）

内容的提问来源于stack exchange，提问作者Harry