Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

This SVG does not render correctly in canvg

See original GitHub issue

I used the canvg test page on this svg string:

<svg xmlns="" version="1.1" id="Layer_1" viewBox="600 400 1200 1300" height="32px" width="19px">
  <defs><pattern id="multiband" width="1" height="3" patternContentUnits="objectBoundingBox"><path fill="#ff0000" d="M 0.5 0.31666666666666665 L 0.5 0.95 A 1 0.6333333333333333 0 0 0 1.3660254037844388 1.4062824978585316e-16 Z" /><path fill="#00ff00" d="M 0.5 0.31666666666666665 L 1.3660254037844388 1.4062824978585316e-16 A 1 0.6333333333333333 0 0 0 -0.3660254037844385 -2.812564995717063e-16 Z" /><path fill="#0000ff" d="M 0.5 0.31666666666666665 L -0.3660254037844385 -2.812564995717063e-16 A 1 0.6333333333333333 0 0 0 0.4999999999999998 0.95 Z" /></pattern></defs>
  <g id="svg_1">
     <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#multiband)" stroke="#000000" stroke-width="90" stroke-miterlimit="10" d="m1174.939941,1873.629028c-38.765869,-190.301025 -107.115967,-348.665039 -189.902954,-495.439941c-61.406982,-108.87207 -132.543945,-209.363037 -198.364014,-314.937988c-21.971985,-35.244019 -40.93396,-72.477051 -62.046997,-109.054077c-42.215942,-73.136963 -76.44397,-157.934998 -74.268982,-267.932007c2.125,-107.472961 33.208008,-193.68399 78.029968,-264.171997c73.719055,-115.934967 197.20105,-210.988983 362.884033,-235.968979c135.466064,-20.423996 262.475098,14.082001 352.542969,66.748001c73.600098,43.037994 130.596069,100.527008 173.920044,168.279999c45.219971,70.716003 76.359009,154.26001 78.970947,263.231995c1.337036,55.830017 -7.804932,107.531982 -20.68396,150.417969c-13.033936,43.409058 -33.995972,79.695007 -52.645996,118.454041c-36.406006,75.658997 -82.04895,144.981995 -127.85498,214.346008c-136.437012,206.605957 -264.496094,417.309937 -320.580078,706.026978z" id="svg_2"/>

This is the difference:


Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

gabelernercommented, Apr 15, 2019

that smaller example helps … if you remove x="-14.4" y="-14.4" from the pattern it begins working, although it’s not the right opacity so there’s a bug w/ fill-opacity.

so current bugs for this issue are:

  • x/y coordinates on pattern, maybe negative ones, don’t render
  • fill-opacity does not work when there are patterns

but we made some progress!

SnooHDcommented, Jun 27, 2019

The fill-opacity also doesn’t work with gradients. I have not tested masks, but i presume this issue will be with any fill url

<svg width="792" height="600" viewBox="0 0 792 600">
    <linearGradient id="302" x1="0%" x2="100%" y1="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255, 255, 255);stop-opacity:1;"></stop>
      <stop offset="60%" style="stop-color:#000;stop-opacity:1;"></stop>
  <path stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="url(#302)" fill-opacity="0.2" fill-rule="evenodd" pointer-events="visiblePainted" shape-rendering="geometricPrecision" d="M406.000000,300.000000L399.090170,309.510565L387.909830,305.877853L387.909830,294.122147L399.090170,290.489435Z" />

It can, for now, be resolved using stop-opacity or using rgba values instead.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SVG Image not converted properly to Canvas using canvg
Pass the canvas element to canvg svg = $('svg').parent().html() canvas = document.getElementById("canvas") canvg(canvas, svg) img_PNG ...
Read more >
How to draw SVG image on canvas with Konva
Option 3: Use an external library to render SVG to canvas. Use an external library (for example, canvg) to draw the SVG into...
Read more >
Automatic Translation of Interactive SVGs to a Multithread ...
This does not increase performance as more work must be completed. Other projects, such as canvg [25], render SVG elements individually in a...
Read more >
canvg - Bountysource
Both are identical except that #c1 has canvg rendering an svg with ... Hello I having issues trying to get text to render...
Read more >
Newest 'canvg' Questions - Stack Overflow
SVG is not correctly rendered with canvg. I need to convert svg to png and I'm using currently canvg to do this. But...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found