next
previous
items

Charting in SVG vs static images (bitmap)

Page Last modified 02 Mar 2024
5 min read
The table lists the main features of data visualisations made in SVG compared to classic static images (bitmap).

 

Feature

Image
(bitmap)

SVG
(Daviz/Plotly)

Explanations and further info

Can be viewed in any device

 *

  

* Although the static one can be shown in any device, resolution may not be optimal for high-res devices.

Ease of creation

 

 

Both formats are equally easy to create.  A large number of tools exists both for creating bitmaps  (aka raster images)  and for creating SVG.

Allows quick re-purpose and reformatting

 *

 **

* Although you can transform most image formats to others, some cannot and you are restricted to the quality of the original image.

** SVG images gives best conversion quality to any other image format.

Allows templates for mass-harmonisation of layout (e.g. corporate style)

 

 

SVG image can be templated and scripted so to enforcing a corporate style or an easy update of such, even retroactively applied.

Resolution independent. Auto-adjust to any resolution (SVG)

 

 

SVG images are always crisp on screen and print out at the resolution of your printer, whether it's 300 dpi, 600 dpi, or higher. You will never experience ugly "jaggy" bitmaps.

Allows quick customisation of layout simply via CSS

 

 

* SVG allows for adding specific css rules to dynamically and globally change style or easily add exceptions for certain images.

Integration and export with professional desktop software via SVG (e.g. Illustrator, Photoshop)

 *

 

* even though you can open a bitmap image in Photoshop, you are very limited on what you can edit and enhance. E.g. bitmap resolution may be too low or not enough colour depth.  SVG on the other hand has no such limitations.

Optimized file size, quick download

 

 

In SVG, only vector coordinates must be stored, but not the individual pixels. SVG files are much smaller and compressible than bitmaps, and quick to download..

Zoom-able at any level

Users can magnify or pan their view of any portion of an image with no limits without sacrificing sharpness, detail, or clarity.

 *

 

*  bitmap is limited to the original resolution.

SVG, on the other hand can be zoomed in with no limits.

Searchable and selectable text

 

 

In SVG, the mathematical descriptions used to create graphics are separate from the text. Text in SVG images can be easily editable and searchable. For example, you can search for specific text strings, like city names in a map.

Search engines friendly, allows SEO (search engine optimisation)


 

 

Another benefit of the feature "searchable and selectable text"  is hat the text in the SVG is also available for search engines like Google -> better findability.

Full colour control.

 

 

SVG offers a palette of 16 million colors, support for ICC (International color Consortium) color profiles, sRGB, gradients, and masking.

Interactivity

 

 

SVG offers unparalleled dynamic interactivity. SVG images can respond to user actions with highlighting, tool tips, special effects, audio, and animation.

Built in intelligence and automation. Figure can can be dynamically fed with data from any external source in various formats.

 

 

SVG can easily be created by  programming languages both server-side (python, java, c# etc) and client-side (javascript) and data extracted from any database (GIS db, RDMS,  noSQL).

For example DaViz can get data from Excel files, external RESTful webservices (Eurostat, Worldbank etc), discomap/arcgis, sparql queries (linked data), SDMX (statistical data standard), JSON and more.

Open format, royalty-free, multi-vendor

 *

 

*some bitmap format are open format but not all. Some are closed and can only be opened in specific software. On the other hand SVG is  open XML format, it is a multiple-purpose format and can be opened in many professional software.

Data in machine readable format

 

 

Data behind the visualisation is openly available not only for human consumption  but also for machine-to-machine consumption as encouraged in the new PSI Directive.

Web-friendly

*

 

Some bitmap formats cannot  be used in web (e.g. TIFF, BMP)  and must be converted to GIF/JPEG/PNG.
SVG is fully web-friendly , developed by the
World Wide Web Consortium, supported in all browsers.

Suitable for GIS (map applications)

*

**

* Bitmap maps are fixed (like for charts) and cannot be  easily re-purposed  and configured on the fly (e.g. changing resolution, colors etc).  Costly round-trip to  gis-desktop-tool and re-addon web/print is always necessary.

**SVG is an open, HTTP compatible standard that allows fully interactive mapping applications - without the need for applets or a round trip to the server every time the map presentation is tweaked.

SVG is a perfect complement to the OpenGIS consortium's GML format. GML, also XML-based, describes geographical elements such as rivers and roads. It can be converted into SVG using an XML pipeline for online display. Read more

See SVG map examples made by Kartograph.
DaViz, at the moment, integrates google  
geochart or map . DaViz may be extended with more mapping tools like ArcGis and Kartograph when needed.

Allows public scrutiny, verifiability and reproducibility

 

 *

* In DaViz data and methodology is openly available both for human consumption and for  machine-to-machine consumption. This gives everybody access to re-use the data behind the chart  and verify its validity. All this is a presupposition for  reproducibility and verifiability  of data and consequently building trust with viewers of the data visualisation.  Read more in "Why you should never trust data visualisations"  and why we should  care about it. See also "further reading section".

Compliant with EEA data policy, SEIS principles, open data and PSI Directive and its new revision


 

 

due to the same  benefits listed under  "Open and transparent format". DaViz charts expose the data and methodology openly, therefore allowing anybody to not only access the visualisation but most importantly verify and re-use the data  behind for any other purpose. This approach to data visualisation fulfill open data definition and goes beyond PSI directive 2013 revision. ( OKFN review of the new PSI Directive)

Preserve and share knowledge

 

 

In static image the knowledge for building the image, remains  mostly in the  original author 's mind. With DaViz the methodology has to be transferred on the server and made  openly available on the web. The knowledge is now available to many more people. If a  person leaves the working place a  new employee can read the methodology and re-create the chart.

 

The only advantage bitmap have compared to vector graphic like SVG (used in DaViz and Plotly) is when you need to represent photo-alike content, e.g. realistic images of nature and people. Here the pixel-based technique of bitmap works best. The application domain of DaViz and Plotly is not photography of course rather data visualisation and in this respect SVG is the best format for it in all aspects.

Further reading on data visualisations' ethics, verifiable data visualisations and trust:

  • Drew Skau: A Code of Ethics for Data Visualization Professionals
  • Robert Kosara: Visualisation is growing
  • Andy Kirk: Should you trust data visualisations


Permalinks

Geographic coverage

Temporal coverage

Tags

Document Actions