ภาพ SVG ใน Flutter: รวมในแอป กำหนดขนาด และตรวจแอสเซ็ต

หากต้องแสดงแอสเซ็ต SVG ใน Flutter ให้เพิ่ม flutter_svg ประกาศไฟล์ใน pubspec.yaml และโหลดพาธเดียวกันด้วย SvgPicture.asset กำหนดมิติ widget หรือข้อจำกัดการจัดวางที่เหมาะ แล้วตรวจงานภาพในแอป ตัวสร้างสำหรับแอสเซ็ตของแพ็กเกจ อธิบายวิธีโหลดนี้

แยกสองคำถาม: แอปโหลดไฟล์ที่ต้องการหรือไม่ และตัวเรนเดอร์แสดงงานตามที่ตั้งใจหรือไม่ การส่งออกรูปใหม่ไม่แก้คีย์แอสเซ็ตสะกดผิด การแก้คีย์ไม่ลดความซับซ้อนของเอฟเฟกต์ที่ไม่รองรับ

ตัวอย่างนี้ใช้ภาพเนินเขากับดวงอาทิตย์ที่สร้างเองเพื่อให้ตรวจได้สะดวก โค้ดใช้ API ตามเอกสาร ไม่ใช่รายงานผลทดสอบแอปที่คอมไพล์แล้ว

เริ่มจากต้นฉบับเล็กที่ตรวจได้

สร้าง assets/illustrations/hills.svg ในโครงการ Flutter:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

ต้นฉบับมีเนินสามเหลี่ยมสองลูกซ้อนกันและดวงอาทิตย์สีอำพันที่แยกออกมา ใช้สีเติมชัดเจน ไม่มีข้อความหรือภาพเชื่อมโยง และมีช่องว่างที่เห็นระหว่างดวงอาทิตย์กับเนิน รายละเอียดเหล่านี้ให้รายการยอมรับสั้น ๆ เมื่อตรวจแอป

เก็บสำเนาไฟล์เรียบง่ายนี้ไว้ขณะค่อย ๆ ใส่งานของคุณภายหลัง หากต้นฉบับเล็กทำงานแต่ไฟล์แทนล้มเหลว ให้เทียบโครงสร้างก่อนเปลี่ยนการตั้งค่าโหลดทั้งหมด

แอสเซ็ต SVG ของ Flutter เป็นวิธีส่งมอบต่างจาก XML Android VectorDrawable ด้วย หากปลายทางเป็น drawable ของ Android โดยตรง ใช้ คู่มือเตรียม Android VectorDrawable แทนการถือว่าสองรูปแบบใช้แทนกันได้

เพิ่มแพ็กเกจและประกาศไฟล์ให้ตรง

จากรากโครงการ Flutter ใช้ คำสั่งติดตั้งอย่างเป็นทางการ:

flutter pub add flutter_svg

จากนั้นเพิ่มรายการแอสเซ็ตนี้ใต้ส่วน flutter: ที่มีอยู่ใน pubspec.yaml:

flutter:
  assets:
    - assets/illustrations/hills.svg

รวมรายการเข้าการตั้งค่าปัจจุบันแทนสร้างส่วน flutter: ที่สอง คงการเยื้องตามตัวอย่าง เอกสารแอสเซ็ต Flutter กำหนดพาธเหล่านี้สัมพันธ์กับ pubspec.yaml และอธิบายว่าไฟล์ในรายการเข้าสู่ bundle แอปอย่างไร

ใช้ตัวสะกด ตัวพิมพ์ใหญ่เล็ก และโครงสร้างไดเรกทอรีเดียวกันในชื่อไฟล์ การประกาศ และการเรียก Dart สำหรับการตรวจแรกนี้ รายการไฟล์ชัดเจนเทียบง่ายกว่ารายการโฟลเดอร์กว้าง หากภายหลังประกาศไดเรกทอรี เอกสาร Flutter ระบุว่ารายการไดเรกทอรีครอบคลุมไฟล์โดยตรงของมัน ไดเรกทอรีย่อยต้องมีรายการของตนเอง

หลังเปลี่ยนการตั้งค่าแอสเซ็ต บิลด์ใหม่และเรียกแอปด้วยขั้นตอนพัฒนาปกติ อย่าคิดว่าไฟล์ที่เห็นในโปรแกรมแก้ไขรวมอยู่ในแอปที่กำลังดูแล้ว

โหลดงานภาพในกล่องที่กำหนด

เพิ่ม imports เหล่านี้ในไฟล์ Dart ที่มี widget:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

วาง widget นี้ในส่วนหน้าจอที่เหมาะสม:

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

กล่องตามสัดส่วนต้นฉบับ ตรวจดวงอาทิตย์ที่แยก สีเนินทั้งสอง และระยะขอบนอกก่อนลองขนาดเล็กกว่า จากนั้นใช้มิติที่คอมโพเนนต์จริงต้องการ ตัวเลขด้านบนเป็นตัวอย่าง ไม่ใช่ขนาดขั้นต่ำหรือคำแนะนำประสิทธิภาพ

