SVG dalam WPF: Pilih Renderer atau Drawing XAML

SVG terbuka di browser Anda, tetapi memasukkan nama filenya ke Image WPF tidak memberikan pipeline rendering yang sama. Mulailah dengan memilih apa yang benar-benar akan diterima aplikasi: SVG yang diproses pustaka, objek drawing WPF native, atau ekspor raster.

Codec pencitraan bawaan WPF mencakup PNG dan JPEG, tetapi tidak mencantumkan SVG. Kontrol Image-nya juga dapat menampilkan DrawingImage, sehingga tampilan vektor tidak harus berarti memuat file SVG secara langsung. Microsoft mendokumentasikannya sebagai jalur pencitraan dan sumber drawing terpisah.

Panduan ini menggunakan ikon penanda buku orisinal untuk membuat pilihan itu konkret. SVG dan XAML di bawah ditulis dengan tangan; keduanya bukan benchmark konverter atau tangkapan aplikasi Windows.

Pilih representasi sebelum mengubah file

Pilihan ini menyangkut objek yang ditampilkan aplikasi Anda. Pilihan tidak menentukan apakah desainer sebaiknya menyimpan master SVG yang dapat diedit. Pertahankan master tersebut meskipun aplikasi menerima PNG.

Coba DrawingImage native kecil terlebih dahulu

Untuk ikon sederhana, drawing buatan tangan memberikan dasar yang berguna tanpa memperkenalkan parser SVG. Microsoft menunjukkan strukturnya: atur Image.Source ke DrawingImage, lalu tetapkan drawing ke properti Drawing-nya. Contoh orisinal berikut mengikuti pola yang didokumentasikan tersebut.

Berikut desain SVG: penanda buku hijau kebiruan dan lingkaran koral terpisah. Simpan sebagai bookmark.svg jika Anda ingin sumber untuk dibandingkan di editor.

<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>

Letakkan Image ini di dalam kontainer tata letak jendela WPF yang sudah ada, seperti 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>

Dua objek drawing yang terlihat mendeskripsikan penanda buku dan lingkaran secara terpisah. Persegi panjang transparan menetapkan batas drawing lengkap 120 kali 80 dalam contoh, termasuk margin kosong di sekitar artwork. Persegi panjang itu tidak memotong geometri berikutnya atau mengubah XAML menjadi dokumen SVG.

Koordinatnya merupakan pilihan penulisan yang disengaja. Bandingkan kedua cuplikan: penanda buku menggunakan titik yang sama, dan lingkaran menggunakan pusat dan radius yang sama. Ini adalah terjemahan manual kecil yang dapat Anda tinjau, bukan resep untuk menerjemahkan setiap fitur SVG menjadi XAML.

File sumber telah diperiksa sebagai XML, tetapi contoh ini belum di-build atau dirender dalam aplikasi WPF Windows. Uji dalam proyek Anda sebelum menggunakannya.

Periksa batas dan brush sebelum membuatnya dapat digunakan ulang

Mulailah pada ukuran yang diberikan. Pastikan lekukan bawah penanda buku tetap terlihat dan lingkaran tetap terpisah. Kemudian coba slot tata letak lebih lebar atau tinggi. Stretch="Uniform" mempertahankan proporsi sambil menyesuaikan dengan area yang tersedia, seperti dijelaskan dalam panduan peregangan gambar Microsoft.

Ubah nilai Brush koral menjadi warna berbeda. Itu merupakan pengeditan sengaja pada objek drawing native; itu bukan bukti bahwa bagian SVG impor sembarang akan menyediakan kontrol praktis yang sama.

Jika drawing tampak tidak di tengah, bandingkan batasnya dengan viewBox dan margin kosong SVG. Siluet yang benar masih dapat menempati bagian berbeda dari slot tata letaknya. Pertahankan dasar sederhana ini sambil Anda memperkenalkan artwork akhir.

Gunakan renderer ketika SVG tetap menjadi input

Ketika memelihara geometri native dengan tangan tidak praktis, evaluasi pustaka yang secara eksplisit membaca SVG untuk WPF. Paket SharpVectors.Wpf menyediakan komponen penguraian, konversi, dan penayangan SVG. Halaman paketnya merupakan tempat yang tepat untuk memeriksa versi saat ini, framework target, dan dependensi sebelum menambahkannya ke proyek.

Dokumentasi memulai SharpVectors menjelaskan konversi menjadi objek drawing WPF dan contoh untuk tampilan berbasis gambar. Itu membuatnya jalur berbeda dari meminta pipeline bitmap biasa mendekode nama file SVG.

Gunakan penanda buku orisinal sebagai input pustaka pertama Anda, lalu ganti dengan artwork sebenarnya. Pisahkan pemeriksaan berikut:

1. Pemuatan: apakah contoh yang dipilih menemukan file atau sumber daya aplikasi dalam proyek Anda?
2. Representasi: apakah API mengembalikan objek drawing, menghasilkan XAML, atau merender bitmap untuk kasus penggunaan Anda?
3. Tampilan: apakah lekukan, lingkaran terpisah, warna, dan margin kosong benar dalam aplikasi yang berjalan?
4. Deployment: apakah hasil membutuhkan assembly runtime pustaka atau aset lain pada mesin target?

