Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/README.md

Last active May 14, 2016 04:03
Show Gist options
  • Save timelyportfolio/447fb5415b129d7288deb3eb8ed5ee38 to your computer and use it in GitHub Desktop.
Save timelyportfolio/447fb5415b129d7288deb3eb8ed5ee38 to your computer and use it in GitHub Desktop.
Download ZIP
fabric.js + ggplot2 with svg
Raw
README.md

Built with blockbuilder.org

Jeroen Ooms asked if we could just use the svg directly with fabric.js after I posted this fabric.js + ggplot2 example. I answered yes, but I learned the answer should have been almost.

I thought it might be the CDATA that is interfering, but I gsub-bed it out and still the not quite right.

Not sure I'm up for it, but adding the style to the document might work, or we could emply a technique similar to svg-crowbar which appends styles directly to each element.

library(ggplot2)
library(svglite)
library(rsvg)
library(fabricjsR)
library(htmltools)

# try to make a ggplot
#  get svg with svglite
#  convert svg to png
#  draw on fabric.js canvas
s <- svgstring(standalone=FALSE)
ggplot(data.frame(y=sin(1:10)), aes(x=1:10,y=y)) + geom_smooth()
s()
dev.off()

browsable(
  attachDependencies(
    tagList(
      tags$canvas(id="c", height="500", width="500"),
      tags$script(sprintf(
"
var canvas = new fabric.Canvas('c');
fabric.loadSVGFromURL(
  %s,
  function(objects,options){
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj).renderAll();
  }
)
"       ,
        shQuote(
          paste0(
            "data:image/svg+xml,",
            shiny:::URLencode(
              gsub(x=s(),pattern="(.*)(<!\\[CDATA\\[)(.*)(\\]\\]>)(.*)","\\1\\3\\5")
            )
          )
        )
      ))
    ),
    htmlwidgets:::widget_dependencies("fabric","fabricjsR")[[2]]
  )
)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.1/fabric.min.js"></script>
</head>
<body style="background-color:white;">
<canvas id="c" height="500" width="500"></canvas>
<script>
var canvas = new fabric.Canvas('c');
fabric.loadSVGFromURL(
"data:image/svg+xml,%3Csvg%20viewBox='0%200%20720.00%20576.00'%3E% A%3Cdefs%3E% A%20%20%3Cstyle%20type='text/css'%3E%3C!%5BCDATA%5B% A%20%20%20%20line,%20polyline,%20path,%20rect,%20circle%20%7B% A%20%20%20%20%20%20fill:%20none;% A%20%20%20%20%20%20stroke:%20%23000000;% A%20%20%20%20%20%20stroke-linecap:%20round;% A%20%20%20%20%20%20stroke-linejoin:%20round;% A%20%20%20%20%20%20stroke-miterlimit:%2010.00;% A%20%20%20%20%7D% A%20%20%5D%5D%3E%3C/style%3E% A%3C/defs%3E% A%3Crect%20width='100%25'%20height='100%25'%20style='stroke:%20none;%20fill:%20%23FFFFFF;'/%3E% A%3Crect%20x='0.00'%20y='0.00'%20width='720.00'%20height='576.00'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20fill:%20%23FFFFFF;'%20/%3E% A%3Cdefs%3E% A%20%20%3CclipPath%20id='cp1'%3E% A%20%20%20%20%3Crect%20x='37.92'%20y='5.48'%20width='676.60'%20height='534.64'%20/%3E% A%20%20%3C/clipPath%3E% A%3C/defs%3E% A%3Crect%20x='37.92'%20y='5.48'%20width='676.60'%20height='534.64'%20style='stroke-width:%201.07;%20stroke:%20none;%20fill:%20%23EBEBEB;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='37.92,376.63%20714.52,376.63%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='37.92,212.42%20714.52,212.42%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='37.92,48.21%20714.52,48.21%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='85.76,540.12%2085.76,5.48%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='256.62,540.12%20256.62,5.48%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='427.48,540.12%20427.48,5.48%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='598.34,540.12%20598.34,5.48%20'%20style='stroke-width:%200.53;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='37.92,458.73%20714.52,458.73%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='37.92,294.53%20714.52,294.53%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='37.92,130.32%20714.52,130.32%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='171.19,540.12%20171.19,5.48%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='342.05,540.12%20342.05,5.48%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='512.91,540.12%20512.91,5.48%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='683.77,540.12%20683.77,5.48%20'%20style='stroke-width:%201.07;%20stroke:%20%23FFFFFF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='68.67,29.78%2076.46,46.43%2084.24,62.27%2092.03,77.23%2099.82,91.27%20107.60,104.36%20115.39,116.50%20123.17,127.75%20130.96,138.19%20138.75,147.95%20146.53,157.59%20154.32,167.34%20162.10,177.15%20169.89,186.98%20177.68,196.74%20185.46,206.35%20193.25,215.70%20201.03,224.69%20208.82,233.60%20216.61,245.11%20224.39,258.79%20232.18,273.52%20239.96,288.31%20247.75,302.36%20255.54,315.13%20263.32,326.25%20271.11,335.45%20278.89,343.22%20286.68,351.47%20294.47,359.42%20302.25,366.12%20310.04,370.86%20317.82,373.32%20325.61,373.60%20333.40,372.11%20341.18,369.41%20348.97,365.16%20356.75,358.31%20364.54,348.83%20372.33,336.79%20380.11,322.52%20387.90,306.78%20395.68,290.74%20403.47,275.84%20411.26,263.55%20419.04,251.06%20426.83,236.16%20434.61,219.13%20442.40,200.36%20450.19,180.55%20457.97,160.85%20465.76,142.77%20473.54,128.08%20481.33,118.31%20489.12,111.07%20496.90,105.11%20504.69,100.12%20512.47,95.88%20520.26,92.36%20528.05,89.75%20535.83,88.49%20543.62,89.09%20551.40,91.84%20559.19,95.89%20566.98,101.11%20574.76,107.54%20582.55,115.16%20590.33,123.98%20598.12,133.99%20605.91,145.14%20613.69,157.37%20621.48,170.49%20629.26,184.18%20637.05,198.28%20644.84,212.70%20652.62,227.36%20660.41,242.25%20668.19,257.36%20675.98,272.73%20683.77,288.40%20683.77,479.95%20675.98,448.05%20668.19,418.44%20660.41,391.15%20652.62,366.22%20644.84,343.64%20637.05,323.39%20629.26,305.41%20621.48,289.57%20613.69,275.75%20605.91,263.82%20598.12,253.62%20590.33,245.00%20582.55,237.81%20574.76,231.94%20566.98,227.30%20559.19,223.79%20551.40,221.33%20543.62,219.90%20535.83,219.88%20528.05,221.50%20520.26,224.92%20512.47,230.20%20504.69,237.18%20496.90,245.45%20489.12,254.43%20481.33,263.44%20473.54,272.74%20465.76,284.88%20457.97,299.82%20450.19,317.23%20442.40,336.58%20434.61,356.91%20426.83,376.86%20419.04,394.76%20411.26,408.80%20403.47,420.06%20395.68,432.16%20387.90,445.13%20380.11,458.92%20372.33,473.19%20364.54,487.18%20356.75,499.72%20348.97,509.39%20341.18,514.66%20333.40,515.81%20325.61,514.30%20317.82,511.10%20310.04,507.08%20302.25,502.81%20294.47,498.40%20286.68,493.59%20278.89,487.88%20271.11,480.58%20263.32,469.61%20255.54,455.47%20247.75,439.42%20239.96,422.63%20232.18,406.09%20224.39,390.53%20216.61,376.50%20208.82,364.42%20201.03,354.18%20193.25,343.61%20185.46,332.54%20177.68,321.15%20169.89,309.63%20162.10,298.17%20154.32,286.98%20146.53,276.28%20138.75,266.33%20130.96,257.27%20123.17,248.98%20115.39,241.62%20107.60,235.30%2099.82,230.12%2092.03,226.13%2084.24,223.33%2076.46,221.72%2068.67,221.27%20'%20style='stroke-width:%202.13;%20stroke:%20none;%20fill:%20%23999999;%20fill-opacity:%200.40;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cpolyline%20points='68.67,125.53%2076.46,134.07%2084.24,142.80%2092.03,151.68%2099.82,160.70%20107.60,169.83%20115.39,179.06%20123.17,188.37%20130.96,197.73%20138.75,207.14%20146.53,216.94%20154.32,227.16%20162.10,237.66%20169.89,248.31%20177.68,258.95%20185.46,269.45%20193.25,279.66%20201.03,289.44%20208.82,299.01%20216.61,310.81%20224.39,324.66%20232.18,339.80%20239.96,355.47%20247.75,370.89%20255.54,385.30%20263.32,397.93%20271.11,408.01%20278.89,415.55%20286.68,422.53%20294.47,428.91%20302.25,434.47%20310.04,438.97%20317.82,442.21%20325.61,443.95%20333.40,443.96%20341.18,442.04%20348.97,437.28%20356.75,429.02%20364.54,418.00%20372.33,404.99%20380.11,390.72%20387.90,375.96%20395.68,361.45%20403.47,347.95%20411.26,336.17%20419.04,322.91%20426.83,306.51%20434.61,288.02%20442.40,268.47%20450.19,248.89%20457.97,230.33%20465.76,213.83%20473.54,200.41%20481.33,190.87%20489.12,182.75%20496.90,175.28%20504.69,168.65%20512.47,163.04%20520.26,158.64%20528.05,155.63%20535.83,154.18%20543.62,154.49%20551.40,156.59%20559.19,159.84%20566.98,164.21%20574.76,169.74%20582.55,176.48%20590.33,184.49%20598.12,193.80%20605.91,204.48%20613.69,216.56%20621.48,230.03%20629.26,244.79%20637.05,260.84%20644.84,278.17%20652.62,296.79%20660.41,316.70%20668.19,337.90%20675.98,360.39%20683.77,384.17%20'%20style='stroke-width:%202.13;%20stroke:%20%233366FF;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp1)'%20/%3E% A%3Cdefs%3E% A%20%20%3CclipPath%20id='cp2'%3E% A%20%20%20%20%3Crect%20x='0.00'%20y='0.00'%20width='720.00'%20height='576.00'%20/%3E% A%20%20%3C/clipPath%3E% A%3C/defs%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='22.55'%20y='462.93'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E-1%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='26.46'%20y='298.73'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E0%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='26.46'%20y='134.52'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E1%3C/text%3E%3C/g%3E% A%3Cpolyline%20points='35.18,458.73%2037.92,458.73%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cpolyline%20points='35.18,294.53%2037.92,294.53%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cpolyline%20points='35.18,130.32%2037.92,130.32%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cpolyline%20points='171.19,542.86%20171.19,540.12%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cpolyline%20points='342.05,542.86%20342.05,540.12%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cpolyline%20points='512.91,542.86%20512.91,540.12%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cpolyline%20points='683.77,542.86%20683.77,540.12%20'%20style='stroke-width:%201.07;%20stroke:%20%23333333;%20stroke-linecap:%20butt;'%20clip-path='url(%23cp2)'%20/%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='163.03'%20y='553.45'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E2.5%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='333.89'%20y='553.45'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E5.0%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='504.75'%20y='553.45'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E7.5%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='672.35'%20y='553.45'%20style='font-size:%208.80pt;%20fill:%20%234D4D4D;%20font-family:%20Arial;'%3E10.0%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20x='361.95'%20y='568.33'%20style='font-size:%2011.00pt;%20font-family:%20Arial;'%3E1:10%3C/text%3E%3C/g%3E% A%3Cg%20clip-path='url(%23cp2)'%3E%3Ctext%20transform='translate(18.17,276.46)%20rotate(-90)'%20style='font-size:%2011.00pt;%20font-family:%20Arial;'%3Ey%3C/text%3E%3C/g%3E% A%3C/svg%3E",
function(objects,options){
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment