akrinke / svg2cairo Goto Github PK
View Code? Open in Web Editor NEWSVG to Cairo code converter.
SVG to Cairo code converter.
Hello akrinke:
Stll enjoying this program immensly. being able to make cairo code WYSIWYG style with inkscape is wonderful! However I finally figured out why some of my drawings didn't translate correctly. When a stroke has a gradient (linear or radial) it gets messed up. For example this stroke:
/********************/
cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
cairo_set_line_width(cr, 1.5);
cairo_set_miter_limit(cr, 4);
cairo_set_line_cap(cr, CAIRO_LINE_CAP_BUTT);
cairo_set_line_join(cr, CAIRO_LINE_JOIN_MITER);
pattern = cairo_pattern_create_linear(943.0932, 475.09332, 922.98602, 448.48618);
cairo_pattern_add_color_stop_rgba(pattern, 0,0,0,0,1);
cairo_pattern_add_color_stop_rgba(pattern, 1,1,1,1,1);
cairo_matrix_init(&matrix, 1,0,0,1,924.164629,451.302032);
cairo_pattern_set_matrix(pattern, &matrix);
cairo_pattern_set_extend(pattern, CAIRO_EXTEND_PAD);
cairo_pattern_set_filter(pattern, CAIRO_FILTER_GOOD);
cairo_set_source(cr, pattern);
cairo_pattern_destroy(pattern);
cairo_new_path(cr);
cairo_move_to(cr, 3.527344, 0.753906);
cairo_line_to(cr, 17.972656, 0.753906);
cairo_curve_to(cr, 19.507812, 0.753906, 20.75, 2, 20.75, 3.535156);
cairo_line_to(cr, 20.75, 17.976562);
cairo_curve_to(cr, 20.75, 19.511719, 19.507812, 20.753906, 17.972656, 20.753906);
cairo_line_to(cr, 3.527344, 20.753906);
cairo_curve_to(cr, 1.992188, 20.753906, 0.75, 19.511719, 0.75, 17.976562);
cairo_line_to(cr, 0.75, 3.535156);
cairo_curve_to(cr, 0.75, 2, 1.992188, 0.753906, 3.527344, 0.753906);
cairo_close_path(cr);
cairo_set_tolerance(cr, 0.1);
cairo_set_antialias(cr, CAIRO_ANTIALIAS_DEFAULT);
cairo_matrix_init(&matrix, 1,0,0,1,-915.02844,-473.718751);
cairo_pattern_set_matrix(pattern, &matrix);
cairo_stroke_preserve(cr);
/********************/
the 3rd and 4th to last lines create a new matrix and set the pattern which has already been destroyed. I'm not sure what the result is other than the gradient seems to be shifted such that only the last stop is shown in the stroke. Commenting these two lines out gives the desired behaviour.
For now I am just doing it manually, no problem, but I figured you'd appreciate a bug report.
On an unrealated issue, I see the code always uses stroke_preserve and fill_preserve but when an object is filled and stroked a new identical path is created anyway. I don't know if that results in performance loss or not, but it seems inefficient.
THANK YOU!!!
Hello,
I'm using svg2cairo to convert widgets I drew in inkscape to C code. This works great, but I found an issue that probably is more related to some lua library. I'm not familiar with lua so I can't tell.
What happens is that after every object is drawn the command cairo_set_antialias() is called with argument CAIRO_DEFAULT which isn't defined in cairo. I'm fairly confident it was intended to be CAIRO_ANTIALIAS_DEFAULT which is defined. Its easy for me to fix and work around, but if you can fix it, it would make it work perfectly for me!
Thanks for a great program!
Me again:
I meant to file this one earlier. I found that if I have blur in something in inkscape, svg2cairo doesn't gracefully ignore it, rather it creates uncompilable code. I know blur isn't supported yet in cairo (I'm applying it manually later) but it would be nice to not need to have a extra step removing it. Here is an example svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="26.299999"
height="26.299999"
id="svg8365"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="MWE.svg">
<defs
id="defs8367">
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4200"
id="linearGradient5888"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.1558885,0,0,0.53769429,142.55874,116.2103)"
x1="128.75"
y1="337.91769"
x2="128.75"
y2="355.34933" />
<linearGradient
id="linearGradient4200">
<stop
id="stop4202"
style="stop-color:#ff0000;stop-opacity:0"
offset="0" />
<stop
id="stop4204"
style="stop-color:#ff0000;stop-opacity:1"
offset="0.21795145" />
<stop
id="stop4206"
style="stop-color:#ff0000;stop-opacity:1"
offset="0.77006018" />
<stop
id="stop4208"
style="stop-color:#ff0000;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient5847">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop5849" />
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="1"
id="stop5851" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5839"
id="linearGradient5884"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-9.1361885,22.416719)"
x1="943.0932"
y1="475.09332"
x2="922.98602"
y2="448.48618" />
<linearGradient
id="linearGradient5839">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop5841" />
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="1"
id="stop5843" />
</linearGradient>
<filter
inkscape:collect="always"
id="filter3785"
x="-0.12"
width="1.24"
y="-0.12"
height="1.24"
color-interpolation-filters="sRGB">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="1"
id="feGaussianBlur3787" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="5.6"
inkscape:cx="-17.574422"
inkscape:cy="6.0524942"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1596"
inkscape:window-height="861"
inkscape:window-x="0"
inkscape:window-y="18"
inkscape:window-maximized="0" />
<metadata
id="metadata8370">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-786.85,-427.7875)">
<rect
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-opacity:1;filter:url(#filter3785)"
id="rect5876"
width="20"
height="20"
x="790.0014"
y="430.93277"
ry="0" />
</g>
</svg>
And the code it creates:
int cairo_code_draw_MWEblur_get_width() { return 26; }
int cairo_code_draw_MWEblur_get_height() { return 26; }
void cairo_code_draw_MWEblur_render(cairo_t *cr) {
cairo_surface_t *temp_surface;
cairo_t *old_cr;
cairo_pattern_t *pattern;
cairo_matrix_t matrix;
cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
int cairo_code_draw_MWEblur_get_width() { return 26; }
int cairo_code_draw_MWEblur_get_height() { return 26; }
void cairo_code_draw_MWEblur_render(cairo_t *cr) {
cairo_surface_t *temp_surface;
cairo_t *old_cr;
cairo_pattern_t *pattern;
cairo_matrix_t matrix;
}
cairo_pattern_set_extend(pattern, CAIRO_EXTEND_NONE);
cairo_pattern_set_filter(pattern, CAIRO_FILTER_GOOD);
cairo_set_source(cr, pattern);
cairo_pattern_destroy(pattern);
cairo_paint(cr);
/********************/
}
You see it throws an extra curly brace in there where it should be defining a pattern and path. It would be nice if it could just leave out the blur and draw the stroke or at least ignore strokes with blur.
THANKS!!!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.