SVG trong Qt: Chọn trình kết xuất rồi kiểm tra tệp

Với SVG trong ứng dụng Qt Widgets, bắt đầu bằng QSvgWidget khi muốn hiển thị bản vẽ. Dùng QSvgRenderer khi cần vẽ lên đích đã chọn. Khác biệt quan trọng: vẽ một lần vào QImage kích thước cố định để lại pixel hiển thị, còn giữ SVG cho phép kết xuất lại ở kích thước khác. Hướng dẫn kết xuất của Qt mô tả cả hai cách.

Chọn cách trước rồi kiểm tra hình. Bản xem trước trình duyệt có thể hiện thiết kế mong muốn, nhưng không chứng minh Qt hỗ trợ mọi tính năng tệp dùng.

Chọn cách hiển thị trước khi sửa SVG

Qt mô tả QSvgWidget là widget hiển thị SVG và cung cấp trình kết xuất qua renderer(). Widget thuộc SvgWidgets; phụ thuộc CMake là Qt6::SvgWidgets. Tài liệu lớp hữu ích hơn ví dụ cũ chỉ thêm module SVG chung.

Hiển thị SVG không tạo trình chỉnh sửa minh họa. Giữ bản nguồn gốc riêng nếu ai đó cần di chuyển lá, uốn góc hoặc đổi màu chi tiết tách rời.

Thử nguồn nhỏ trước hình minh họa đầy đủ

Lưu bản vẽ gốc này thành leaf.svg. Nó dùng lá có màu tô, gân sáng và hình tròn san hô riêng:

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

Khung rộng là có chủ đích. Nếu lá thành cao và hẹp, kiểm tra xử lý tỷ lệ trước khi sửa đường cong. Nếu hình tròn biến mất, kiểm tra giới hạn nhìn thấy và so sánh tệp tải với nguồn. Ví dụ nhỏ cho bạn chi tiết dễ nhận diện mà không dựa vào cắt hay hiệu ứng.

Để hiểu bản thân tệp, hướng dẫn định dạng SVG giải thích khác biệt giữa hình vector và lớp bọc SVG chứa bitmap.

Ví dụ Qt 6 Widgets tối thiểu

Tạo 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();
}

Truyền tên tệp SVG làm đối số chương trình, ưu tiên đường dẫn tuyệt đối khi thử. Mã thoát 1 nghĩa là ví dụ không nhận đúng một tên tệp; 2 nghĩa là trình kết xuất không báo tài liệu hợp lệ. Những mã đó là lựa chọn của mẫu, không phải API mã lỗi riêng của Qt.

isValid() kiểm tra tài liệu đã tải. Nó không phải phép kiểm tra chấp nhận bằng mắt. Thiết lập KeepAspectRatio rõ ràng yêu cầu trình kết xuất giữ tỷ lệ; tài liệu QSvgRenderer mô tả kiểm tra hợp lệ và các chế độ tỷ lệ khung hình.

Dùng CMakeLists.txt này cạnh nguồn:

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)

Ví dụ liên kết Widgets cho ứng dụng, SvgWidgets cho widget hiển thị và Svg cho lời gọi trình kết xuất. Qt liệt kê thành phần Svg của trình kết xuất riêng với thành phần SvgWidgets.

Cấu hình và dựng bằng bộ phát triển Qt 6 đã cài, rồi chạy leaf_preview với đường dẫn đến leaf.svg. Đây là ví dụ nguồn theo tài liệu; chúng tôi chưa biên dịch hoặc chạy trong môi trường Qt thực tế. Thử bản dựng thực tế và hình trên hệ thống đích trước khi áp dụng.

Kiểm tra hỗ trợ hiện tại thay vì mặc định giống trình duyệt

Qt SVG hiện đại không chỉ giới hạn ở tính năng SVG Tiny tĩnh. Qt mô tả các phần tử bổ sung từ Qt 6.7, được phân tích mặc định, với tùy chọn giới hạn phân tích về tính năng Tiny. Tài liệu tính năng mở rộng liệt kê phần bổ sung được hỗ trợ và giới hạn.

Một ranh giới cụ thể là clipPath: cùng trang đánh dấu nó không được hỗ trợ. Vì thế tệp dựa vào cắt cần kiểm tra nguồn ngay cả khi trông đúng trong trình duyệt. Một số mặt nạ và bộ lọc có hỗ trợ được mô tả, nhưng không xác lập hỗ trợ mọi hiệu ứng hay thiết lập xuất.

Khi lá đơn giản hoạt động nhưng hình lớn hơn khác đi, tạo bản sao rồi loại từng tính năng nghi ngờ. Với hình bị cắt, cân nhắc tạo hình học nhìn thấy dự định trong trình chỉnh sửa thay vì phụ thuộc thao tác cắt. So sánh hình bao tạo ra với bản gốc trước khi thay bản gốc của bạn.

Văn bản cần kiểm tra riêng. Nếu chữ thay đổi, làm theo hướng dẫn xử lý phông SVG. Chuyển chữ thành hình là đánh đổi thiết kế; không nên là cách sửa đầu tiên cho tên tệp sai hoặc thiếu module.

Nhận ra lúc quy trình biến SVG thành pixel

