Fun with svg and sass

For the new theme of attiks we wanted to reduce the number of images on the site, so it would load fast. To accomplish this we started using as much svg's as possible.
We needed an easy way to use the raw svg's as inline content inside our sass files.

All svg's are stored inside an svg directory and added to the git repository.
We use grunt-grunticon to create a sass file containings mixin's so we only add the inlined svg if it is actually used.


@mixin icon-arrow {
  background-image: url('data:image/svg+xml;charset=US-ASCII,.....');
  background-repeat: no-repeat;
}

@mixin icon-attiks {
  background-image: url('data:image/svg+xml;charset=US-ASCII,.....');
  background-repeat: no-repeat;
}

We add another sass file that uses those mixins to convert them to extends, so if a particular icon is used, it is only added once to the generated css.


%icon-arrow {
  @include icon-arrow;
}

%icon-attiks {
  @include icon-arrow;
}

Inside our other sass files we can then easily use those extend where ever we want.


.arrows {
  .prev {
    @extend %icon-arrow;

    background-size: contain;
  }
}

The Gruntfile.js should contain something like this


module.exports = function (grunt) {
  'use strict';
  grunt.initConfig({
    watch: {
      options: {
        livereload: true
      },
      svg: {
        files: ['svg/{,**/}*.svg'],
        tasks: ['grunticon'],
      },
    },

    grunticon: {
      icons: {
        files: [{
          expand: true,
          cwd: 'svg',
          src: ['*.svg', '*.png'],
          dest: 'sass/svg'
        }],
        options: {
          datasvgcss: '_svg.scss',
          cssprefix: '@mixin icon-'
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-grunticon');

};

Comments

Nice blog here! Also your website loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly as yours lol aeakkeeaabde

@Johna360, thanks. Regarding the hosting, we rent bare metal machines and are running https://www.drupal.org/project/barracuda.

But to speed up your site you can have a look at this issue for Drupal 7 https://www.drupal.org/node/1279226 this is what we are using.

Greetings from California! I'm bored to death at work so I decided to browse your blog on my iphone during lunch break. I love the information you present here and can't wait to take a look when I get home. I'm shocked at how fast your blog loaded on my cell phone .. I'm not even using WIFI, just 3G .. Anyhow, good blog!

Excellent blog you have here but I was curious if you knew of any forums that cover the same topics talked about here? I'd really love to be a part of community where I can get feedback from other knowledgeable individuals that share the same interest. If you have any suggestions, please let me know. Appreciate it!

There's an interesting article posted on perfplanet:

http://calendar.perfplanet.com/2014/tips-for-optimising-svg-delivery-for-the-web/