如何在libCairo中正确加载SVG为Cairo图像表面并完成绘制

• 核心API方向完全用反：cairo_svg_surface_create 是SVG导出接口，作用是创建一个用来把绘制内容写入为SVG文件的输出表面，根本不是用来读取加载已有SVG素材的。你当前的构造函数相当于新建了一个空白的、准备写入指定路径的SVG文件，完全没读取目标SVG的内容，返回的表面自然没有任何可绘制的素材。
• Cairo本身没有原生的SVG素材加载能力：要读取SVG文件的矢量内容，需要依赖librsvg第三方库，cairo自带的SVG相关接口只有输出能力，没有读取能力。
• 源表面类型不符合要求：后续cairo_set_source_surface要求传入的是包含已渲染内容的可复用表面（比如光栅图像表面），你传入的是仅用于导出的SVG输出表面，自然无法取出任何内容绘制到目标PNG上。

方案选型 #

要满足你“避免缩放伪影”的需求，推荐直接矢量渲染SVG到目标PNG上下文，不要提前把SVG光栅化，每次绘制都按当前缩放比例渲染矢量内容，完全不会产生缩放失真。如果需要多次复用素材，也可以选择预光栅化方案，但该方案缩放时仍会有伪影。

第一步：替换SVG加载逻辑 #

不要用cairo_svg_surface_create加载SVG，改用librsvg加载SVG文件生成可渲染的句柄，示例代码：

#include <rsvg.h>

// 类成员需要新增RsvgHandle*类型的变量存储加载后的SVG句柄
RsvgHandle* CairoImage::loadSvgFile(const char* path) {
    GError* loadErr = nullptr;
    RsvgHandle* handle = rsvg_handle_new_from_file(path, &loadErr);
    if (!handle) {
        // 自行添加错误处理逻辑，比如释放错误对象、抛出异常等
        g_error_free(loadErr);
        return nullptr;
    }
    return handle;
}

编译时需要链接librsvg库。

第二步：修正绘制逻辑 #

原来的绘制逻辑是把源表面作为绘制源，对于SVG矢量素材，直接把SVG内容渲染到目标PNG的上下文即可，不需要获取表面，示例代码：

void CairoImage::drawToContext(cairo_t* targetCtx, double x, double y, double drawWidth, double drawHeight) {
    // 保存目标上下文当前状态，避免后续变换影响其他绘制
    cairo_save(targetCtx);
    
    // 移动到指定绘制位置
    cairo_translate(targetCtx, x, y);
    
    // 获取SVG原始尺寸，计算缩放比例
    RsvgDimensionData svgOriginDim;
    rsvg_handle_get_dimensions(m_svgHandle, &svgOriginDim);
    double scaleX = drawWidth / svgOriginDim.width;
    double scaleY = drawHeight / svgOriginDim.height;
    cairo_scale(targetCtx, scaleX, scaleY);
    
    // 如果你之前的裁剪逻辑需要保留，可以在这里添加裁剪设置
    cairo_rectangle(targetCtx, 0, 0, svgOriginDim.width, svgOriginDim.height);
    cairo_clip(targetCtx);
    
    // 直接把SVG矢量内容渲染到目标上下文
    rsvg_handle_render_cairo(m_svgHandle, targetCtx);
    
    // 恢复上下文状态
    cairo_reset_clip(targetCtx);
    cairo_restore(targetCtx);
}

可选：预光栅化SVG到可复用表面（不推荐，缩放会失真） #

如果你的业务场景确实需要把SVG作为cairo表面源（比如需要做自定义混合模式、滤镜等操作），可以把加载后的SVG渲染到一个内存光栅表面，示例构造函数：

CairoImage::CairoImage(const char* svgPath, double renderWidth, double renderHeight) {
    RsvgHandle* handle = loadSvgFile(svgPath);
    if (!handle) return;
    
    // 创建空白ARGB光栅表面，用于存放渲染后的SVG内容
    auto rasterSurface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, renderWidth, renderHeight);
    auto tempCtx = cairo_create(rasterSurface);
    
    // 把SVG渲染到光栅表面
    RsvgDimensionData svgDim;
    rsvg_handle_get_dimensions(handle, &svgDim);
    cairo_scale(tempCtx, renderWidth / svgDim.width, renderHeight / svgDim.height);
    rsvg_handle_render_cairo(handle, tempCtx);
    
    // 清理临时资源
    cairo_destroy(tempCtx);
    g_object_unref(handle);
    
    // 绑定到类成员，此时getSurface返回的就是可作为绘制源的光栅表面
    context = cairo_create(rasterSurface);
    cairo_surface_destroy(rasterSurface);
}

注意：这种预光栅化的方式会把矢量内容转为固定分辨率的像素，缩放时依然会出现伪影，仅适合不需要缩放的固定尺寸场景。

内容的提问来源于stack exchange，提问作者k.meinkopf