{"id":208855,"date":"2015-10-05T06:34:44","date_gmt":"2015-10-05T13:34:44","guid":{"rendered":"http:\/\/css-tricks.com\/?p=208855"},"modified":"2022-07-12T06:55:13","modified_gmt":"2022-07-12T13:55:13","slug":"how-to-make-charts-with-svg","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-make-charts-with-svg\/","title":{"rendered":"How to Make Charts with SVG"},"content":{"rendered":"\n

In my first post about making charts<\/a>, I looked at methods that solely relied on CSS. I argued that this wasn\u2019t the best option in most cases; there are just too many tricky design and development hurdles to overcome. Generally speaking, it\u2019s best to make charts with a combination of SVG, JavaScript, and CSS.<\/p>\n\n\n\n\n\n\n

Why not canvas<\/code>?<\/h3>\n\n\n

There are plenty of other ways in which you could make a chart for the web, most notably by using the canvas<\/code> element. However, Sara Soueidan suggests<\/a> avoiding this method, too:<\/p>\n\n\n\n

HTML5 Canvas can also be used to create such visualisations, but the content of the canvas are not part of the DOM and are thus not accessible by screen readers. You would need to create a secondary content between the opening and closing <\/canvas><\/code> tags to serve as fallback and as accessible content. You need to also take extra measures to map the content and interactivity between the contents of the canvas and the fallback, so that screen readers know which element is being interacted with. So an HTML5 Canvas would require double the amount of maintenance. [\u2026] With SVG, you get semantics and accessibility as well as interactivity with JavaScript out of the box.<\/p><\/blockquote>\n\n\n\n

Yet there are alternatives to this standalone canvas<\/code> approach. For instance, Filament Group<\/a> made a jQuery plugin called Visualize<\/a>, which grabs the data from a table<\/code> element and then creates a canvas<\/code> chart. This practice makes a lot of sense, even if the element alone is not best suited to the task of graph-making.<\/p>\n\n\n

Why SVG?<\/h3>\n\n\n

The SVG image format isn’t just for icons<\/a> or simple images. It has advantages that apply to making charts, too. In our compendium of SVG<\/a> we described the format’s general advantages like this:<\/p>\n\n\n\n

  • Small file sizes that compress well<\/li>
  • Scales to any size without losing clarity (except very tiny sizes)<\/li>
  • Looks great on retina displays<\/li>
  • Design control like interactivity and filters<\/li><\/ul>\n\n\n\n

    We can update this with two more key points that are useful for charts:<\/p>\n\n\n\n

    • SVGs are accessible to screen readers (with a little bit of work)<\/li>
    • There are plenty of SVG-based chart frameworks out there to help<\/li><\/ul>\n\n\n\n

      Let\u2019s get started. What\u2019s the simplest approach to making a chart with SVG?<\/p>\n\n\n

      Charts with <\/code><\/h3>\n\n\n

      Making a chart with SVG can be as easy as designing one in Illustrator, or your vector-based design app of choice, export it as SVG, and popping it straight into the markup using an <\/code> tag:<\/p>\n\n\n\n

      <img src=\"chart.svg\" alt=\"Hopefully you can impart equally useful alternate content here.\"><\/code><\/pre>\n\n\n\n
      This is great because it will look good and scale well. However, we\u2019ll lose most of the benefits of inline SVG, such as accessibility and interactivity. Apart from alt text, our data won\u2019t be read aloud by screen readers and the data points in the charts themselves won\u2019t be able to be interacted with by mouse, touch, or keyboard input.<\/p>\n\n\n\n
      These problems suggest that we should use another SVG embedding technique if we want to gain as much control as possible over them. For example, what happens if we were working on a project like Death from Above<\/a>, where the interactive nature of the graphs greatly helps us understand the data?<\/p>\n\n\n\n
      \"A<\/figure>\n\n\n\n
      To get the most out of SVG we need to take all of that code and place it directly into our markup. That way we can style the graph with CSS, control interactivity with JavaScript, and gain all the accessibility benefits of inline SVG.<\/p>\n\n\n\n
      (We could get similar benefits with\u00a0<object><\/code>\u00a0or\u00a0<iframe><\/code>\u00a0SVG embeds, but the concept is so similar let\u2019s move ahead with inline SVG.)<\/p>\n\n\n
      Bar charts<\/h3>\n\n\n
      Each column of\u00a0our graph<\/a>\u00a0will be contained within a\u00a0<g><\/code>\u00a0element (in SVG-speak this is just a group of related elements), inside each of these we\u2019ll place a\u00a0rect<\/code><\/a>element that defines the shape of the column, and a\u00a0text<\/code><\/a>\u00a0element which allows us to print the number to the screen. Here\u2019s a finished example:<\/p>\n\n\n\n