SVG ใน .NET MAUI: เก็บ SVG แต่อ้างอิง PNG

หากใช้ SVG ในกระบวนการภาพที่รวมมากับแอป .NET MAUI ให้เก็บ SVG ในโปรเจกต์และอ้างอิง ชื่อ PNG ที่สร้างขึ้นผ่านโค้ด XAML หรือ C# MAUI ประมวลผลเวกเตอร์ต้นทางระหว่างบิลด์ Image ที่ชี้ compass.png จึงถูกต้องได้แม้ไฟล์ที่เพิ่มเป็น compass.svg คู่มือภาพโปรเจกต์ของ Microsoft อธิบายการแปลงนี้

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

ตามต้นทางผ่านบิลด์

SVG แก้ได้กับภาพที่แพ็กมีหน้าที่ต่างกัน เก็บต้นทางเพื่อปรับรูป พื้นที่ว่าง หรือสีภายหลัง ใช้ชื่อที่สร้างใน view ที่แสดง

เอกสารตัวควบคุม Image อธิบายภาพตามความหนาแน่นเป้าหมายที่เข้าแพ็กเกจแอปและระบบปฏิบัติการเลือกความละเอียดเหมาะสม การเก็บ SVG หลักไม่หมายความว่ากระบวนการนี้ส่งเอกสาร SVG ที่ทำงานสดไป view

เพิ่ม SVG เล็กที่มีขอบเขตชัด

บันทึกตัวอย่างที่สร้างนี้เป็น Resources/Images/compass.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <circle cx="48" cy="48" r="34" fill="none" stroke="#173e52" stroke-width="8"/>
  <path d="M58 28L52 52L28 58Z" fill="#ed765e"/>
</svg>

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

ในโปรเจกต์ ยืนยันไฟล์มี build action MauiImage Microsoft ระบุ Resources/Images เป็นตำแหน่งปกติ ก่อนเพิ่ม XML ตรวจรายการโปรเจกต์เดิม: โปรเจกต์อาจรวมโฟลเดอร์ด้วย wildcard แล้ว การตั้งภาพโปรเจกต์ อธิบายตำแหน่งและ build action

อัปเดตรายการเดิมครั้งเดียว

หาก wildcard MauiImage เดิมรวมไฟล์เข็มทิศแล้ว วางการอัปเดตเมทาดาทานี้หลังการรวมนั้น:

<ItemGroup>
  <MauiImage Update="Resources\Images\compass.svg" BaseSize="48,48" />
</ItemGroup>

Update เปลี่ยนเมทาดาทารายการที่มีอยู่แล้ว ไม่เพิ่มไฟล์ที่หายในรายการ หากไม่มีการรวมตรงกัน เพิ่มไฟล์ครั้งเดียวด้วย build action MauiImage หรือ Include ชัดเจนแทน เอกสาร Item ของ MSBuild จาก Microsoft แยกการทำงานเหล่านี้

วิธีนี้เลี่ยงการแก้ที่ชวนทำ: เพิ่ม Include ซ้ำขณะหาภาพหาย ยืนยันก่อนว่าไฟล์รวมอยู่ไหม แล้วเปลี่ยนเมทาดาทา

อ้างอิง PNG และตั้งพื้นที่แสดง

วางคำประกาศนี้ในหน้า MAUI หรือเลย์เอาต์ที่มีอยู่:

<Image Source="compass.png"
       WidthRequest="48"
       HeightRequest="48"
       Aspect="AspectFit"
       SemanticProperties.Description="Compass" />

นามสกุล .png เป็นความตั้งใจ ความกว้างสูงขอพื้นที่แสดงจัตุรัส AspectFit ให้เห็นภาพครบภายใน หากภาพเป็นสี่เหลี่ยมผืนผ้า ใช้พื้นที่แสดงเหมาะแทนยืดเต็มจัตุรัส เอกสารปรับมาตราส่วน Image ของ Microsoft แยกจัดให้พอดี ตัด และยืด

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

BaseSize กับขนาดเลย์เอาต์แก้คนละปัญหา

BaseSize="48,48" ให้ขนาดฐานที่ MAUI ใช้สร้างภาพตามความหนาแน่น หากไม่ตั้งฐานชัด MAUI ใช้ขนาด SVG เอง Microsoft อธิบายทั้งสองกฎใน ปรับขนาดภาพ

ในตัวอย่าง ต้นทางใช้พิกัด 96 คูณ 96 ส่วนฐานและ view ที่ขอคือ 48 คูณ 48 ตัวเลขเป็นการกำหนดตั้งใจ ไม่ใช่ขนาดเอาต์พุตที่วัดจากบิลด์ วงแหวนควรรักษาสัดส่วนเมื่อปรับขนาด

