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

Jquery Slideshow

This was a little feature I wrote up for a website that wanted a slide-show. The code allows you to adjust some parameters and should be production ready, although it can definitely be optimised better. Feel free to post edits or comments!

What you need:

• The JQuery framework for JavaScript
• Some knowledge of HTML, CSS and Javascript
• A web-server such as Apache or nginx (or use a hosting service)

Summary:

We create an JavaScript object using JQuery and set up some parameters such as fade-in time and intervals between switching the images. The object will then find all items tagged as 'rotating-item' and loop through each image (according to our parameter set).

The JavaScript/JQuery Code

This should be all the code you will need for the moment; save this as 'slideshow.js' in a place your server can access. The code comments should be adequate, but just in case here are some notes:

• The function $(window).load() means that the following JavaScript code will execute once the HTML/CSS page has finished loading the elements
• In JQuery, $('..') is a query that searches the HTML/CSS DOM (Document Object Model) for elements that matches the query. So $('.rotating-item') searches the HTML document for any element that is of the class 'rotating-item;

/**
  * @author AlmightyOlive
  */
$(window).load(function() { //start after HTML, images have loaded
     var InfiniteRotator =
     {
         init: function()
         {
             //initial fade-in time (in milliseconds)
             var initialFadeIn = 1000;

             //interval between items (in milliseconds) 
             var itemInterval = 5000;

             //cross-fade time (in milliseconds)
              var fadeTime = 2500;
             //count number of items
             var numberOfItems = $('.rotating-item').length;

             //set current item
             var currentItem = 0;

             //show first item
             $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

             //loop through the items
             var infiniteLoop = setInterval(function(){
                 $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

                 if(currentItem == numberOfItems -1){
                     currentItem = 0;
                 }else{
                     currentItem++;
                 }

                 $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
             }, itemInterval);
         }
     };
     InfiniteRotator.init();
});

The CSS

This code defines the look and feel of the elements. Take care when changing these defaults as doing so may result in the slideshow not being displayed at all. I suggest you copy the code as is (although change the width and height parameters to the size of your largest image), test it out and then make your changes. Also, make sure you keep the display: none; property of the rotating-item element!

#rotating-item-wrapper
{
 position: relative;
 width: 768px;
 height: 512px;
}

.rotating-item 
{
 display: none;
 position: absolute;
 top: 0px;
 left: 0px; 
}
 

The HTML

The final part of the code is the HTML structure. Make sure you include the JQuery API and your JavaScript code (insert the following line inside the ... element of your document)!

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='./slideshow.js'></script>

Now you just place the following code wherever you want the slideshow to appear. Just to clarify; the wrapper element sets up the position and size of the frame that the images will be displayed in, so all the images MUST be placed within the wrapper if you want it displayed properly.

<div id="rotating-item-wrapper">
<img src"./img1.jpg" alt="" class="rotating-item" />
<img src"./img2.jpg" alt="" class="rotating-item" />
</div>

Hope you find this code useful. Enjoy!