Feed button in Raphaël

By Lachlan Hardy
1600h Tuesday, 12 January 2010 Permalink

I decided this site should have an in-page feed subscription link rather than rely solely on browser autodiscovery. I'm also experimenting with the idea that decorative images, such as those that would be normally served as background images via CSS, may not require an image at all. In some cases it will be simpler, faster, and saves an HTTP request, to draw them using Raphaël. So here's how I made my new feed subscription icon.

HTML

<a href="/feeds/articles/" id="feed-button">
  <span>Subscribe</span>
</a>
Download file: anchor.html

Pretty straightforward. The anchor contains a span so I can pull the text away without collapsing the area I want the icon to take up. There is an id on the anchor so it can be readily converted to a Raphaël canvas.

CSS

The styling isn't particularly relevant. In this case, I just positioned the element so the link will still work nicely if if the graphic isn't drawn.

JavaScript

var addFeedButton = function() {
  
  // Declaring variables
  var $feedLink = $("#feed-button"), // The original anchor as a jQuery object
      paper = Raphael("feed-button", "60", "60"), // Creating the Raphaël canvas
      icon = paper.set(); // Creating a Raphaël set to hold common attributes for the icon

  $feedLink.children("span").hide(); // Clearing away the anchor text
  $feedLink.css({ // Modifying some styles to match what I want to do with the graphic
    background: "transparent",
    margin: 0,
    width: "51px"
  });
  icon.push( // Adding the components of the icon to the Raphaël set
    paper.circle(8, 50, 8), // The dot of the icon
    paper.path("M38.777, 58.5 H27.412 c0-15.139-12.273-27.412-27.412-27.412 l0, 0 V19.723 C21.416, 19.723, 38.777, 37.083, 38.777, 58.5z"), // The inner band
    paper.path("M46.8, 58.5 c0-25.847-20.953-46.8-46.8-46.8 V0 c32.308, 0, 58.5, 26.191, 58.5, 58.5 H46.8z") // The outer band
  ).attr({ // Setting the attributes of the set (and thus each component) to make it all white
    fill : "#fff",
    stroke : "#fff"
  });
};
Download file: add-feed-button.js

The scripting is very simple.

  1. Grab the #feed-button element with jQuery, clear the text out of the way, and style it appropriately for the graphic;
  2. Create a Raphaël canvas;
  3. Create a Raphaël set within that;
  4. Draw the graphical components of the icon inside the set; and
  5. Set the attributes of the set to render it white.

SVG

Step 4 was the only tricky part. I spent a bunch of time learning SVG path syntax to draw my own before it clicked: Raphaël's use of the standard SVG path syntax means that any existing SVG representation of the standard feed icon will work perfectly!

I remembered that Wikipedia store a lot of images in SVG and a quick search located the Feed-icon.svg file. Opened up in Illustrator, and some experimentation provided me with the paths I'm using now.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="feed-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="#FFFFFF" cx="8" cy="50" r="8"/>
<path fill="#FFFFFF" d="M38.777, 58.5 H27.412 c0-15.139-12.273-27.412-27.412-27.412 l0, 0 V19.723 C21.416, 19.723, 38.777, 37.083, 38.777, 58.5z"/>
<path fill="#FFFFFF" d="M46.8, 58.5 c0-25.847-20.953-46.8-46.8-46.8 V0 c32.308, 0, 58.5, 26.191, 58.5, 58.5 H46.8z"/>
</svg>
Download file: feed-icon.svg

Summary

I used a Raphaël set for the first time and learned a lot about SVG paths. Looks like I'll have to go re-write my other uses of Raphaël now to bring them up to scratch.

The result is a neat simple feed icon that doesn't cost an extra HTTP request and loads much faster.