micahpearlman / monksvg

SVG parsing framework in C++

MonkSVG

Overview

MonkSVG is an SVG parsing and rendering library. It is designed to use various vector graphics backends with the current backend implementation using MonkVG.

Installation & Build

NOTE: It's important to use --recursive when when cloning to clone any submodules.

# Clone the project. USE `--recursive`
git clone --recursive [email protected]:micahpearlman/MonkSVG.git
cd MonkSVG

# Get the latest from the submodules
git submodule update --recursive --remote

# Build
mkdir build \
    && cd build \
    && cmake .. \
    &&  cmake --build . 

Use

Initialize and load an SVG:

    // Initialize MonkVG using GLES 2.0 rendering
    vgCreateContextMNK(WINDOW_WIDTH, WINDOW_HEIGHT,
                        VG_RENDERING_BACKEND_TYPE_OPENGLES20);


    // create an OpenVG (MonkVG) handler	
    MonkSVG::ISVGHandler::SmartPtr svg_handler =  MonkSVG::OpenVG_SVGHandler::create();

    // load an example
    std::string svgFilePath = "./data/tiger.svg";
    std::fstream is( svgFilePath.c_str(), std::fstream::in );
    std::stringstream ss;
    ss << is.rdbuf();

    // run it through the svg parser
    MonkSVG::SVG_Parser* svg_parser = MonkSVG::SVG_Parser::create(svg_handler);
    svg_parser->parse(ss.str());

Draw:

    // Clear the screen.
    glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    // set OpenVG matrix
    vgSeti(VG_MATRIX_MODE, VG_MATRIX_PATH_USER_TO_SURFACE);
    vgLoadIdentity();

    // draw svg
    svg_handler->draw();

    // Swap buffers
    glfwSwapBuffers(window);
    glfwPollEvents();

Cleanup:

    // cleanup 
    svg_handler.reset();
    MonkSVG::SVG_Parser::destroy(svg_parser);

    // destroy MonkVG
    vgDestroyContextMNK();

monksvg's Issues

Simple straight-line corner-node based polygons don't draw.

As the title says - an SVG that includes a shape made from corner-nodes (i.e. a simple polygon) doesn't get rendered.

If some of the nodes are changed to curves, only that segment of the shapes gets drawn.

A little bug with path parsing

I don't know if it has an influence on correct drawing but try to add newline characters and spaces (white characters) after 'z' (close line character) of d attibute in path tag and you will receive:
tesselator error: [100152] gluTessBeginContour() must precede a gluTessEndContour()
tesselator error: [100154] gluTessEndContour() must follow a gluTessBeginContour()

Can't Archive and Distribute a test project

I downloaded a project but it is not compiled. I added MonkSVG and MonkVG .a static libraries manually. So now I can run this project on a device or simulator.

But I can't perform Archive action. I see a lot of errors for such strings as:

include <MonkVG/openvg.h>

How to solve this problem?

Only first child node is parsed for root element

example:

the second tag g is not processed

text tag is not implemented

text is not implemented at all. I don't even see any code linked with this tag

stroke-linecap is not implemented

I even don't know where to add it

MAXFLOAT is undefined error

MonkSVG/include/mkSVG.h

Line 95 in f3b7e90

: _minX(MAXFLOAT), _minY(MAXFLOAT), _width(-MAXFLOAT),

When I try to compile mkSVG.h, Visual Studio says MAXFLOAT is undefined, and I've fixed it by using #include and replacing it with FLT_MAX. Not sure if this is a fix or just a temporary plug, but would like to see it fixed in the repository.

fill="none" is not implemented?

https://gist.github.com/gerchicov/6989283

As I understand this code means a transparent figure, but it is filled with black color

I see that your string_hex_color_to_uint can't implement this value and simply returns 0.

test project doesn't work

.../MonkSVG_test/thirdparty/boost-ios/boost.framework/Versions/A/Headers/smart_ptr/shared_ptr.hpp:17:10: 'boost/config.hpp' file not found

I can't even compile iOS test project.

P.S. I can't compile project so I can't test another possible issue with shaders: they are connected but not properly used. Try to replace the following string:
gl_Position.y += sin(translate) / 2.0;
with this one:
gl_Position.y += 10000.0;
it seems it hasn't influence

Circle tag

Circle is not handled and I think it is enough easy to fix using an existing code.

stroke-linejoin is almost unimplemented

Your line joins look like you use "bevel" style. But If I perform something like this:

onPathBegin
onPathMoveTo
onPathLineTo //multiple times to draw a rect
onPathClose
onPathEnd

After this code a rect should be drawn. But I see the first and the last line haven't a join at all even if these points are the same.
You haven't implemented stroke, but I think at least one join style should be fully workable

Bug with colors in OpenGL ES 2.0

I don't know if this bug belongs to MonkSVG or MonkVG or to both of them.
example of file:
http://rghost.ru/54900118
The same bug occurs for a picture with a tiger.

With OpenGL ES 1.1 this library shows a correct color, but with OpenGL ES 2.0 all the colors are darker. Approximate comparison for #323232 color (OpenGL ES 1.1 is on the left side):

Multiple shapes in one path not drawn correctly

The tesselation used by MonkSVG fails unless all of the subpaths in a path are touching. The three red squares are touching, so tesselation works properly and all three squares appear. The two blue squares are not touching, so tessellation fails and only the square closest to the top left appears (source order doesn't matter).

Here's an svg file that demonstrates the problem:
test.svg

Here's the correct rendering (as viewed in Safari or Xcode):

Here's what it looks like when rendered by MonkSVG:

Possible bug with shaders

Shader files are connected and look like used but with no effect. Check them please.

Circles drawn with the onPathSCubic are mishapen

I have an issue where a circle will draw 3 sides using onPathCubic and one side with onPathSCubic. The first 3 sides display fine but the side with onPathSCubic draws more like a rounded square corner. I'm using the example project to load the svg. I will send you the svg file later today.

Application falls down

Probably its context is not destroyed properly.

I tried to put your code in my project into a separate UIViewController. Then I run the application and try to push/pop this view controller multiple times and it falls down.

Can you post some instructions how to insert your code in another object or can you see what is wrong with my code?

call drawing twice?

MonkSVG_OpenGL_Test_iOSViewController.mm
method drawFrame:
you have called the drawing twice:

vgSVGRenderer->draw();
...
vgSVGRenderer->draw();

As I understand you draw the same picture twice with various transform matrices only, don't you?

Another problem with g tag

I have the following code:
https://gist.github.com/gerchicov/7315356

path draws a big black circle and rect and polyline draw a white picture inside it. If I use the code above then I'll see circle only. But I'll see all the pictures if I delete the most inner g tag.
In usual editor or viewer all the pictures are visible in both cases.

A simple Line bug?

void SVG::handle_line(TiXmlElement *element) {

    _handler->onPathBegin();
    float x1, x2, y1, y2;
    element->QueryFloatAttribute("x1", &x1);
    element->QueryFloatAttribute("y1", &y1);
    element->QueryFloatAttribute("x2", &x2);
    element->QueryFloatAttribute("y2", &y2);
    _handler->onLine(x1, y1, x2, y2);

// _handler->onPathMoveTo(x1, y1);
// _handler->onPathLineTo(x2, y2);
handle_general_parameter(element);
_handler->onPathEnd();
}

void OpenVG_SVGHandler::onLine(float x1, float y1, float x2, float y2) {

    vguLine(_current_group->current_path->path, x1, y1, x2, y2);
}

I added these methods. because a simple line tag is unimplemented. And onLine must work as onPathMoveTo + onPathLineTo and it must be correct. But they both work incorrectly and... differently?!