Giả sử mã kết xuất lá một lần vào QImage nhỏ, tạo pixmap từ ảnh đó rồi phóng lớn pixmap sau này. Việc phóng lớn tác động kết quả raster. Nguồn SVG chưa biến mất, nhưng thao tác hiển thị sau không còn yêu cầu nguồn kết xuất mới.

Hướng dẫn kết xuất của Qt phân biệt vẽ vào ảnh với vẽ trong sự kiện paint của widget. Nếu vùng hiển thị đổi kích thước, quyết định SVG nên kết xuất lại ở đâu. Tránh coi bitmap được lưu đệm là bằng chứng nguồn không thể co giãn.

Cùng khác biệt quan trọng khi chuẩn bị bộ biểu tượng SVG. Giữ giới hạn nguồn nhất quán, rồi đánh giá từng biểu tượng ở kích thước sử dụng thực. Lá lớn dễ nhận vẫn có thể mất gân hoặc hình tròn tách rời khi hiển thị nhỏ.

Kiểm tra kết quả trước khi đơn giản hóa mọi thứ

Bắt đầu với tệp bạn thực sự tải, không phải bản xuất khác tên gần giống. Xác nhận ví dụ đơn giản hiện, rồi so sánh hình dùng trong ứng dụng thực tế ở kích thước dự định và sau đổi kích thước.

Với lá, kiểm tra hình tròn vẫn riêng, gân vẫn nhìn thấy và khung rộng không kéo giãn hình. Đây là tiêu chí chấp nhận cho lần chạy của bạn, không phải kết quả chúng tôi báo. Nếu toàn khung trống, danh sách kiểm tra SVG trắng giúp phân biệt hình vô hình và giới hạn bản vẽ với thiết lập ứng dụng.

Giữ ảnh chụp hoặc hình minh họa có texture dưới dạng raster khi phù hợp thiết kế. Chọn SVG nên giải quyết yêu cầu hình; bản thân nó không xác lập tệp nhỏ hơn, kết xuất nhanh hơn hay đầu ra giống nhau giữa các engine.

Khôi phục nguồn gốc khi chỉ còn raster

Nếu biểu tượng chỉ còn PNG hoặc JPG, quy trình ảnh sang vector của PerfectVector có thể giúp chuẩn bị hình SVG chỉnh sửa được trước bàn giao Qt. Kiểm tra hình bao, khe và chi tiết tách rời sau chuyển đổi, rồi thử SVG qua cách Qt đã chọn. Vector hóa chuẩn bị hình học; không thêm tính năng trình kết xuất hay biến widget hiển thị thành trình chỉnh đường dẫn.

Nếu đã có bản vector gốc sạch, sửa trực tiếp tệp đó. Chỉ đơn giản hóa bản sao khi tính năng cụ thể hoặc chi tiết kích thước nhỏ cần chú ý, và giữ nguồn phong phú hơn cho sửa sau.

Câu hỏi thường gặp

Tôi nên dùng QSvgWidget hay QSvgRenderer? Dùng QSvgWidget để hiện SVG trong giao diện Widgets. Dùng QSvgRenderer khi cần kiểm soát vẽ lên đích đã chọn, như widget hoặc ảnh tùy chỉnh.

Qt hiện tại chỉ hỗ trợ SVG Tiny phải không? Qt mô tả hỗ trợ SVG Tiny tĩnh cùng những phần mở rộng được chọn từ Qt 6.7. Kiểm tra tài liệu tính năng hiện tại và tùy chọn cấu hình thay vì mặc định chỉ Tiny hoặc giống trình duyệt.

Vì sao SVG có thể mờ sau khi tôi đưa vào pixmap? Nếu trước hết kết xuất nó thành ảnh raster cố định, phóng lớn kết quả đó là co giãn pixel. Xem lại đích kết xuất và SVG có được kết xuất lại ở kích thước cần không.

Tải SVG hợp lệ có chứng minh mọi chi tiết kết xuất đúng không? Không. Kiểm tra hợp lệ không thay thế kiểm tra trực quan. So sánh giới hạn, tỷ lệ, chi tiết nhỏ và tính năng được hỗ trợ trong ứng dụng đích thực tế.

Nguồn tham khảo

1. Qt — Kết xuất tệp SVG — Widget hiển thị, đích painter và khác biệt giữa kết xuất widget với bước raster trung gian.
2. Qt — Lớp QSvgWidget — Widget hiển thị, truy cập trình kết xuất và phụ thuộc SvgWidgets.
3. Qt — Lớp QSvgRenderer — Phụ thuộc Svg, tính hợp lệ tài liệu và thiết lập tỷ lệ.
4. Qt — Tính năng mở rộng — Phần mở rộng hiện đại và giới hạn tính năng rõ ràng, gồm đường dẫn cắt không được hỗ trợ.

Bắt đầu với một tệp nhỏ và kiểm tra qua cách Qt đã chọn. Nếu cần khôi phục hình raster, hãy chuẩn bị một bản SVG chỉnh sửa được để đánh giá, so sánh hình với nguồn và lặp lại kiểm tra ở cấp ứng dụng trước khi thay tài nguyên.