SVG ใน WPF: เลือกตัวเรนเดอร์หรือภาพวาด XAML

SVG เปิดในเบราว์เซอร์ได้ แต่ใส่ชื่อไฟล์ใน Image ของ WPF ไม่ได้ให้กระบวนการเรนเดอร์เดียวกัน เริ่มจากเลือกสิ่งที่แอปจะรับจริง: SVG ที่ไลบรารีประมวลผล วัตถุวาดเนทีฟ WPF หรือผลส่งออกราสเตอร์

ตัวถอดรหัสภาพในตัว WPF รวม PNG และ JPEG แต่ไม่ระบุ SVG ตัวควบคุม Image แสดง DrawingImage ได้ด้วย การแสดงเวกเตอร์จึงไม่ต้องหมายถึงโหลดไฟล์ SVG โดยตรง Microsoft อธิบายเป็นวิธี ภาพ และ ต้นทาง drawing แยกกัน

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

เลือกรูปแบบแทนข้อมูลก่อนเปลี่ยนไฟล์

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

ลอง DrawingImage เนทีฟเล็กก่อน

สำหรับไอคอนเรียบง่าย drawing ที่เขียนเองให้ฐานที่มีประโยชน์โดยไม่เพิ่มตัวแยกวิเคราะห์ SVG Microsoft แสดงโครงสร้าง: ตั้ง Image.Source เป็น DrawingImage แล้วกำหนด drawing ให้คุณสมบัติ Drawing ตัวอย่างที่สร้างต่อไปนี้ทำตาม รูปแบบในเอกสาร

นี่คืองาน SVG: ที่คั่นหนังสือเขียวอมฟ้ากับวงกลมปะการังแยก บันทึกเป็น bookmark.svg หากต้องการต้นทางเปรียบเทียบในโปรแกรมแก้ไข

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

วาง Image นี้ในคอนเทนเนอร์เลย์เอาต์ของหน้าต่าง WPF ที่มีอยู่ เช่น Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

วัตถุวาดที่เห็นสองตัวอธิบายที่คั่นหนังสือและวงกลมแยก สี่เหลี่ยมโปร่งใสกำหนดขอบเขต drawing เต็ม 120 คูณ 80 ของตัวอย่าง รวมขอบว่างรอบงาน ไม่ได้ตัดรูปทรงที่ตามมาหรือเปลี่ยน XAML เป็นเอกสาร SVG

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

ไฟล์ต้นฉบับตรวจเป็น XML แล้ว แต่ตัวอย่างยังไม่ได้บิลด์หรือเรนเดอร์ในแอป Windows WPF ทดสอบในโปรเจกต์ก่อนนำไปใช้

ตรวจขอบเขตและ brush ก่อนทำให้ใช้ซ้ำ

เริ่มที่ขนาดที่ให้ ยืนยันรอยเว้าล่างที่คั่นยังเห็นและวงกลมยังแยก แล้วลองช่องเลย์เอาต์กว้างหรือสูงกว่า Stretch="Uniform" รักษาสัดส่วนขณะจัดให้พอดีพื้นที่ตาม คำแนะนำยืดภาพของ Microsoft

เปลี่ยนค่า Brush ปะการังเป็นสีอื่น นั่นเป็นการแก้วัตถุวาดเนทีฟอย่างตั้งใจ ไม่ใช่หลักฐานว่า SVG นำเข้าใด ๆ จะมีตัวควบคุมสะดวกเดียวกัน

หาก drawing ดูเยื้องศูนย์ เปรียบเทียบขอบเขตกับ viewBox และขอบว่างของ SVG ขอบรูปถูกยังอาจกินสัดส่วนช่องเลย์เอาต์ต่างกัน เก็บฐานเรียบง่ายนี้ขณะเพิ่มงานจริง

ใช้ตัวเรนเดอร์เมื่อ SVG ยังเป็นอินพุต

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

เอกสารเริ่มต้น SharpVectors อธิบายการแปลงเป็นวัตถุวาด WPF และตัวอย่างแสดงผ่านภาพ จึงเป็นคนละวิธีกับขอให้กระบวนการบิตแมปปกติถอดรหัสชื่อไฟล์ SVG

ใช้ที่คั่นต้นฉบับเป็นอินพุตไลบรารีแรก แล้วแทนด้วยงานจริง แยกการตรวจเหล่านี้:

