SVG dalam Qt: Pilih Renderer, Lalu Periksa File

Untuk SVG dalam aplikasi Qt Widgets, mulailah dengan QSvgWidget ketika Anda ingin menampilkan gambar. Gunakan QSvgRenderer ketika Anda perlu menggambar gambar ke target pilihan. Perbedaannya penting: menggambar sekali ke QImage berukuran tetap menyisakan piksel untuk ditampilkan, sedangkan mempertahankan SVG memungkinkan Anda merendernya kembali untuk ukuran lain. Panduan rendering Qt menjelaskan kedua jalur.

Pilih jalurnya terlebih dahulu, lalu periksa artwork. Pratinjau browser dapat menunjukkan desain yang Anda maksudkan, tetapi tidak dapat membuktikan bahwa Qt mendukung setiap fitur yang digunakan file.

Pilih jalur tampilan sebelum mengedit SVG

Qt mendokumentasikan QSvgWidget sebagai widget tampilan SVG dan menyediakan renderer-nya melalui renderer(). Widget tersebut berada dalam SvgWidgets; dependensi CMake-nya adalah Qt6::SvgWidgets. Referensi class lebih berguna di sini daripada contoh lama yang hanya menambahkan modul SVG umum.

Menampilkan SVG tidak membuat editor ilustrasi. Simpan master sumber terpisah jika seseorang perlu memindahkan daun, membentuk ulang sudut, atau mewarnai ulang detail terpisah.

Coba sumber kecil sebelum ilustrasi lengkap

Simpan gambar orisinal ini sebagai leaf.svg. Gambar menggunakan daun berisian, tulang daun terang, dan lingkaran koral terpisah:

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="100" viewBox="0 0 160 100">
  <path d="M24 78C20 34 56 18 98 26C90 62 58 86 24 78Z" fill="#176b64"/>
  <path d="M28 74L78 38" fill="none" stroke="#fff6e8" stroke-width="5"/>
  <circle cx="126" cy="26" r="10" fill="#ec785e"/>
</svg>

Canvas lebar dibuat sengaja. Jika daun menjadi tinggi dan sempit, selidiki penanganan aspek sebelum mengedit kurvanya. Jika lingkaran menghilang, periksa batas yang terlihat dan bandingkan file yang dimuat dengan sumber. Contoh kecil ini memberikan detail yang dapat dikenali tanpa bergantung pada clipping atau efek.

Untuk latar belakang file itu sendiri, panduan format SVG menjelaskan perbedaan antara bentuk vektor dan pembungkus SVG yang berisi bitmap.

Contoh Qt 6 Widgets minimal

Buat main.cpp:

#include <QApplication>
#include <QSvgRenderer>
#include <QSvgWidget>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    if (argc != 2)
        return 1;
 
    QSvgWidget view;
    view.load(QString::fromLocal8Bit(argv[1]));
    if (!view.renderer()->isValid())
        return 2;
 
    view.renderer()->setAspectRatioMode(Qt::KeepAspectRatio);
    view.resize(400, 240);
    view.show();
    return app.exec();
}

Berikan nama file SVG sebagai argumen program, sebaiknya path absolut saat menguji. Exit code 1 berarti contoh ini tidak menerima satu nama file; 2 berarti renderer tidak melaporkan dokumen valid. Kode tersebut merupakan pilihan dalam sampel ini, bukan API kode error Qt sendiri.

isValid() memeriksa dokumen yang dimuat. Metode itu bukan pengujian persetujuan visual. Pengaturan KeepAspectRatio eksplisit meminta renderer mempertahankan proporsi; referensi QSvgRenderer mendokumentasikan pemeriksaan validitas dan mode rasio aspek.

Gunakan CMakeLists.txt ini di samping sumber:

cmake_minimum_required(VERSION 3.16)
project(LeafPreview LANGUAGES CXX)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
find_package(Qt6 REQUIRED COMPONENTS Widgets Svg SvgWidgets)
add_executable(leaf_preview main.cpp)
target_link_libraries(leaf_preview PRIVATE Qt6::Widgets Qt6::Svg Qt6::SvgWidgets)

Contoh menautkan Widgets untuk aplikasi, SvgWidgets untuk widget tampilan, dan Svg untuk pemanggilan renderer-nya. Qt mencantumkan komponen Svg renderer secara terpisah dari komponen SvgWidgets.

Konfigurasikan dan build dengan development kit Qt 6 terinstal Anda, lalu jalankan leaf_preview dengan path ke leaf.svg. Ini adalah contoh sumber yang didokumentasikan; kami belum mengompilasi atau menjalankannya dalam lingkungan Qt native. Uji build dan artwork sebenarnya pada sistem target sebelum menggunakannya.

Periksa dukungan saat ini alih-alih menganggap setara dengan browser

Qt SVG modern tidak terbatas pada fitur SVG Tiny statis saja. Qt mendokumentasikan elemen tambahan mulai Qt 6.7, yang diurai secara default, dengan opsi untuk membatasi penguraian ke fitur Tiny. Referensi fitur tambahan mencantumkan tambahan yang didukung dan batasannya.

Satu batas konkret adalah clipPath: halaman yang sama menandainya tidak didukung. Karena itu, file yang bergantung pada clipping perlu diperiksa sumbernya meskipun terlihat benar di browser. Mask dan filter tertentu memiliki dukungan yang didokumentasikan, tetapi hal itu tidak membuktikan dukungan untuk setiap efek atau pengaturan ekspor.

