Chart background graphics: SVG

We are excited to announce SVG background support. This means that chart authors now can use vector or raster graphics for chart backgrounds. The following example shows gender symbols and generation names behind the population pyramid chart:

This chart uses data from this spreadsheet. Import settings are as follows:

After the data is imported, I used the following SVG content as background:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" preserveAspectRatio="none" viewBox="0 0 760 590">
 <g id="female" transform="scale(0.4,0.4) translate(1700,0)" opacity="0.7">
  <path fill="#ff007f" d="m97.633598,79.828003c17.902405,0 32.415413,-14.511002 32.415413,-32.414001c0,-17.900002 -14.513008,-32.414001 -32.415413,-32.414001c-17.899002,0 -32.413002,14.514 -32.413002,32.414001c0,17.903 14.514,32.414001 32.413002,32.414001z" id="path1591"/>
  <path d="m93.042,263.497833l0.012428,108.849213c0,19.583954 -29.227676,19.583954 -29.227676,0l-0.012432,-108.849213l-38.731819,0l41.442776,-144.328766l-6.513958,0l-24.406277,82.445465c-5.809202,17.982651 -30.401011,10.59549 -24.774462,-8.660126l27.098139,-89.570564c2.905071,-10.214363 15.772331,-28.322784 38.045235,-28.322784l20.537308,0l0,0l22.104027,0c22.074013,0 34.999596,18.261055 38.33976,28.322784l27.109604,89.483208c5.421921,19.245041 -18.976715,27.215912 -24.785934,8.456619l-24.397659,-82.154602l-7.053291,0l41.887444,144.328766l-38.901062,0l0,108.993225c0,19.439941 -29.105675,19.342957 -29.105675,0l0,-108.993225l-8.666473,0z" id="path1595" fill="#ff007f"/>
 </g>
 <g id="male" transform="scale(0.4,0.4) translate(-200,0)" opacity="0.7">
   <path d="m254.400421,75.940079c-20.842255,0 -37.604355,17.87822 -37.604355,40.177902l0,95.043503c0,18.478043 25.711075,18.478043 25.711075,0l0,-86.907471l6.086899,0l0,240.808762c0,24.705597 34.238785,23.97879 34.238785,0l0,-140.978989l5.896851,0l0,140.978989c0,23.97879 34.426086,24.705597 34.426086,0l0,-240.808762l5.944336,0l0,86.907471c0,18.621124 25.577667,18.620178 25.531067,0l0,-94.474945c0,-20.562752 -15.182098,-40.703819 -38.065826,-40.703819l-62.164917,-0.042641z" id="path1599" fill="#0000ff"/>
   <path fill="#0000ff" d="m284.134003,80.828003c17.901001,0 32.414001,-14.511002 32.414001,-32.414001c0,-17.900002 -14.513,-32.414001 -32.414001,-32.414001c-17.899994,0 -32.414001,14.514 -32.414001,32.414001c0,17.903 14.514008,32.414001 32.414001,32.414001z" id="path1603"/>
  </g>
  <g fill="#c0c0c0" font-family="Verdana" font-size="42px" text-anchor="middle">
    <text x="380" y="80" >G.I. Generation</text>
    <text x="380" y="180" >Silent Generation</text>
    <text x="380" y="280" >Baby Boomers</text>
    <text x="380" y="350" >Generation X</text>
    <text x="380" y="480" >Millenials</text>
  </g>
</svg>

I simply pasted it into the "Background SVG content" field:

One thing worth mentioning here is the viewBox attribute: viewBox="0 0 760 590". Why 760x590, you may ask?

As you can guess from the screenshot above, I picked the "Grid area only" option for the background, which tells about my intent to draw the background for the grid area only, leaving alone other areas like chart title/subtitle and category radio buttons. Before I started working on the background SVG, I have made a screenshot of the chart and measured the grid area - from the top of the "100+" bars to the bottom axis. It turned out to be (approximately) 760x590, so I used these dimensions for my SVG content.

If I wanted to create a background for the whole chart, I would create SVG content of size 800x800, which is the size of the chart.

One of the best things about this SVG background feature is the ability to tweak the background in the "Background SVG content" field and see the changes right away, like in a graphics editor.

Everybody is welcome to use this new feature, but please keep in mind it requires some basic knowledge of SVG format. Even if just want to use a PNG or JPG image as a background, you have to wrap it in an SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" preserveAspectRatio="none" viewBox="0 0 PUT_IMAGE_WIDTH_HERE PUT_IMAGE_HEIGHT_HERE">
  <image xlink:href="PUT_IMAGE_URL_HERE"/>
</svg> 

Now just imagine what you can do with your chart's background! Photos, other charts, watermark images, animations, icons... Enjoy.