`svgFromHtml` is not working properly
slfan2013 opened this issue · comments
I am trying to use svgFromHtml() to convert a .html file to .svg. I tried the following code and when opening the result .svg, it only display the '' tag, not displaying the picture.
CODE:
path1 <- system.file("extdata/alplots2_ff.html", package = "js2graphic")
file.copy(path1, getwd())
svgFromHtml("alplots2_ff.html")
double click the alplots2_ff.svg, it displays like this,
<svg style="width: 100%; height: 100%;" viewBox="-120.30000305175781,-111.80000305175781,1276.0166015625,809.4833374023438">
<g transform="translate(20,20)">
I'm sorry to hear you have experienced problems with svgFromHtml().
I cannot reproduce your issue. Running your CODE snippet on my computer results in the following SVG file that I can open without any problems in a vector graphics program like Affinity Designer (also rsvg::rsvg_png("alplots2_ff.svg", "alplots2_ff.png" produces a perfectly fine PNG image of the SVG file):
<svg style="width: 100%; height: 100%;" viewBox="-120.30000305175781,-111.80000305175781,1276.0166015625,809.4833374023438"><g transform="translate(20,20)"><path class="link" d="M208,252.32142857142858C245,252.32142857142858 245,252.32142857142856 282,252.32142857142856" style="stroke-width: 131.786; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 9 node</title></path><path class="link" d="M208,394.1071428571429C245,394.1071428571429 245,394.1071428571429 282,394.1071428571429" style="stroke-width: 131.786; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 9 node</title></path><path class="link" d="M302,394.1071428571429C339,394.1071428571429 339,394.1071428571429 376,394.1071428571429" style="stroke-width: 131.786; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 9 node</title></path><path class="link" d="M114,274.2857142857143C151,274.2857142857143 151,259.64285714285717 188,259.64285714285717" style="stroke-width: 117.143; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 8 node</title></path><path class="link" d="M114,401.4285714285714C151,401.4285714285714 151,401.42857142857144 188,401.42857142857144" style="stroke-width: 117.143; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 8 node</title></path><path class="link" d="M302,259.6428571428571C339,259.6428571428571 339,259.6428571428571 376,259.6428571428571" style="stroke-width: 117.143; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 8 node</title></path><path class="link" d="M772,288.9285714285714C809,288.9285714285714 809,303.57142857142856 846,303.57142857142856" style="stroke-width: 117.143; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 8 node</title></path><path class="link" d="M396,266.96428571428567C433,266.96428571428567 433,296.25 470,296.25" style="stroke-width: 102.5; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 7 node</title></path><path class="link" d="M396,408.75C433,408.75 433,408.75 470,408.75" style="stroke-width: 102.5; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 7 node</title></path><path class="link" d="M678,408.75C715,408.75 715,408.75 752,408.75" style="stroke-width: 102.5; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 7 node</title></path><path class="link" d="M114,43.92857142857143C151,43.92857142857143 151,43.92857142857143 188,43.92857142857143" style="stroke-width: 87.8571; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 6 node</title></path><path class="link" d="M208,43.92857142857143C245,43.92857142857143 245,43.92857142857143 282,43.92857142857143" style="stroke-width: 87.8571; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 6 node</title></path><path class="link" d="M302,43.92857142857143C339,43.92857142857143 339,43.92857142857143 376,43.92857142857143" style="stroke-width: 87.8571; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 6 node</title></path><path class="link" d="M490,303.5714285714286C527,303.5714285714286 527,318.2142857142857 564,318.2142857142857" style="stroke-width: 87.8571; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 6 node</title></path><path class="link" d="M584,318.2142857142857C621,318.2142857142857 621,303.5714285714286 658,303.5714285714286" style="stroke-width: 87.8571; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 6 node</title></path><path class="link" d="M772,416.0714285714286C809,416.0714285714286 809,416.07142857142856 846,416.07142857142856" style="stroke-width: 87.8571; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 6 node</title></path><path class="link" d="M866,191.07142857142856C903,191.07142857142856 903,137.1428571428571 940,137.1428571428571" style="stroke-width: 87.8571; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 6 node</title></path><path class="link" d="M866,416.07142857142856C903,416.07142857142856 903,416.07142857142856 940,416.07142857142856" style="stroke-width: 87.8571; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 6 node</title></path><path class="link" d="M490,423.3928571428571C527,423.3928571428571 527,423.3928571428571 564,423.3928571428571" style="stroke-width: 73.2143; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 5 node</title></path><path class="link" d="M584,423.3928571428571C621,423.3928571428571 621,423.3928571428571 658,423.3928571428571" style="stroke-width: 73.2143; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 5 node</title></path><path class="link" d="M678,310.8928571428571C715,310.8928571428571 715,310.8928571428571 752,310.8928571428571" style="stroke-width: 73.2143; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 5 node</title></path><path class="link" d="M772,115.17857142857142C809,115.17857142857142 809,183.75 846,183.75" style="stroke-width: 73.2143; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 5 node</title></path><path class="link" d="M866,36.607142857142854C903,36.607142857142854 903,36.607142857142854 940,36.607142857142854" style="stroke-width: 73.2143; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 5 node</title></path><path class="link" d="M866,281.60714285714283C903,281.60714285714283 903,271.6071428571428 940,271.6071428571428" style="stroke-width: 73.2143; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 5 node</title></path><path class="link" d="M114,147.1428571428571C151,147.1428571428571 151,147.14285714285717 188,147.14285714285717" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M208,147.14285714285717C245,147.14285714285717 245,147.1428571428571 282,147.1428571428571" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M302,147.1428571428571C339,147.1428571428571 339,161.78571428571428 376,161.78571428571428" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M396,161.78571428571428C433,161.78571428571428 433,107.85714285714283 470,107.85714285714283" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M490,107.85714285714283C527,107.85714285714283 527,151.78571428571422 564,151.78571428571422" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M584,151.78571428571422C621,151.78571428571422 621,107.8571428571428 658,107.8571428571428" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M678,93.21428571428567C715,93.21428571428567 715,107.85714285714283 752,107.85714285714283" style="stroke-width: 58.5714; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 4 node</title></path><path class="link" d="M772,29.285714285714285C809,29.285714285714285 809,29.285714285714285 846,29.285714285714285" style="stroke-width: 58.5714; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 2 4 node</title></path><path class="link" d="M772,191.07142857142856C809,191.07142857142856 809,87.85714285714286 846,87.85714285714286" style="stroke-width: 58.5714; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 4 node</title></path><path class="link" d="M396,21.964285714285715C433,21.964285714285715 433,21.964285714285715 470,21.964285714285715" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 1 3 node</title></path><path class="link" d="M396,80.53571428571428C433,80.53571428571428 433,169.10714285714283 470,169.10714285714283" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 3 node</title></path><path class="link" d="M490,21.964285714285715C527,21.964285714285715 527,21.964285714285673 564,21.964285714285673" style="stroke-width: 43.9286; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 1 3 node</title></path><path class="link" d="M490,169.10714285714283C527,169.10714285714283 527,90.53571428571425 564,90.53571428571425" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 3 node</title></path><path class="link" d="M584,21.964285714285673C621,21.964285714285673 621,21.964285714285715 658,21.964285714285715" style="stroke-width: 43.9286; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 1 3 node</title></path><path class="link" d="M584,90.53571428571425C621,90.53571428571425 621,169.10714285714283 658,169.10714285714283" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 3 node</title></path><path class="link" d="M678,21.964285714285715C715,21.964285714285715 715,21.964285714285715 752,21.964285714285715" style="stroke-width: 43.9286; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 1 3 node</title></path><path class="link" d="M678,169.10714285714283C715,169.10714285714283 715,198.39285714285714 752,198.39285714285714" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 3 node</title></path><path class="link" d="M678,213.03571428571428C715,213.03571428571428 715,252.32142857142856 752,252.32142857142856" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 4 3 node</title></path><path class="link" d="M866,95.17857142857142C903,95.17857142857142 903,213.03571428571425 940,213.03571428571425" style="stroke-width: 43.9286; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 4 3 node</title></path><path class="link" d="M866,340.17857142857144C903,340.17857142857144 903,340.1785714285714 940,340.1785714285714" style="stroke-width: 43.9286; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 5 3 node</title></path><path class="link" d="M20,14.642857142857192C57,14.642857142857192 57,14.642857142857142 94,14.642857142857142" style="stroke-width: 29.2857; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 2 2 node</title></path><path class="link" d="M20,127.14285714285717C57,127.14285714285717 57,244.99999999999997 94,244.99999999999997" style="stroke-width: 29.2857; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 4 2 node</title></path><path class="link" d="M20,362.14285714285717C57,362.14285714285717 57,416.07142857142856 94,416.07142857142856" style="stroke-width: 29.2857; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 6 2 node</title></path><path class="link" d="M20,416.0714285714286C57,416.0714285714286 57,318.2142857142857 94,318.2142857142857" style="stroke-width: 29.2857; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 4 2 node</title></path><path class="link" d="M20,445.3571428571429C57,445.3571428571429 57,445.35714285714283 94,445.35714285714283" style="stroke-width: 29.2857; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 6 2 node</title></path><path class="link" d="M396,342.8571428571429C433,342.8571428571429 433,220.3571428571428 470,220.3571428571428" style="stroke-width: 29.2857; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 2 2 node</title></path><path class="link" d="M490,372.14285714285717C527,372.14285714285717 527,210.3571428571428 564,210.3571428571428" style="stroke-width: 29.2857; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 3 2 node</title></path><path class="link" d="M584,210.3571428571428C621,210.3571428571428 621,372.14285714285717 658,372.14285714285717" style="stroke-width: 29.2857; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 6 2 node</title></path><path class="link" d="M20,51.25000000000005C57,51.25000000000005 57,223.03571428571428 94,223.03571428571428" style="stroke-width: 14.6429; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 4 1 node</title></path><path class="link" d="M20,36.607142857142904C57,36.607142857142904 57,125.1785714285714 94,125.1785714285714" style="stroke-width: 14.6429; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 3 1 node</title></path><path class="link" d="M20,65.8928571428572C57,65.8928571428572 57,350.1785714285714 94,350.1785714285714" style="stroke-width: 14.6429; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 0.7;"><title>1 → 6 1 node</title></path><path class="link" d="M20,90.53571428571432C57,90.53571428571432 57,36.607142857142854 94,36.607142857142854" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 2 1 node</title></path><path class="link" d="M20,105.17857142857146C57,105.17857142857146 57,139.82142857142856 94,139.82142857142856" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 3 1 node</title></path><path class="link" d="M20,149.10714285714292C57,149.10714285714292 57,364.82142857142856 94,364.82142857142856" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 6 1 node</title></path><path class="link" d="M20,310.8928571428571C57,310.8928571428571 57,80.53571428571428 94,80.53571428571428" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 2 1 node</title></path><path class="link" d="M20,340.1785714285714C57,340.1785714285714 57,296.24999999999994 94,296.24999999999994" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 4 1 node</title></path><path class="link" d="M20,325.5357142857143C57,325.5357142857143 57,183.74999999999997 94,183.74999999999997" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 3 1 node</title></path><path class="link" d="M20,394.10714285714283C57,394.10714285714283 57,198.39285714285714 94,198.39285714285714" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 3 1 node</title></path><path class="link" d="M20,173.75000000000003C57,173.75000000000003 57,51.25 94,51.25" style="stroke-width: 14.6429; fill: none; stroke: rgb(148, 103, 189); stroke-opacity: 0.7;"><title>5 → 2 1 node</title></path><path class="link" d="M20,203.0357142857143C57,203.0357142857143 57,266.96428571428567 94,266.96428571428567" style="stroke-width: 14.6429; fill: none; stroke: rgb(148, 103, 189); stroke-opacity: 0.7;"><title>5 → 4 1 node</title></path><path class="link" d="M20,188.39285714285717C57,188.39285714285717 57,154.4642857142857 94,154.4642857142857" style="stroke-width: 14.6429; fill: none; stroke: rgb(148, 103, 189); stroke-opacity: 0.7;"><title>5 → 3 1 node</title></path><path class="link" d="M20,217.67857142857147C57,217.67857142857147 57,379.46428571428567 94,379.46428571428567" style="stroke-width: 14.6429; fill: none; stroke: rgb(148, 103, 189); stroke-opacity: 0.7;"><title>5 → 6 1 node</title></path><path class="link" d="M20,242.32142857142858C57,242.32142857142858 57,65.89285714285714 94,65.89285714285714" style="stroke-width: 14.6429; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 2 1 node</title></path><path class="link" d="M20,271.60714285714283C57,271.60714285714283 57,281.60714285714283 94,281.60714285714283" style="stroke-width: 14.6429; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 4 1 node</title></path><path class="link" d="M20,256.9642857142857C57,256.9642857142857 57,169.10714285714286 94,169.10714285714286" style="stroke-width: 14.6429; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 3 1 node</title></path><path class="link" d="M20,286.25C57,286.25 57,394.10714285714283 94,394.10714285714283" style="stroke-width: 14.6429; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 6 1 node</title></path><path class="link" d="M114,183.74999999999997C151,183.74999999999997 151,193.75000000000003 188,193.75000000000003" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 4 1 node</title></path><path class="link" d="M114,198.39285714285714C151,198.39285714285714 151,335.5357142857143 188,335.5357142857143" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 6 1 node</title></path><path class="link" d="M302,193.75C339,193.75 339,95.17857142857143 376,95.17857142857143" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 2 1 node</title></path><path class="link" d="M396,51.25C433,51.25 433,71.24999999999997 470,71.24999999999997" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 3 1 node</title></path><path class="link" d="M396,208.39285714285714C433,208.39285714285714 433,198.39285714285714 470,198.39285714285714" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 2 1 node</title></path><path class="link" d="M490,71.24999999999997C527,71.24999999999997 527,61.24999999999996 564,61.24999999999996" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 2 1 node</title></path><path class="link" d="M490,252.32142857142858C527,252.32142857142858 527,188.39285714285708 564,188.39285714285708" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 3 1 node</title></path><path class="link" d="M490,213.03571428571425C527,213.03571428571425 527,266.96428571428567 564,266.96428571428567" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 4 1 node</title></path><path class="link" d="M490,198.39285714285714C527,198.39285714285714 527,242.32142857142853 564,242.32142857142853" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 5 1 node</title></path><path class="link" d="M490,227.67857142857142C527,227.67857142857142 527,379.46428571428567 564,379.46428571428567" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 6 1 node</title></path><path class="link" d="M584,61.24999999999996C621,61.24999999999996 621,71.24999999999996 658,71.24999999999996" style="stroke-width: 14.6429; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 0.7;"><title>2 → 3 1 node</title></path><path class="link" d="M584,188.39285714285708C621,188.39285714285708 621,252.32142857142858 658,252.32142857142858" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 4 1 node</title></path><path class="link" d="M584,266.96428571428567C621,266.96428571428567 621,213.03571428571425 658,213.03571428571425" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 2 1 node</title></path><path class="link" d="M584,242.32142857142853C621,242.32142857142853 621,198.39285714285714 658,198.39285714285714" style="stroke-width: 14.6429; fill: none; stroke: rgb(148, 103, 189); stroke-opacity: 0.7;"><title>5 → 2 1 node</title></path><path class="link" d="M584,379.46428571428567C621,379.46428571428567 621,227.67857142857142 658,227.67857142857142" style="stroke-width: 14.6429; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 2 1 node</title></path><path class="link" d="M678,129.82142857142853C715,129.82142857142853 715,169.10714285714286 752,169.10714285714286" style="stroke-width: 14.6429; fill: none; stroke: rgb(44, 160, 44); stroke-opacity: 0.7;"><title>3 → 2 1 node</title></path><path class="link" d="M678,252.32142857142858C715,252.32142857142858 715,51.25 752,51.25" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 1 1 node</title></path><path class="link" d="M678,266.9642857142857C715,266.9642857142857 715,144.4642857142857 752,144.4642857142857" style="stroke-width: 14.6429; fill: none; stroke: rgb(214, 39, 40); stroke-opacity: 0.7;"><title>4 → 3 1 node</title></path><path class="link" d="M772,364.82142857142856C809,364.82142857142856 809,227.67857142857142 846,227.67857142857142" style="stroke-width: 14.6429; fill: none; stroke: rgb(140, 86, 75); stroke-opacity: 0.7;"><title>6 → 3 1 node</title></path><g class="node" transform="translate(0,4.973799150320701e-14)"><rect height="73.21428571428571" width="20" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;"><title>1<br>5 node</title></rect><text x="26" y="36.607142857142854" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">1</text></g><g class="node" transform="translate(0,83.21428571428575)"><rect height="73.21428571428571" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>5 node</title></rect><text x="26" y="36.607142857142854" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(0,303.57142857142856)"><rect height="73.21428571428571" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>5 node</title></rect><text x="26" y="36.607142857142854" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(0,386.7857142857143)"><rect height="73.21428571428571" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>5 node</title></rect><text x="26" y="36.607142857142854" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(0,166.42857142857144)"><rect height="58.57142857142857" width="20" style="fill: rgb(148, 103, 189); stroke: rgb(73, 50, 93); opacity: 0.9; cursor: move;"><title>5<br>4 node</title></rect><text x="26" y="29.285714285714285" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">5</text></g><g class="node" transform="translate(0,235)"><rect height="58.57142857142857" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>4 node</title></rect><text x="26" y="29.285714285714285" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(94,117.85714285714283)"><rect height="87.85714285714286" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>6 node</title></rect><text x="26" y="43.92857142857143" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(94,215.7142857142857)"><rect height="117.14285714285714" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>8 node</title></rect><text x="26" y="58.57142857142857" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(94,342.85714285714283)"><rect height="117.14285714285714" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>8 node</title></rect><text x="26" y="58.57142857142857" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(188,117.85714285714288)"><rect height="58.57142857142857" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>4 node</title></rect><text x="26" y="29.285714285714285" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(188,186.42857142857144)"><rect height="131.78571428571428" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>9 node</title></rect><text x="26" y="65.89285714285714" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(188,328.2142857142857)"><rect height="131.78571428571428" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>9 node</title></rect><text x="26" y="65.89285714285714" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(282,117.85714285714283)"><rect height="58.57142857142857" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>4 node</title></rect><text x="26" y="29.285714285714285" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(282,186.42857142857142)"><rect height="131.78571428571428" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>9 node</title></rect><text x="26" y="65.89285714285714" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(282,328.2142857142857)"><rect height="131.78571428571428" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>9 node</title></rect><text x="26" y="65.89285714285714" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(376,132.5)"><rect height="58.57142857142857" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>4 node</title></rect><text x="26" y="29.285714285714285" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(376,201.07142857142856)"><rect height="117.14285714285714" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>8 node</title></rect><text x="26" y="58.57142857142857" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(376,328.2142857142857)"><rect height="131.78571428571428" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>9 node</title></rect><text x="26" y="65.89285714285714" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(470,147.1428571428571)"><rect height="87.85714285714286" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>6 node</title></rect><text x="26" y="43.92857142857143" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(470,63.9285714285714)"><rect height="73.21428571428571" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>5 node</title></rect><text x="26" y="36.607142857142854" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(470,245)"><rect height="102.5" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>7 node</title></rect><text x="26" y="51.25" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(470,357.5)"><rect height="102.5" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>7 node</title></rect><text x="26" y="51.25" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(564,-4.440892098500626e-14)"><rect height="43.92857142857143" width="20" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;"><title>1<br>3 node</title></rect><text x="-6" y="21.964285714285715" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">1</text></g><g class="node" transform="translate(564,53.92857142857139)"><rect height="58.57142857142857" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>4 node</title></rect><text x="-6" y="29.285714285714285" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(564,122.49999999999994)"><rect height="102.5" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>7 node</title></rect><text x="-6" y="51.25" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(564,259.6428571428571)"><rect height="102.5" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>7 node</title></rect><text x="-6" y="51.25" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(564,234.99999999999994)"><rect height="14.642857142857142" width="20" style="fill: rgb(148, 103, 189); stroke: rgb(73, 50, 93); opacity: 0.9; cursor: move;"><title>5<br>1 node</title></rect><text x="-6" y="7.321428571428571" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">5</text></g><g class="node" transform="translate(564,372.1428571428571)"><rect height="87.85714285714286" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>6 node</title></rect><text x="-6" y="43.92857142857143" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(658,147.1428571428571)"><rect height="87.85714285714286" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>6 node</title></rect><text x="-6" y="43.92857142857143" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(658,63.92857142857139)"><rect height="73.21428571428571" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>5 node</title></rect><text x="-6" y="36.607142857142854" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(658,245)"><rect height="102.5" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>7 node</title></rect><text x="-6" y="51.25" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(658,357.5)"><rect height="102.5" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>7 node</title></rect><text x="-6" y="51.25" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(752,161.78571428571428)"><rect height="58.57142857142857" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>4 node</title></rect><text x="-6" y="29.285714285714285" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(752,78.57142857142856)"><rect height="73.21428571428571" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>5 node</title></rect><text x="-6" y="36.607142857142854" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(752,230.35714285714283)"><rect height="117.14285714285714" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>8 node</title></rect><text x="-6" y="58.57142857142857" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(752,357.5)"><rect height="102.5" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>7 node</title></rect><text x="-6" y="51.25" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(846,147.14285714285714)"><rect height="87.85714285714286" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>6 node</title></rect><text x="-6" y="43.92857142857143" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(846,245)"><rect height="117.14285714285714" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>8 node</title></rect><text x="-6" y="58.57142857142857" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(846,372.1428571428571)"><rect height="87.85714285714286" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>6 node</title></rect><text x="-6" y="43.92857142857143" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(940,93.21428571428567)"><rect height="87.85714285714286" width="20" style="fill: rgb(44, 160, 44); stroke: rgb(22, 78, 22); opacity: 0.9; cursor: move;"><title>3<br>6 node</title></rect><text x="-6" y="43.92857142857143" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">3</text></g><g class="node" transform="translate(940,191.07142857142853)"><rect height="117.14285714285714" width="20" style="fill: rgb(214, 39, 40); stroke: rgb(105, 19, 20); opacity: 0.9; cursor: move;"><title>4<br>8 node</title></rect><text x="-6" y="58.57142857142857" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">4</text></g><g class="node" transform="translate(940,318.21428571428567)"><rect height="43.92857142857143" width="20" style="fill: rgb(148, 103, 189); stroke: rgb(73, 50, 93); opacity: 0.9; cursor: move;"><title>5<br>3 node</title></rect><text x="-6" y="21.964285714285715" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">5</text></g><g class="node" transform="translate(940,372.1428571428571)"><rect height="87.85714285714286" width="20" style="fill: rgb(140, 86, 75); stroke: rgb(69, 42, 37); opacity: 0.9; cursor: move;"><title>6<br>6 node</title></rect><text x="-6" y="43.92857142857143" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">6</text></g><g class="node" transform="translate(94,0)"><rect height="87.85714285714286" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>6 node</title></rect><text x="26" y="43.92857142857143" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(188,0)"><rect height="87.85714285714286" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>6 node</title></rect><text x="26" y="43.92857142857143" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(282,0)"><rect height="87.85714285714286" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>6 node</title></rect><text x="26" y="43.92857142857143" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(376,0)"><rect height="102.5" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>7 node</title></rect><text x="26" y="51.25" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(470,0)"><rect height="43.92857142857143" width="20" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;"><title>1<br>3 node</title></rect><text x="26" y="21.964285714285715" dy=".35em" text-anchor="start" style="font-size: 14px; font-family: inherit;">1</text></g><g class="node" transform="translate(658,0)"><rect height="43.92857142857143" width="20" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;"><title>1<br>3 node</title></rect><text x="-6" y="21.964285714285715" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">1</text></g><g class="node" transform="translate(752,0)"><rect height="58.57142857142857" width="20" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;"><title>1<br>4 node</title></rect><text x="-6" y="29.285714285714285" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">1</text></g><g class="node" transform="translate(846,0)"><rect height="117.14285714285714" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>8 node</title></rect><text x="-6" y="58.57142857142857" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">2</text></g><g class="node" transform="translate(940,0)"><rect height="73.21428571428571" width="20" style="fill: rgb(255, 127, 14); stroke: rgb(125, 62, 7); opacity: 0.9; cursor: move;"><title>2<br>5 node</title></rect><text x="-6" y="36.607142857142854" dy=".35em" text-anchor="end" style="font-size: 14px; font-family: inherit;">2</text></g></g></svg>
Did you make sure you have all dependencies installed that are listed in the README file (PhantomJS, ImageMagick, Ghostscript and pdfcrop)?