เอกสารตัวสร้าง แนะนำมิติชัดเจนหรือข้อจำกัดการจัดวางที่แน่นอน เพื่อไม่ให้การโหลดเปลี่ยนผังโดยไม่คาดหมาย หากงานดูเล็กเกินในกล่อง ตรวจพื้นที่ว่างใน viewBox และมิติ widget

ป้ายกำกับอธิบายจุดประสงค์ของภาพที่อยู่ลำพังนี้ API semanticsLabel เชื่อมกับป้ายความหมายของภาพ สำหรับภาพตกแต่งข้างข้อความที่สื่อความหมายแล้ว พิจารณาตัดภาพออกจาก semantics แทน ตัวเลือก excludeFromSemantics ของตัวสร้างมีลำดับเหนือป้าย ตรวจความหมายที่ถูกอ่านของทั้งคอมโพเนนต์แทนการตั้งป้ายทุกรูปทรงแยกกัน

แยกตัวแทนระหว่างโหลดออกจากข้อผิดพลาด

ตัวบอกกำลังโหลดไม่พิสูจน์ว่า SVG ถูกยอมรับ แพ็กเกจมี placeholderBuilder สำหรับช่วงรับหรือถอดรหัส ขณะที่ API errorBuilder ปัจจุบันให้ widget เมื่อการโหลดภาพล้มเหลว

ตัวอย่างด้านบนใช้ข้อความสั้นสำรอง ระหว่างพัฒนา ตั้งใจเปลี่ยนพาธ Dart เป็นชื่อไฟล์ที่ไม่มีแล้วตรวจว่ารับรู้ความล้มเหลวได้ คืนพาธที่ถูกก่อนต่อ นี่ทดสอบการแสดงความล้มเหลวโดยไม่เปลี่ยนรูป

จากนั้นทดสอบต้นฉบับจริง หากยังล้มเหลว ตรวจผลวินิจฉัยและเทียบพาธประกาศก่อน ตัวอย่างเครือข่ายที่แสดง SVG อื่นได้ไม่ได้ยืนยันว่าไฟล์ในเครื่องถูกรวมไว้หรือรองรับคุณสมบัติของมัน

เลือกว่าจะเก็บชุดสีหรือใส่สีเดียว

ปล่อย colorFilter ไม่ตั้งค่าเมื่อเนินต้องเป็นเขียวอมฟ้าและน้ำเงินเข้มพร้อมดวงอาทิตย์อำพัน สำหรับการใช้สีเดียวโดยตั้งใจ เพิ่มฟิลเตอร์เช่น:

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

แพ็กเกจอธิบายรูปแบบใส่สีนี้ เอกสารอ้างอิง BlendMode ของ Flutter อธิบายว่า srcIn ใช้ความทึบปลายทางแต่ไม่ใช้ช่องสีของมัน สีเดียวจึงลบความต่างชุดสีต้นฉบับ เป็นการเลือกการออกแบบ ไม่ใช่การแก้ให้รักษาสี

สำหรับเนิน ตรวจว่าการสูญเสียความตัดกันของสามเหลี่ยมซ้อนสองชิ้นทำให้ภาพอ่านยากขึ้นหรือไม่ เก็บชุดสีเดิมหากบริเวณเหล่านั้นต้องแตกต่าง แพ็กเกจยังอธิบาย ColorMapper สำหรับแทนสีบางส่วน แต่เริ่มด้วยกรณีไม่ใส่ฟิลเตอร์ที่เรียบง่ายกว่าขณะวินิจฉัยความไม่ตรงกัน

ลดความซับซ้อนของคุณสมบัติหลังไฟล์โหลดแล้วเท่านั้น

เอกสาร flutter_svg แนะนำแอตทริบิวต์การนำเสนอเมื่อส่งออกจาก Illustrator เพราะการรองรับ CSS ไม่ครบ และให้ฝังภาพแทนเชื่อมโยงภายนอก ยังมีการตรวจความเข้ากันได้ผ่านคอมไพเลอร์ ทำการตรวจนั้นในสภาพแวดล้อม Flutter/Dart ของคุณเมื่อแอสเซ็ตซับซ้อนต้องตรวจสอบ

ภาพตัวอย่างเบราว์เซอร์เป็นข้อมูลอ้างอิงรูปลักษณ์ที่ต้องการได้ แต่ไม่พิสูจน์ว่าทุกคุณสมบัติ SVG เรนเดอร์เหมือนกันผ่านแพ็กเกจ เก็บงานเดิมและลดความซับซ้อนของสำเนาทีละอย่าง

หากต้นทางมีตัวอักษร ตัดสินว่าจะเป็นข้อความแอปหรืองานภาพคงที่ คู่มือฟอนต์ SVG เปลี่ยน อธิบายว่ารูปลักษณ์ขึ้นกับการจัดการข้อความและฟอนต์ได้อย่างไร อย่าแปลงป้ายเป็นพาธเพียงเพื่อแก้ปัญหาพาธแอสเซ็ต