Ikuti contoh yang sesuai dengan rilis terinstal Anda. SharpVectors mendokumentasikan pengaturan IncludeRuntime, menandai TextAsGeometry sebagai deprecated, dan menandai perubahan namespace untuk versi 2.0. Itu merupakan alasan meninjau cuplikan lama sebelum menyalin pengaturannya, bukan menganggap satu konfigurasi konversi akan tetap sesuai selamanya. Dokumentasi SharpVectors

Untuk logo dengan tulisan, periksa output target sebenarnya serta sumbernya. Panduan perubahan font SVG kami menjelaskan perbedaan antara teks yang bergantung pada font dan tulisan yang dipertahankan sebagai outline. Mengonversi teks dapat mengubah apa yang tetap dapat diedit, jadi simpan file desain asli.

Jangan meminjam SvgImageSource dari framework XAML yang salah

Pencarian masalah ini dapat membawa Anda ke referensi SvgImageSource Microsoft. Dokumentasi class UWP menempatkan tipe itu dalam Windows.UI.Xaml.Media.Imaging. Itu merupakan API berbeda dari kontrol dan class media System.Windows WPF.

Periksa framework yang disebutkan contoh sebelum menambahkan namespace atau paket. Markup XAML yang mirip tidak membuat sumber gambar UWP atau WinUI menjadi fitur bawaan WPF. Solusi untuk framework lain dapat valid di sana tetapi tetap merupakan jawaban yang salah untuk proyek desktop Anda.

Tentukan apakah PNG cukup

Ekspor PNG merupakan pilihan penyerahan yang masuk akal ketika ukuran yang diperlukan diketahui dan aplikasi tidak perlu mengedit geometri. Ekspor untuk ukuran tersebut, bandingkan tepi transparan dengan latar belakang sebenarnya, dan periksa penggunaan tampilan terbesar. Meningkatkan ukuran tata letak bitmap tidak membuat ulang path sumber.

Periksa juga apa yang ada di dalam SVG sebelum menghabiskan waktu pada pustaka rendering. Jika SVG hanya menanamkan gambar raster, mengimpor pembungkusnya tidak membuat gambar itu menjadi geometri yang dapat diedit. Panduan SVG raster tertanam menunjukkan apa yang perlu diperiksa. Untuk kumpulan ikon, gunakan pemeriksaan margin dan siluet yang sama di seluruh kumpulan; alur kerja persiapan ikon UI kami membahas tahap artwork tersebut.

Jika penanda buku atau logo hanya tersisa sebagai PNG atau JPG, alur kerja gambar-ke-vektor PerfectVector dapat membantu menyiapkan kandidat SVG yang dapat diedit. Periksa siluet, lekukan, dan detail terpisah yang dipulihkan sebelum memilih jalur penyerahan WPF. Vektorisasi menyiapkan artwork; proses ini tidak menginstal renderer WPF atau menjamin konversi XAML native.

Panduan vektorisasi gambar yang lebih luas menjelaskan langkah pemulihan sumber tersebut. Setelah sumber siap, pemeriksaan aplikasi tetap dilakukan di WPF.

FAQ

Dapatkah Image WPF memuat file SVG secara langsung? Codec pencitraan bawaan WPF yang didokumentasikan tidak mencakup SVG. Gunakan pustaka yang mendukung SVG, sediakan objek drawing native melalui DrawingImage, atau berikan format raster yang didukung seperti PNG.

Apakah DrawingImage sama dengan file SVG? Tidak. DrawingImage menampilkan objek drawing WPF. Pustaka SVG dapat membuat objek tersebut, atau Anda dapat menulisnya langsung, seperti dalam contoh kecil di sini.

Dapatkah saya menggunakan contoh SvgImageSource UWP dalam WPF? Jangan memperlakukannya sebagai API bawaan WPF. Referensi UWP berada dalam namespace dan framework berbeda; pilih kode dan dependensi untuk aplikasi Anda sebenarnya.

Apakah mengonversi SVG menjadi XAML mempertahankan setiap efek? Jangan menganggap demikian. Periksa kemampuan konverter yang didokumentasikan dan lihat artwork Anda dalam aplikasi target, termasuk teks, batas, bentuk terpisah, dan efek.

Sources

1. Microsoft — Ikhtisar Pencitraan WPF — Format bitmap bawaan dan perilaku peregangan gambar.
2. Microsoft — Gunakan Drawing sebagai Sumber Gambar — DrawingImage native dan struktur objek drawing.
3. SharpVectors — Memulai — Konversi drawing WPF, pengaturan runtime, dan perhatian migrasi yang didokumentasikan.
4. NuGet — SharpVectors.Wpf — Identitas paket saat ini dan informasi kompatibilitas.
5. Microsoft — Class SvgImageSource UWP — Batas framework dan namespace untuk API yang sering tertukar.

Pilih satu jalur WPF dan bandingkan desain kecil sebelum mengganti seluruh kumpulan aset Anda. Jika artwork raster membutuhkan pemulihan, siapkan kandidat SVG yang dapat diedit, periksa bentuknya, lalu uji representasi pilihan dalam aplikasi Anda.