Examples? Source for the SVG renderer

[jjensen]

Is the code for the SVG renderer available? Are there other example projects elsewhere that illustrate vg-renderer's use?

Thanks!

[jdryg]

Hi,

I don't have a dedicated SVG renderer to share but here is the code I'm using to render SVG's in my code.

static void drawSVGShapeList(vg::Context* vgr, vg::CommandListHandle drawList, const ssvg::ShapeList* shapeList, const Color4f* overrideStrokeColor, const Color4f* overrideFillColor)
{
    const uint32_t numShapes = shapeList->m_NumShapes;
    for (uint32_t iShape = 0; iShape < numShapes; ++iShape) {
        const ssvg::Shape* shape = &shapeList->m_Shapes[iShape];
        vg::clPushState(vgr, drawList);
        vg::clTransformMult(vgr, drawList, shape->m_Attrs.m_Transform, false);

        bool draw = true;
        switch (shape->m_Type) {
        case ssvg::ShapeType::Group:
            drawSVGShapeList(vgr, drawList, &shape->m_ShapeList, overrideStrokeColor, overrideFillColor);
            draw = false;
            break;
        case ssvg::ShapeType::Rect:
            vg::clBeginPath(vgr, drawList);
            if (shape->m_Rect.rx != 0.0f) {
                vg::clRoundedRect(vgr, drawList, shape->m_Rect.x, shape->m_Rect.y, shape->m_Rect.width, shape->m_Rect.height, shape->m_Rect.rx);
            } else {
                vg::clRect(vgr, drawList, shape->m_Rect.x, shape->m_Rect.y, shape->m_Rect.width, shape->m_Rect.height);
            }
            break;
        case ssvg::ShapeType::Circle:
            vg::clBeginPath(vgr, drawList);
            vg::clCircle(vgr, drawList, shape->m_Circle.cx, shape->m_Circle.cy, shape->m_Circle.r);
            break;
        case ssvg::ShapeType::Ellipse:
            break;
        case ssvg::ShapeType::Line:
            vg::clBeginPath(vgr, drawList);
            vg::clMoveTo(vgr, drawList, shape->m_Line.x1, shape->m_Line.y1);
            vg::clLineTo(vgr, drawList, shape->m_Line.x2, shape->m_Line.y2);
            break;
        case ssvg::ShapeType::Polyline:
            vg::clBeginPath(vgr, drawList);
            vg::clMoveTo(vgr, drawList, shape->m_PointList.m_Coords[0], shape->m_PointList.m_Coords[1]);
            for (uint32_t iPoint = 1; iPoint < shape->m_PointList.m_NumPoints - 1; ++iPoint) {
                const uint32_t id = iPoint << 1;
                vg::clLineTo(vgr, drawList, shape->m_PointList.m_Coords[id], shape->m_PointList.m_Coords[id + 1]);
            }
            break;
        case ssvg::ShapeType::Polygon:
            vg::clBeginPath(vgr, drawList);
            vg::clMoveTo(vgr, drawList, shape->m_PointList.m_Coords[0], shape->m_PointList.m_Coords[1]);
            for (uint32_t iPoint = 1; iPoint < shape->m_PointList.m_NumPoints - 1; ++iPoint) {
                const uint32_t id = iPoint << 1;
                vg::clLineTo(vgr, drawList, shape->m_PointList.m_Coords[id], shape->m_PointList.m_Coords[id + 1]);
            }
            vg::clClosePath(vgr, drawList);
            break;
        case ssvg::ShapeType::Path:
        {
            vg::clBeginPath(vgr, drawList);

            const ssvg::Path* path = &shape->m_Path;
            const uint32_t numCommands = path->m_NumCommands;
            for (uint32_t iCmd = 0; iCmd < numCommands; ++iCmd) {
                ssvg::PathCmd* cmd = &path->m_Commands[iCmd];
                switch (cmd->m_Type) {
                case ssvg::PathCmdType::MoveTo:
                    vg::clMoveTo(vgr, drawList, cmd->m_Data[0], cmd->m_Data[1]);
                    break;
                case ssvg::PathCmdType::LineTo:
                    vg::clLineTo(vgr, drawList, cmd->m_Data[0], cmd->m_Data[1]);
                    break;
                case ssvg::PathCmdType::CubicTo:
                    vg::clCubicTo(vgr, drawList, cmd->m_Data[0], cmd->m_Data[1], cmd->m_Data[2], cmd->m_Data[3], cmd->m_Data[4], cmd->m_Data[5]);
                    break;
                case ssvg::PathCmdType::QuadraticTo:
                    vg::clQuadraticTo(vgr, drawList, cmd->m_Data[0], cmd->m_Data[1], cmd->m_Data[2], cmd->m_Data[3]);
                    break;
                case ssvg::PathCmdType::ArcTo:
                    break;
                case ssvg::PathCmdType::ClosePath:
                    vg::clClosePath(vgr, drawList);
                    break;
                }
            }
        }
        break;
        case ssvg::ShapeType::Text:
            draw = false;
            break;
        default:
            GUI_CHECK(false, "Unknown shape type");
            break;
        }

        if (draw) {
            const bool hasStroke = shape->m_Attrs.m_StrokePaint.m_Type == ssvg::PaintType::Color;
            if (shape->m_Attrs.m_FillPaint.m_Type == ssvg::PaintType::Color) {
                vg::clFillPath(vgr, drawList, overrideFillColor ? overrideFillColor->getPacked() : shape->m_Attrs.m_FillPaint.m_ColorABGR, VG_FILL_FLAGS(vg::PathType::Concave, !hasStroke));
            }
            if (hasStroke) {
                vg::clStrokePath(vgr, drawList, overrideStrokeColor ? overrideStrokeColor->getPacked() : shape->m_Attrs.m_StrokePaint.m_ColorABGR
                    , shape->m_Attrs.m_StrokeWidth
                    , VG_STROKE_FLAGS((vg::LineCap::Enum)shape->m_Attrs.m_StrokeLineCap, (vg::LineJoin::Enum)shape->m_Attrs.m_StrokeLineJoin, 1));
            }
        }

        vg::clPopState(vgr, drawList);
    }
}

Note that since I don't know if the shapes are convex or concave, I have to use vg::PathType::Concave for all fills, which will probably be really slow. So if you want to render static SVG's you better "bake" them into a cachable CommandList. The tiger sample on the front page uses caching to achieve the frame time it reports at the top left corner of the image.

As for other projects, as far as I know @hugoam's mud/toy have the option to use vg-renderer for the GUI. Other than that, I have no idea. Probably noone else is using it at the moment.