สำหรับชุดแอสเซ็ต UI เทียบขนาดที่เห็นและระยะว่างร่วมกัน คู่มือเตรียมไอคอนชุด UI ช่วยตรวจความสม่ำเสมอนั้น

ใช้การแปลงเป็นเวกเตอร์เมื่อต้องกู้ต้นทาง

เก็บ SVG สะอาดที่มีอยู่ ภาพถ่ายหรือพื้นหลังมีพื้นผิวอาจเหมาะส่งเป็นแอสเซ็ตแรสเตอร์ การเปลี่ยนนามสกุลไม่ทำให้เป็นรูปทรงเวกเตอร์ที่มีประโยชน์

หากภาพประกอบเรียบง่ายเหลือเพียง PNG หยาบ ขั้นตอน PNG เป็น SVG ของ PerfectVector ช่วยเตรียมไฟล์แก้ไขได้สำหรับประเมิน ครอบให้เหลืองาน ตรวจภาพตัวอย่างหารูปทรงหายและพื้นหลังที่ไม่ต้องการ แล้วดาวน์โหลด SVG เพิ่มไฟล์ใน bundle แอปและตรวจการโหลด ชุดสี ขนาด และ semantics ซ้ำ

สำหรับตัวอย่างเนิน มองหาดวงอาทิตย์ที่แยกและการแบ่งระหว่างลาดเขาสองสี ยืนยันว่าไฟล์มีโครงสร้างที่ตั้งใจ คู่มือแรสเตอร์ที่ฝัง อธิบายว่าเหตุใดภาชนะ SVG ยังบรรจุพิกเซลได้

ตัดสินแอสเซ็ตในแอปก่อนเลือกกลยุทธ์ปรับไฟล์ ขั้นตอนนี้ไม่รับรองทั่วไปว่า SVG เล็กกว่าหรือเร็วกว่า PNG

หากนำงานกลับใช้ในแอป .NET MAUI ทำตาม ขั้นตอนต้นทางเป็น PNG ของ MAUI โครงการเก็บ SVG หลัก ขณะที่วิวอ้างถึง PNG ที่เตรียมระหว่างบิลด์

คำถามที่พบบ่อย

เพิ่มภาพ SVG ใน Flutter อย่างไร? เพิ่ม flutter_svg ประกาศแอสเซ็ต SVG ใน pubspec.yaml และโหลดพาธที่ตรงด้วย SvgPicture.asset กำหนดมิติหรือข้อจำกัดที่เหมาะแล้วตรวจผล

ทำไม SVG ในเครื่องไม่ปรากฏ? ตรวจการประกาศแอสเซ็ต พาธที่ตรง ข้อผิดพลาดโหลด และผังก่อน หากต้นฉบับเรียบง่ายใช้ได้ เทียบโครงสร้างงานที่ล้มเหลวและคุณสมบัติที่รองรับ

ทำไมทุกสีเหมือนกันหมด? ฟิลเตอร์สี srcIn แบบสีเดียวแทนชุดสีที่เห็นด้วยสีนั้น ลบฟิลเตอร์เมื่อต้องเก็บสีเดิมให้ต่างกัน

ต้องเปลี่ยน PNG เป็น SVG สำหรับ Flutter หรือไม่? ไม่ ใช้แอสเซ็ตแรสเตอร์ที่เหมาะกับงาน การแปลงเป็นเวกเตอร์เป็นทางเลือกเมื่อต้องกู้รูปทรงแก้ไขได้จากต้นทางแรสเตอร์เรียบง่าย

แหล่งอ้างอิง

1. flutter_svg — การติดตั้ง — การติดตั้งแพ็กเกจและ import Dart
2. Flutter — เพิ่มแอสเซ็ตและภาพ — การประกาศแอสเซ็ต พาธ และการรวมใน bundle
3. flutter_svg — SvgPicture.asset — การโหลดแอสเซ็ต มิติ การปรับให้พอดี และตัวควบคุม semantics
4. flutter_svg — errorBuilder — การแสดงความล้มเหลวที่แยกจากตัวแทนระหว่างโหลด
5. flutter_svg — semanticsLabel — จุดประสงค์เชิงความหมายของภาพ
6. Flutter — BlendMode — การลงสี srcIn ตามความทึบ
7. flutter_svg — เอกสารแพ็กเกจ — การใส่สี การจับคู่สีบางส่วน คำแนะนำส่งออก และการตรวจความเข้ากันได้

เริ่มด้วยแอสเซ็ตที่ประกาศหนึ่งไฟล์และตรวจพาธ ชุดสี ขนาด และความหมายในแอป หากต้องกู้ภาพประกอบแรสเตอร์ ให้ เตรียม SVG สำหรับประเมิน ตรวจรูปทรง และทำการตรวจเดียวกันก่อนเพิ่มในชุดแอสเซ็ต