Info

JOUR 72312

Bitmap formats (JPEG, PNG, BMP, GIF) are images that are displayed with pixels, or tiny colored dots. Vector graphics, on the other hand, are rendered by the computer based on mathematical formulas and code. For example, a circle would be defined by a radius of a certain size, the color of the outline, the color of the filled inside, its location, and so on. Because vector graphics are defined mathematically, they don’t have a fixed resolution. You can zoom in or out of a vector image, and the display remains sharp. If you zoom into a bitmap file, you’ll see the pixels that make up the image.

An example of charts rendered as vector graphics, from the Guardian.

An example of charts rendered as bitmap images, from NPR Planet Money.

 

Microsoft Excel can output charts as JPEG, GIF, BMP, or PNG (bitmap formats), or as PDF (vector). You can convert the PDF file into an SVG (Scaleable Vector Graphics), which is a common format for displaying vector graphics in a browser. Your images will be sharper and easier to edit in a vector graphics editing program like Adobe Illustrator.

 

  1. In Microsoft Excel, size your chart (width and height) in the FORMAT tab.
    Screen Shot 2014-03-25 at 10.21.59 AM
  2. Select the text in the horizontal and vertical axes, and choose Format Selection to change the Font to Arial. The default Excel font is a bit unusual and sometimes throws off the conversion of text in later steps.
    Screen Shot 2014-03-25 at 10.23.27 AM
  3. Right-click (Ctrl-click) on the chart frame and choose Save As Picture.
    Screen Shot 2014-03-25 at 10.22.30 AM
  4. Save your chart picture as a PDF.
    Screen Shot 2014-03-25 at 10.22.41 AM
  5. Open the PDF in Adobe Illustrator. If you’re comfortable with Illustrator, you can edit your chart.
    Screen Shot 2014-03-25 at 10.46.38 AM
  6. Choose File > Save As, and save as a SVG (compressed optional).
  7. If you don’t have access to Illustrator, you can use the free online tool CloudConvert (https://cloudconvert.org/svg-to-pdf), which can convert your PDF to SVG. The only downside is that you can’t edit your graphics. 
  8. The resulting SVG file is simply an HTML text file that describes the shapes for your chart. You can open it up in a browser, or copy and paste it into another HTML document to display your chart.
    Screen Shot 2014-03-25 at 10.52.10 AM

Unfortunately, you can’t just paste the SVG code directly into a WordPress post, as WP (out of the box) doesn’t support SVG formats. There are plug-ins that allow SVG uploads and other hacks, but a simple solution is to upload your SVG to DigitalStorage and iframe it into your WP post, like this: