Using SVG color filters

This is a follow on from my previous post about showing a sprite image using the SVG.js library. We will now add a colour filter to the image using the svg.filter.js plugin.

The color matrix is a 5 column, 4 row matrix. Each row represents an RGBA value, and each column is a multiplier for that particular colour value. Every column represents an RGBA multiplier, which intensifies (or reduces) the resulting colour value based on the original input value. The last column is just a straight value that just gets added on.

So for the following matrix:

1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0

The output image will have the exact same colour value as the input image. This is because the the RGBA multipliers simple times the input RGBA value by 1.

Here are some resources:

• Finessing 'feColorMatrix'
• Color Filters can turn your gray skies blue
• A handy tool to play around with SVG color matrices

The following code shows off the concept.

var col = {
    x: 2,
    y: 0,
}
var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32)
var image = draw.image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

image.move(-1*(32+5)*col.x-5,-1*(32+5)*col.y-5);

image.filter(function(add) {
  add.colorMatrix('matrix', [ 1.0, 0,   0,   0,   0
                            , 0,   0.2, 0,   0,   0
                            , 0,   0,   0.2, 0,   0
                            , 0,   0,   0,   1.0, 0 ])
})
clip.add(rect)

image.clipWith(clip)

Using SVG.js to clip an image sprite

Let's say you have an image with few sprites in it (such as Star Trek: Starships by Corey Marion):

Let's also say you are using a SVG javascript library such as svgjs to build dynamic images and animations. You want to overlay an icon sprite on top of your existing image. To do this you use the following code:

var col = {

    x: 0,

    y: 0,

}

var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32)
var image = draw

    .image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

    .move(-1*(32+5)*col.x-5,-1*(32+5)*col.y-5)
clip.add(rect)

image.clipWith(clip)

An explanation of the code:

• The col object stores the row and column coordinates for the icon we want. We have 9 columns and 6 rows to work with.
• The draw object takes our HTML div object and uses it to make our SVG
• The clip object is where the magic happens
• The rect object is a standard rectangle, which is going to be used as our 'frame' to cut out our desired sprite using clip. It is 32x32 pixels because that is the size of our icons.
• The image object is our compiled sprites, but note that we 'move' it relative to the rectangle  using an algorithm. This 'move' allows us to align our desired sprite so that is with the rectangle.
• The next two lines allows us to 'clip' the image with the rectangle, cutting away everything else except for our desired sprite.

The next example expands upon the above, but now allows us to place our rect (and our sprite) at a desired point on the drawing.

var col = {
    x: 8,
    y: 1,
}
var pos = {
    x: 32,
    y: 32
}
var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32).move(pos.x, pos.y)
var image = draw

    .image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

    .move(-1*(32+5)*col.x-5+pos.x,-1*(32+5)*col.y-5+pos.y)
clip.add(rect)


image.clipWith(clip)

Inkscape and glue: Creating CSS sprites

I use a combination of Inkscape (to create raw SVG files and then export them to PNG images) and glue (to stich them all up and create the CSS file) to help me create CSS sprite icons for various websites. I also used iconmonstr as a starting point for some icons.

This is the BASH script I use to convert raw SVG files into PNG files and then into the sprite and CSS combination:

#!/bin/bash
mkdir -p ./img/48x48/ ./img/32x32/ ./img/16x16/
for i in ./svg/*.svg; do
    inkscape -z -w 48 -h 48 -e ./img/48x48/`basename $i .svg`.png $i
    inkscape -z -w 32 -h 32 -e ./img/32x32/`basename $i .svg`.png $i
    inkscape -z -w 16 -h 16 -e ./img/16x16/`basename $i .svg`.png $i
done
glue ./img/ --img=./img/ --css=./css/ --html --project