หากภายหลังใช้ตราเดียวใน view ใหญ่กว่ามาก ทบทวนขนาดบิลด์และตรวจการใช้นั้นด้วย การเปลี่ยน WidthRequest ไม่แก้ต้นทางหรือเมทาดาทาบิลด์ ในทางกลับกัน เปลี่ยน BaseSize ไม่ลบขอบว่างภายใน SVG ปรับขอบเขตวาดต้นทางให้กระชับหากตราเองเล็กเกินใน view ที่มีขนาดถูก

อย่าใช้ Resize="false" เป็นวิธีเพิ่มความคมทั่วไป มันปิดการปรับขนาดภาพเวกเตอร์ในกระบวนการนี้ เลือกเฉพาะเมื่อตั้งใจพฤติกรรมนั้นตาม ตัวเลือก resize ในเอกสาร

ตรวจภาพหายหรือผิดคาดตามลำดับ

1. ยืนยันชื่อไฟล์และรายการโปรเจกต์ ใช้ชื่อพิมพ์เล็กเช่น compass.svg และตรวจอีกภาพชื่อเดียว กฎชื่อของ Microsoft กำหนดชื่อภาพไม่ซ้ำและอักขระเข้ากันกับ Android
2. ตรวจ source ของ view สำหรับกระบวนการ SVG รวมในแอป ใช้ compass.png ใน XAML หรือ C#
3. เทียบพื้นที่แสดงที่ตั้งใจกับขนาดฐาน การเปลี่ยนขนาด view กับบิลด์อยู่คนละที่
4. ตรวจงานเอง กลางวงแหวนยังเปิดไหม? เข็มปะการังชัดไหม? ตราอยู่กลางหรือพื้นที่ว่างที่ไม่เห็นในต้นทางดันไปข้าง?

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

เมื่อต้องการพฤติกรรม SVG ขณะรัน

เนื้อหา SVG ดาวน์โหลด พาธโต้ตอบ หรือการแก้ขณะรันต้องเลือก implementation แยก คำแนะนำภาพรวมในแอปด้านบนไม่ได้ยืนยันรองรับงานเหล่านั้น

เช่น โปรเจกต์ตัวอย่าง SVG ของ Vapolia อธิบายตัวควบคุม SvgImage และ SvgImageSource ของตัวเองกับการตั้งทรัพยากรฝัง เป็นสัญญาโหลดต่างกัน ประเมินฟีเจอร์ตัวเรนเดอร์และแพลตฟอร์มเป้าหมายด้วยไฟล์จริงก่อนเพิ่ม การสลับนามสกุลในคำประกาศ Image ปกติไม่ติดตั้งตัวเรนเดอร์

งานเดียวกันต้องตั้งต่างกันใน กระบวนการภาพ SVG ของ Flutter, asset catalog ของ SwiftUI และ นำเข้า VectorDrawable ของ Android ใช้ต้นทางหลักซ้ำแล้วตามกฎแต่ละปลายทาง

เตรียมเวกเตอร์หลักเมื่อเหลือเพียง PNG

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

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

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

ทำไมอ้างอิง PNG เมื่อเพิ่ม SVG? .NET MAUI แปลงต้นทางภาพ SVG ที่รวมในแอปเป็น PNG ระหว่างบิลด์ เก็บ SVG ในโปรเจกต์และอ้างอิงชื่อ PNG จาก XAML หรือ C#

BaseSize ตั้งขนาดตัวควบคุม Image ไหม? BaseSize ตั้งขนาดฐานที่ใช้สร้างภาพบิลด์ตามความหนาแน่น เลย์เอาต์และคำขอขนาดของ view ควบคุมพื้นที่แสดง

ควรเพิ่ม MauiImage Include อีกเพื่อเปลี่ยน BaseSize ไหม? ตรวจว่าไฟล์รวมแล้วไหม รวมผ่าน wildcard ใช้ Update เปลี่ยนเมทาดาทารายการเดิม ใช้ Include เฉพาะเมื่อต้องเพิ่มรายการ

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

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

1. Microsoft — เพิ่มภาพในโปรเจกต์แอป .NET MAUI — ประมวลผล SVG เป็น PNG รายการภาพ ชื่อไฟล์ ขนาดฐาน และเมทาดาทาบิลด์
2. Microsoft — Image — การอ้างอิงภาพภายในแอป เลือกความหนาแน่นเป้าหมาย ขนาด view และพฤติกรรมมาตราส่วน
3. Microsoft — องค์ประกอบ Item (MSBuild) — ความต่างระหว่างเพิ่มรายการด้วย Include กับเปลี่ยนเมทาดาทาเดิมด้วย Update
4. Vapolia — ตัวอย่าง SVG — ตัวควบคุม SVG ขณะรันและกระบวนการโหลดทรัพยากรแยก

ทำจากตราแอปที่มีเพียงราสเตอร์หรือ? เปลี่ยน PNG เป็น SVG แก้ได้ ตรวจช่องเปิดและระยะ แล้วเพิ่มไฟล์หลักใน MAUI และตรวจภาพที่สร้างในแอปเป้าหมาย