canvg / canvg Goto Github PK
View Code? Open in Web Editor NEWJavaScript SVG parser and renderer on Canvas
Home Page: https://canvg.js.org
License: MIT License
JavaScript SVG parser and renderer on Canvas
Home Page: https://canvg.js.org
License: MIT License
From [email protected] on April 14, 2010 14:04:08
http://dev.w3.org/SVG/profiles/1.1F2/publish/painting.html#Markers Test file:
Original issue: http://code.google.com/p/canvg/issues/detail?id=36
From [email protected] on April 05, 2010 09:06:28
The following SVG file:
displays fine as an SVG in Firefox, Opera, Batik and IE9. Currently WebKit
does NOT display this SVG.
This is because four of the user agents interpret "00" as 0,0 and "0100" as
0,100 which means they detect 7 numbers for the A command. WebKit
interpets "0100" as 100, which means it thinks one number is missing.
While I have asked the SVG WG for a clarification, I think canvg should
parse the path syntax as the four user agents do to ensure maximum
interoperability
Original issue: http://code.google.com/p/canvg/issues/detail?id=23
From [email protected] on March 29, 2010 10:28:06
Expect to see a rounded rectangle.
Original issue: http://code.google.com/p/canvg/issues/detail?id=7
From [email protected] on March 30, 2010 20:12:21
Example SVG:
Path is not displayed
Original issue: http://code.google.com/p/canvg/issues/detail?id=12
From [email protected] on April 30, 2010 16:59:44
If this text is green, the
test passed
If
this text is green, the test passed
Original issue: http://code.google.com/p/canvg/issues/detail?id=44
From [email protected] on May 12, 2010 05:38:33
What steps will reproduce the problem? For example the following markup renders correctly on Firefox, safari and
Chrome:
First LineSecond LineThird
Line
Each tspan comes in a different line.
Expected output would be:
First Line
Second Line
Third Line
Instead canvg just renders it as a single line.
I'm using the latest version checked out from the website. It would be nice
if this was supported.
Original issue: http://code.google.com/p/canvg/issues/detail?id=46
From [email protected] on April 07, 2010 09:44:22
Just throwing around the idea, but since after the viewport/viewbox changes
everything on the test page is rendering exactly the same as the svgs, maybe
we can create a unit test page that loads the svgs one by one and does a
toDataUrl ( http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas- todataurl) on them, then compares that against the expected toDataUrl value.
Don't know if this would be different between browsers or not, but at least I
won't have to click through 20 links each time I check in.
Original issue: http://code.google.com/p/canvg/issues/detail?id=26
From [email protected] on April 29, 2010 08:07:21
While markers now work great and as expected on paths and line elements,
they do not appear to work on or elements, while the
spec says they should. Here's an example on polylines:
Original issue: http://code.google.com/p/canvg/issues/detail?id=42
From [email protected] on April 12, 2010 14:52:37
http://dev.w3.org/SVG/profiles/1.1F2/publish/text.html#FontWeightProperty At least the value of 'bold' should be supported on first pass. Test file:
BoldOriginal issue: http://code.google.com/p/canvg/issues/detail?id=34
From [email protected] on March 29, 2010 09:31:59
What steps will reproduce the problem? 1. Paste in the following SVG document at the test page:
Original issue: http://code.google.com/p/canvg/issues/detail?id=3
From [email protected] on March 28, 2010 11:43:27
What steps will reproduce the problem? 1. Paste the following SVG document into the canvg test page
( http://canvg.googlecode.com/svn/trunk/test.htm ):
Original issue: http://code.google.com/p/canvg/issues/detail?id=1
From [email protected] on July 21, 2010 11:12:03
Load a file with this data:
Note that the CanVG output does not look like the way browsers render the SVG file.
See also: https://code.google.com/p/svg-edit/issues/detail?id=608
Attachment: path_with_s.svg
Original issue: http://code.google.com/p/canvg/issues/detail?id=49
From [email protected] on April 29, 2010 01:43:38
http://www.w3.org/1999/06/25/WD-SVG-19990625/struct.html#SymbolElement http://www.carto.net/papers/svg/samples/pattern2.svg
<title>pattern</title>
<pattern id="pat00" patternUnits="userSpaceOnUse"
width="30" height="45">
<path id="geometry" style="fill-
rule:nonzero;stroke:#B42D25;stroke-width:2;" d="M0 50 l100 -50 100 20 -50
50 -100 20z"/>
coniferous
broadLeave
Original issue: http://code.google.com/p/canvg/issues/detail?id=41
From [email protected] on April 14, 2010 12:44:12
http://www.w3.org/TR/SVG/pservers.html Currently gradients do not appear to work on strokes.
Test file:
Original issue: http://code.google.com/p/canvg/issues/detail?id=35
From [email protected] on April 03, 2010 00:03:10
canvg fails to render anything if filter elements are present.
Try the following SVG:
<title>Google Buzz</title>However, if you remove the element, the image renders fine.
canvg should probably just ignore the filter elements unless you have a
better idea.
Original issue: http://code.google.com/p/canvg/issues/detail?id=16
From [email protected] on April 07, 2010 23:13:51
What steps will reproduce the problem? 1. Load up http://codedread.com/android.svg in canvg
2. ALMOST there now, just missing the last 'D' in the logo (because it's a
Original issue: http://code.google.com/p/canvg/issues/detail?id=29
From [email protected] on May 14, 2010 02:04:24
What steps will reproduce the problem? 1. Pasted the below SVG into the test page
Example toap01 - simple text on a path
We go up, then we go down, then up again
What is the expected output?
Expected to see text rendered on a path
What do you see instead?
Path but no text What version of the product are you using? On what operating system? Using the test page ( http://canvg.googlecode.com/svn/trunk/examples/index.htm )
Firefox 3.5.9 Please provide any additional information below. I'm interested in using your library to convert SVG text on a path to
visualize on the canvas
Original issue: http://code.google.com/p/canvg/issues/detail?id=47
From [email protected] on April 04, 2010 18:13:08
Should produce a circle translated by 100,0. canvg produces nothing.
Original issue: http://code.google.com/p/canvg/issues/detail?id=21
From [email protected] on April 03, 2010 08:53:02
This should produce a blue square, but because h100 happens to line up with
the starting point (100), nothing is visible.
Original issue: http://code.google.com/p/canvg/issues/detail?id=18
From [email protected] on April 12, 2010 14:45:15
canvg does not handle the font-size property yet for elements. http://dev.w3.org/SVG/profiles/1.1F2/publish/text.html#FontSizeProperty In the example file, the text should be about as large as the box:
TextNote that font-size can also be inherited so font-size could be on the
element and it should get picked up by the text element unless
overridden.
Original issue: http://code.google.com/p/canvg/issues/detail?id=31
From [email protected] on April 03, 2010 00:44:08
As can be seen, the above path is rendered with the proper color (blue),
width (36) and opacity (0.5) but the linecap is not inherited properly down
to the path.
Original issue: http://code.google.com/p/canvg/issues/detail?id=17
From [email protected] on April 06, 2010 07:58:00
Shows a pointed triangle, while the SVG file should show a triangle with
rounded corners. See http://www.w3.org/TR/SVG11/painting.html#propdef-stroke-linejoin
Original issue: http://code.google.com/p/canvg/issues/detail?id=25
From [email protected] on March 30, 2010 20:13:38
The tiger example does not have a black outline/stroke as it does in the
SVG file
Original issue: http://code.google.com/p/canvg/issues/detail?id=13
From [email protected] on April 22, 2010 23:29:22
http://www.w3.org/TR/SVG/pservers.html#Patterns
Ellipse with a bunch of upside down triangles
Original issue: http://code.google.com/p/canvg/issues/detail?id=40
From [email protected] on May 27, 2010 13:10:30
When I try to render this SVG using canvg: http://blog.visucore.com/files/svg/led.svg The outer (glow) radial gradient is rendered wrongly. For some reason it is
completely off-center or mis-scaled (haven't found out what yet) causing
the entire circle to be rendered as transparent.
Output:
save();
font = ' 10px sans-serif';
beginPath();
moveTo(0,0);
lineTo(41.03125,0);
lineTo(41.03125,35.6875);
lineTo(0,35.6875);
closePath();
clip();
strokeStyle = 'rgba(0,0,0,0)';
lineCap = 'butt';
lineJoin = 'miter';
miterLimit = 4;
save();
restore();
save();
restore();
save();
translate(-0.392821,0.0710407);
save();
g1 = createRadialGradient(55.375847,43.243359,0,55.375847,43.243359,15.8125);
g1.addColorStop(0,'rgba(99, 251, 0, 1)');
g1.addColorStop(0.53061223,'rgba(90, 229, 0, 1)');
g1.addColorStop(1,'rgba(20, 20, 20, 0)');
fillStyle = g1;
strokeStyle = 'rgba(0,0,0,0)';
beginPath();
moveTo(20.924071,-0.07104075);
bezierCurveTo(10.494467000000002,-0.07104075,0.39282109000000176,6.9836782,0.39282109000000176,17.772709);
bezierCurveTo(0.39282109000000176,28.56174,10.494467000000002,35.616459,20.924071,35.616459);
bezierCurveTo(31.353675000000003,35.616459,41.424071,28.535198,41.424071,17.772709);
bezierCurveTo(41.424071,7.010220199999999,31.353674999999996,-0.07104075000000165,20.924070999999998,-0.07104075000000165);
closePath();
fill();
stroke();
restore();
save();
g2 = createRadialGradient(115.70896,153.41667,0,115.70896,153.41667,16.75);
g2.addColorStop(0,'rgba(187, 241, 93, 1)');
g2.addColorStop(0.54348761,'rgba(162, 229, 35, 1)');
g2.addColorStop(1,'rgba(141, 231, 51, 1)');
fillStyle = g2;
strokeStyle = 'rgba(0,0,0,0)';
beginPath();
moveTo(34.054677,17.783455);
bezierCurveTo(34.054677,23.563064,28.170692,28.248365,20.912428999999996,28.248365);
bezierCurveTo(13.654165999999996,28.248365,7.770181099999997,23.563064,7.770181099999997,17.783455);
bezierCurveTo(7.770181099999997,12.003846,13.654165999999996,7.3185442,20.912428999999996,7.3185442);
bezierCurveTo(28.170691999999995,7.3185442,34.054677,12.003846,34.054677,17.783455);
closePath();
fill();
stroke();
restore();
save();
g3 = createRadialGradient(122.75,144.76639,0,122.75,144.76639,16.75);
g3.addColorStop(0,'rgba(255, 255, 255, 1)');
g3.addColorStop(1,'rgba(255, 255, 255, 0)');
fillStyle = g3;
strokeStyle = 'rgba(0,0,0,0)';
transform(0.684752,0,0,0.616201,-55.4553,-79.7338);
beginPath();
moveTo(129,155.75);
bezierCurveTo(129,162.51549,122.84392,168,115.25,168);
bezierCurveTo(107.65608,168,101.5,162.51549,101.5,155.75);
bezierCurveTo(101.5,148.98451,107.65608,143.5,115.25,143.5);
bezierCurveTo(122.84392,143.5,129,148.98451,129,155.75);
closePath();
fill();
stroke();
restore();
restore();
restore();
Attachment: led.svg
Original issue: http://code.google.com/p/canvg/issues/detail?id=48
From [email protected] on April 07, 2010 16:21:30
Make example page prettier, rename it and put it in an examples folder
Original issue: http://code.google.com/p/canvg/issues/detail?id=27
From [email protected] on April 20, 2010 10:38:31
http://www.w3.org/TR/SVG/text.html#TSpanElement
Example tspan01 - using tspan to change visual attributes
You are
not
a banana.
Should say "You are not a banana" with text in blue and "not" in bold red.
Original issue: http://code.google.com/p/canvg/issues/detail?id=38
From [email protected] on April 16, 2010 12:04:05
r45 appears to have broken all rendering in Opera 10 (10.50 is fine). The
error console gives a stack overflow error. Possibly because it doesn't
support the Text API?
Original issue: http://code.google.com/p/canvg/issues/detail?id=37
From [email protected] on April 12, 2010 14:42:00
canvg capabilities seem almost up to the task of converting many SVG files
to HTML canvas. Time to focus on its text capabilities.
This bug is to deal with text-anchor. The following file:
Text should be centered inside the boxshould show text centered inside the yellow box.
canvg starts rendering the left-most glyph at the x,y points specified in
the element
It would be great if canvg handles the values of "middle" and "end" for the
text-anchor property. http://dev.w3.org/SVG/profiles/1.1F2/publish/text.html#TextAnchorProperty
Original issue: http://code.google.com/p/canvg/issues/detail?id=30
From [email protected] on March 29, 2010 14:51:21
Remove timers from animations. Have them register with the main svg object.
In redraw loop, update the animations and only redraw if something has
changed.
Original issue: http://code.google.com/p/canvg/issues/detail?id=10
From [email protected] on March 31, 2010 08:06:16
Opera supports the element, but I'm not clear on level of support
(last I heard they did not support the text interface but that may have
changed). It would be great to support Opera browsers.
I also discovered something that may make this easier: http://lists.w3.org/Archives/Public/public-html/2007Oct/0320.html I do not know if these experimental interfaces are still supported in
browsers beyond 9.50 but it's worth some investigation. canvg may reduce
to one call for Opera (and would presumably be faster).
Original issue: http://code.google.com/p/canvg/issues/detail?id=15
From [email protected] on August 03, 2010 11:36:21
What steps will reproduce the problem? 1. Export drawing with relative gradient to PNG 2. 3. What is the expected output? What do you see instead? Image should match original SVG. In some cases you end up with changes to the gradient, but in worse situations, the path itself gets altered. What version of the product are you using? On what operating system? r67 / Linux Please provide any additional information below. This example results in a weird banding in the gradient of the resulting PNG. If I drop it back to two stops then it seems to be fine.
<title>Layer 1</title>Here is another example which results in some weird path changes:
<title>Layer 1</title>Please let me know if I can provide anything else.
Original issue: http://code.google.com/p/canvg/issues/detail?id=50
From [email protected] on April 04, 2010 18:16:09
should render a blue circle. canvg renders a blue ellipse.
Original issue: http://code.google.com/p/canvg/issues/detail?id=22
From [email protected] on May 08, 2010 15:56:11
I created the following simple SVG in inkscape, but nothing is shown when I
try to render it on a canvas: http://www.visucore.com/svg/artifact.svg Output produced by CanVG: http://www.visucore.com/svg/artifact.js It looks like the gradients don't have any stops.
Original issue: http://code.google.com/p/canvg/issues/detail?id=45
From [email protected] on March 29, 2010 10:14:29
What steps will reproduce the problem? 1. Paste in the following SVG:
What is the expected output? What do you see instead? A red triangle. canvg does not display the triangle.This is because there is no space between 0 and -100 in the third path
sub-command. This is legal syntax in the SVG spec.
Original issue: http://code.google.com/p/canvg/issues/detail?id=5
From [email protected] on March 31, 2010 07:47:52
It would be great to figure out a way to report progress of parsing of SVG
into canvas, particularly with large SVG files for which canvg can take
some perceptible time.
One idea:
Original issue: http://code.google.com/p/canvg/issues/detail?id=14
From [email protected] on April 30, 2010 16:50:23
You should see a green circle link.
Notice that the green circle is not displayed due to the child of the
element. This bug against canvg is to try and keep
processing/rendering the SVG even if it encounters some unknown
element/situation.
Original issue: http://code.google.com/p/canvg/issues/detail?id=43
From [email protected] on April 07, 2010 22:55:12
It would be handy to be able to launch the canvg test page with a
particular SVG file. This would make it easier to pass around links.
Ideas:
test.html?dataurl=....
test.html?url=....
this would populate the test page with the document in the textarea
and the canvg rendering.
Original issue: http://code.google.com/p/canvg/issues/detail?id=28
From [email protected] on March 29, 2010 10:17:54
What steps will reproduce the problem? 1. Use the source listed here: http://cse.unl.edu/~nbenes/snippets/Test%20Case_347938.snip 2. Compare the output in canvas to the output produced by viewing the svg
in chrome or firefox (or whatever svg viewer you please.) What is the expected output? What do you see instead? The program never "picks up the pen" as expected. What version of the product are you using? On what operating system? Trunk on Google Chrome v5 on WinXP (x64) Please provide any additional information below.
Original issue: http://code.google.com/p/canvg/issues/detail?id=6
From [email protected] on April 20, 2010 10:39:45
http://www.w3.org/TR/SVG/text.html#TRefElement
Referenced character data
Example tref01 - inline vs reference text content
Inline character data
Should show "inline character data" in blue and "referenced character data"
in red under it.
Original issue: http://code.google.com/p/canvg/issues/detail?id=39
From [email protected] on March 29, 2010 10:30:28
Example linecap - demonstrates three stroke-linecap values
Expect to see line caps. http://www.w3.org/TR/SVG/images/painting/linecap.svg http://www.w3.org/TR/SVG/painting.html
Original issue: http://code.google.com/p/canvg/issues/detail?id=8
From [email protected] on April 12, 2010 14:49:20
http://dev.w3.org/SVG/profiles/1.1F2/publish/text.html#FontFamilyProperty Note that at least the generic family names listed here should be
supported: http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-generic-family In the example, five text elements are shown, each in a different generic
font-family.
Original issue: http://code.google.com/p/canvg/issues/detail?id=32
From [email protected] on April 03, 2010 09:13:40
Should show a rectangle with two rounded corners at the bottom.
Original issue: http://code.google.com/p/canvg/issues/detail?id=19
From [email protected] on March 29, 2010 10:02:00
What steps will reproduce the problem? 1. Paste in the following SVG:
What is the expected output? What do you see instead? A red triangle. canvg fails to render the triangle. - I will note that putting a space between the lower-case L and the number 100 causes canvg to render the triangle - I will note that turning the relative path commands into absolute ones causes canvg to render the triangle. For instance, this SVG document renders fine:Original issue: http://code.google.com/p/canvg/issues/detail?id=4
From yukoba on April 04, 2010 03:26:16
Hello. This is not an issue but I will write it here.
I made a patch for IE with FlashCanvas ( http://flashcanvas.net/ ).
You can test it at http://yukoba.jp/SvgCanvasFlash/test.htm .
Second complex test is too heavy, but mainly it works.
I used FlashCanvas 1.2 beta 2.
Attachment: SvgCanvasFlash.patch
Original issue: http://code.google.com/p/canvg/issues/detail?id=20
From [email protected] on March 29, 2010 15:54:08
What steps will reproduce the problem? 1. Paste in the following SVG:
This is because the PathParser never resets the current point.
Original issue: http://code.google.com/p/canvg/issues/detail?id=11
From [email protected] on March 28, 2010 12:31:45
What steps will reproduce the problem? 1. Paste the following SVG into the test page:
<title>Layer 1</title> What is the expected output? What do you see instead? I expect an ellipse with a linear gradient fill going from red (top-left) to yellow (bottom-right).Instead, I see an ellipse with a yellow fill.
Original issue: http://code.google.com/p/canvg/issues/detail?id=2
From [email protected] on March 29, 2010 14:50:34
Make each object that renders into a path. Update the base class to render
them. Will simplify a lot of the logic.
Original issue: http://code.google.com/p/canvg/issues/detail?id=9
From [email protected] on April 12, 2010 14:51:10
http://dev.w3.org/SVG/profiles/1.1F2/publish/text.html#FontStyleProperty At least the italic style should be supported on first pass. Test file:
ItalicOriginal issue: http://code.google.com/p/canvg/issues/detail?id=33
From [email protected] on April 05, 2010 13:00:32
Hi - I'm trying to use canvg to get consistent rendering of an SVG that my
program produces on the fly as browser rendering seems to vary. I'm
noticing an issue that I'm not sure is actually a canvg issue, but I
figured I'd post it here anyway.
Under Chrome (on Windows), developer tools simply gives me a "Uncaught
SyntaxError: Unexpected token :" while under Firefox with Firebug (also
Windows), I get "invalid label svg.Element.svg:clipPath". I'm not sure how
to debug the issue further so I'll get your input on it.
An example of an SVG that errors can be found attached OR at http://files.minuslab.net/canvg-issue-clippath.svg . As I said they are
being generated on the fly hence all the extra, non-visible layers (I may
end up removing them on the fly as well).
This SVG seems to render to mostly correct degrees by Chrome and Firefox on
both Windows and Linux and by the librsvg command line tool rsvg-convert.
Imagemagick's convert also handles it but not quite as nicley as rsvg.
Attachment: canvg-issue-clippath.svg
Original issue: http://code.google.com/p/canvg/issues/detail?id=24
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.