Ketika daun sederhana berfungsi tetapi ilustrasi lebih besar berbeda, buat salinan dan hapus satu fitur yang dicurigai setiap kali. Untuk artwork yang dipotong, pertimbangkan menghasilkan geometri terlihat yang dimaksudkan dalam editor alih-alih bergantung pada operasi clipping. Bandingkan siluet yang dihasilkan dengan sumber asli sebelum mengganti master.

Teks membutuhkan pemeriksaannya sendiri. Jika tulisan berubah, ikuti panduan pemecahan masalah font SVG. Mengubah tulisan menjadi bentuk adalah kompromi desain; itu sebaiknya bukan perbaikan pertama untuk nama file salah atau modul hilang.

Perhatikan ketika pipeline Anda mengubah SVG menjadi piksel

Misalkan kode Anda merender daun sekali ke QImage kecil, membuat pixmap dari gambar itu, lalu memperbesar pixmap. Pembesaran bekerja pada hasil raster. Sumber SVG tidak menghilang, tetapi operasi tampilan berikutnya tidak lagi meminta rendering baru dari sumber tersebut.

Panduan rendering Qt membedakan penggambaran ke gambar dari penggambaran dalam paint event widget. Jika tampilan Anda berubah ukuran, tentukan di mana SVG seharusnya dirender kembali. Hindari memperlakukan bitmap dalam cache sebagai bukti bahwa sumber itu sendiri tidak dapat diskalakan.

Perbedaan yang sama penting ketika menyiapkan kumpulan ikon SVG. Pertahankan batas sumber yang konsisten, lalu nilai setiap ikon pada ukuran penggunaan sebenarnya. Daun besar yang dapat dikenali masih dapat kehilangan tulang daun atau lingkaran terpisahnya ketika tampilan kecil.

Periksa hasil sebelum menyederhanakan semuanya

Mulailah dengan file yang benar-benar Anda muat, bukan ekspor lain dengan nama serupa. Pastikan contoh sederhana muncul, lalu bandingkan artwork produksi pada ukuran yang dimaksudkan dan setelah perubahan ukuran.

Untuk daun, periksa bahwa lingkaran tetap terpisah, tulang daun tetap terlihat, dan canvas lebar tidak meregangkan gambar. Ini adalah pemeriksaan penerimaan untuk pengujian Anda sendiri, bukan hasil yang kami laporkan. Jika seluruh tampilan kosong, daftar pemeriksaan SVG kosong membantu memisahkan artwork tak terlihat dan batas gambar dari penyiapan aplikasi.

Pertahankan foto atau ilustrasi bertekstur sebagai aset raster ketika sesuai dengan desain. Memilih SVG seharusnya menyelesaikan kebutuhan artwork; pilihan itu tidak dengan sendirinya membuktikan file lebih kecil, rendering lebih cepat, atau output identik antarengine.

Pulihkan master sumber ketika hanya raster tersisa

Jika ikon hanya tersisa sebagai PNG atau JPG, alur kerja gambar-ke-vektor PerfectVector dapat membantu menyiapkan artwork SVG yang dapat diedit sebelum penyerahan Qt. Periksa siluet, celah, dan detail terpisah setelah konversi, lalu uji SVG itu melalui jalur Qt pilihan Anda. Vektorisasi menyiapkan geometri; proses ini tidak menambahkan fitur renderer atau mengubah widget tampilan menjadi editor path.

Jika Anda sudah memiliki master vektor bersih, sesuaikan file tersebut langsung. Sederhanakan salinan hanya ketika fitur tertentu atau detail pada ukuran kecil membutuhkan perhatian, dan pertahankan sumber yang lebih kaya untuk pengeditan di masa mendatang.

FAQ

Haruskah saya menggunakan QSvgWidget atau QSvgRenderer? Gunakan QSvgWidget untuk menampilkan SVG dalam antarmuka Widgets. Gunakan QSvgRenderer ketika Anda membutuhkan kendali atas penggambaran ke target pilihan, seperti widget khusus atau gambar.

Apakah Qt saat ini hanya mendukung SVG Tiny? Qt mendokumentasikan dukungan SVG Tiny statis ditambah ekstensi tertentu yang diperkenalkan dalam Qt 6.7. Periksa referensi fitur saat ini dan opsi yang dikonfigurasi alih-alih mengasumsikan dukungan Tiny saja atau kesetaraan browser.

Mengapa SVG dapat terlihat buram setelah saya memasukkannya ke pixmap? Jika Anda terlebih dahulu merendernya menjadi gambar raster berukuran tetap, memperbesar hasil itu menskalakan piksel. Tinjau kembali target render dan apakah SVG dirender ulang pada ukuran yang diperlukan.

Apakah pemuatan SVG yang valid membuktikan setiap detail dirender dengan benar? Tidak. Pemeriksaan validitas tidak menggantikan pemeriksaan visual. Bandingkan batas, proporsi, detail kecil, dan fitur yang didukung dalam aplikasi target sebenarnya.

Sources

1. Qt — Rendering File SVG — Widget tampilan, target painter, dan perbedaan antara rendering widget dan hasil antara raster.
2. Qt — Class QSvgWidget — Widget tampilan, akses renderer, dan dependensi SvgWidgets.
3. Qt — Class QSvgRenderer — Dependensi Svg, validitas dokumen, dan pengaturan rasio aspek.
4. Qt — Fitur Tambahan — Ekstensi modern dan batas fitur eksplisit, termasuk clipping path yang tidak didukung.

Mulailah dengan satu file kecil dan periksa dalam jalur Qt pilihan Anda. Jika artwork raster membutuhkan pemulihan, siapkan kandidat SVG yang dapat diedit, periksa bentuk terhadap sumber, dan ulangi pemeriksaan tingkat aplikasi sebelum mengganti aset Anda.