What type of Icons is faster ? Font Icons, Inline SVGs or Background SVGs ?
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 6 commits ahead, 5 commits behind mhartington:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
ionicons @ a40523f
lib
.gitignore
.gitmodules
README.md
package.json

README.md

svg-perf-test

Tests that try to answer the question -

What type of Icon performs the best ?

Font Icons, SVGs inlined in a Web Page, or SVGs as Background Images in CSS

Read more about the experiment on the blog post.

Running the tests

Requires Node 0.11 or greater and npm and Chrome 41+

  1. Download ChromeDriver and start it using ./chromedriver
  2. Clone this repository and ensure that you checkout the this branch
  3. Install all npm dependencies using npm install
  4. Install sub modules using git submodule init and git submodule update
  5. Start the test using node lib/index.js

Tests are run on Chrome on an Android device by default. Ensure that you have an android device connected, and have run adb server start. Change the browser-perf options to chrome to run on desktop Chrome.

What happens in the test

  1. First, three web pages are created for each of the 700+ icons in the ioniocs/src/ folder, one each for inline SVG, background SVG and Font Icon
  2. A local Node Server is started
  3. Each webpage is loaded on the browser (Android on Chrome by default)
  4. Pages are scrolled, and tracing/timeline data is collected
  5. Browser-perf calculates metrics like frame rates, paints, etc and stores results in data.json.

Helper Scripts

The repo also contains a createMetadata.js to create a _meta.json file that has a list of all icons, and metrics that need to show up when the data.json is converted to a csv file. dataToCSV.js converts data.json to _results.csv to view and analyze the results.