Color in SVG

Picking colors on a website might not seem like an important or exciting task. Showing a list of colors, or a grid, or any other layout you can think of, doesn’t quite have the cool factor. Besides that, it’s usually secondary to the application, so probably shouldn’t take much time away from the app.

Presenting: Color in SVG

SVG has been becoming more popular in recent years, and with all the major browsers supporting SVG, there is more reason to it now than ever before. A neat little library called Snap.svg helped me complete this new color picker.

It’s open source, built on Snap.svg and jQuery, and super easy to use.

Just add the dependencies and your inputs that will receive the color code: {% highlight javascript %} {% endhighlight %}

Then add this piece of code that will initialize the picker: {% highlight javascript %} ColorSVG.init(‘.color-picker’); {% endhighlight %}

It’s really that simple. You can play with the Demo Picker for the full effect.

And to forget to check out, and contribute to, the source code on GitHub.