Giter VIP home page Giter VIP logo

canvg's Introduction

canvg

Logo

NPM version Dependencies status Build status Coverage status

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. It also can be used to rasterize SVG images.

Quickstart   •   Docs   •   Demo


Quickstart

Install this library using your favorite package manager:

pnpm add canvg
# or
yarn add canvg
# or
npm i canvg

Then, just import Canvg and use it:

import { Canvg } from 'canvg';

let v = null;

window.onload = async () => {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(ctx, './svgs/1.svg');

  // Start SVG rendering with animations and mouse handling.
  v.start();
};

window.onbeforeunload = () => {
  v.stop();
};

Description of all exports you can find in Documentation.


Docs

What's implemented?

The end goal is everything from the SVG spec. The majority of the rendering and animation is working. If you would like to see a feature implemented, don't hesitate to add it to the issues list, or better is to create pull request 😎

canvg's People

Contributors

abishekrsrikaanth avatar brettz9 avatar bz2 avatar candu avatar codedread avatar dangreen avatar dependabot-preview[bot] avatar dependabot[bot] avatar dgorbash avatar diegotremper avatar dmccabe avatar fargyriou avatar ffflabs avatar fuzhenn avatar gabelerner avatar graingert avatar hackbrettxxx avatar ilyasv avatar jpatel3 avatar kurtgokhan avatar markmaldaba avatar megaknoc avatar mnbuyskih avatar peterdavehello avatar renovate[bot] avatar rpek007 avatar rudolfhattenkofer avatar tm93112 avatar wzs1234566 avatar yar3333 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

canvg's Issues

Handle shortcut elliptical arc path syntax

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

Doesn't render large strokes well.

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

SVG Path Parser requires whitespace on relative commands

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

Radial gradient is converted wrongly

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

clipPath causing a SyntaxError?

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

Support font-family

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.

<title>Layer 1</title> Serif Sans-Serif Fantasy Monospace Cursive

Original issue: http://code.google.com/p/canvg/issues/detail?id=32

Rendering problem with relative gradients

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

Text on a path -

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

Handle text-anchor

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 box

should 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

Implement symbol element

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

Support Opera

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

Progress Reporting

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:

  • have a 'setProgressFunction(func)' function that allows the user to send
    a callback function that canvg remembers
  • Upon parsing hte XML, get a tally of all elements in the document:
    var total = document
    document.documentElement.getElementsByClassName('*').length
  • every time we enter RenderedElementBase() we count up a count variable
    and if we go up a percentage point then send a notification with the
    progress to the progress function

Original issue: http://code.google.com/p/canvg/issues/detail?id=14

Support linearGradient

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

Multi line Text not supported

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

Support the <title> element

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 ):

<title>Layer 1</title> What is the expected output? What do you see instead? The SVG should be rendered in the canvas. Instead, I get an error message saying "ERROR: Element 'title' not yet implemented."

Original issue: http://code.google.com/p/canvg/issues/detail?id=1

Create unit tests

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.