1. โหลด: ตัวอย่างที่เลือกหาไฟล์หรือทรัพยากรแอปในโปรเจกต์ได้ไหม?
2. รูปแบบข้อมูล: API คืนวัตถุวาด สร้าง XAML หรือเรนเดอร์บิตแมปสำหรับกรณีใช้งาน?
3. รูปลักษณ์: รอยเว้า วงกลมแยก สี และขอบว่างถูกในแอปที่รันไหม?
4. ส่งมอบ: ผลต้องมี assembly runtime ของไลบรารีหรือไฟล์อื่นบนเครื่องเป้าหมายไหม?

ทำตามตัวอย่างที่ตรงรุ่นติดตั้ง SharpVectors อธิบายการตั้ง IncludeRuntime ระบุ TextAsGeometry ว่าเลิกใช้ และเตือนการเปลี่ยน namespace สำหรับ 2.0 นั่นเป็นเหตุให้ตรวจโค้ดเก่าก่อนคัดลอกการตั้งค่า ไม่ใช่สมมติว่าการตั้งค่าแปลงเดียวเหมาะตลอดไป เอกสาร SharpVectors

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

อย่ายืม SvgImageSource จากเฟรมเวิร์ก XAML ผิดตัว

การค้นหาปัญหานี้อาจนำไปเอกสาร SvgImageSource ของ Microsoft เอกสารคลาส UWP วางชนิดนี้ใน Windows.UI.Xaml.Media.Imaging เป็น API ต่างจากตัวควบคุมและคลาส media System.Windows ของ WPF

ตรวจเฟรมเวิร์กที่ตัวอย่างระบุก่อนเพิ่ม namespace หรือแพ็กเกจ มาร์กอัป XAML คล้ายกันไม่ได้ทำต้นทางภาพ UWP หรือ WinUI เป็นฟีเจอร์ในตัว WPF วิธีสำหรับอีกเฟรมเวิร์กถูกต้องที่นั่นได้แต่ยังเป็นคำตอบผิดสำหรับโปรเจกต์เดสก์ท็อปคุณ

เลือกว่า PNG เพียงพอไหม

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

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

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

คู่มือแปลงภาพเป็นเวกเตอร์ ที่กว้างขึ้นอธิบายขั้นกู้ต้นฉบับ เมื่อต้นทางพร้อม การตรวจแอปยังต้องทำใน WPF

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

WPF Image โหลด SVG โดยตรงได้ไหม? ตัวถอดรหัสภาพในตัวตามเอกสาร WPF ไม่รวม SVG ใช้ไลบรารีรองรับ SVG ให้วัตถุวาดเนทีฟผ่าน DrawingImage หรือส่งรูปแบบราสเตอร์ที่รองรับเช่น PNG

DrawingImage เหมือนไฟล์ SVG ไหม? ไม่ DrawingImage แสดงวัตถุวาด WPF ไลบรารี SVG อาจสร้างวัตถุเหล่านั้น หรือเขียนเองโดยตรงได้เหมือนตัวอย่างเล็กนี้

ใช้ตัวอย่าง UWP SvgImageSource ใน WPF ได้ไหม? อย่าถือเป็น API ในตัว WPF เอกสาร UWP อยู่ namespace และเฟรมเวิร์กต่าง เลือกโค้ดกับ dependency สำหรับแอปจริง

แปลง SVG เป็น XAML แล้วทุกเอฟเฟกต์คงอยู่ไหม? อย่าสมมติ ตรวจความสามารถตามเอกสารตัวแปลงและงานในแอปเป้าหมาย รวมข้อความ ขอบเขต รูปแยก และเอฟเฟกต์

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

1. Microsoft — ภาพรวมภาพ WPF — รูปแบบบิตแมปในตัวและพฤติกรรมยืดภาพ
2. Microsoft — ใช้ Drawing เป็นต้นทางภาพ — DrawingImage เนทีฟและโครงสร้างวัตถุวาด
3. SharpVectors — เริ่มต้นใช้งาน — แปลง drawing WPF การตั้ง runtime และข้อควรระวังย้ายรุ่นตามเอกสาร
4. NuGet — SharpVectors.Wpf — ตัวตนแพ็กเกจปัจจุบันและข้อมูลความเข้ากันได้
5. Microsoft — คลาส UWP SvgImageSource — ขอบเขตเฟรมเวิร์กและ namespace ของ API ที่สับสนบ่อย

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