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>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"
});
};The scripting is very simple.
- Grab the
#feed-buttonelement with jQuery, clear the text out of the way, and style it appropriately for the graphic; - Create a Raphaël canvas;
- Create a Raphaël set within that;
- Draw the graphical components of the icon inside the set; and
- 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>
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.