Comparing SVG Plugins

My last post on SVG was basically an extremely light introduction to the subject. It was basically a way of working out what the best way of embedding SVG in a WordPress post was. Iframes as it turns out. Anyway, in the post, I want to stick with some very simple SVG, but demonstrating the difference between raw SVG, and dynamically created SVG using three different plugins.

Here are our orange circles again.

Each of them has been created using a different method and, if you right-click any of them, you should be able to view the iframe source code to see how they were created. I compare the code below, leaving out all the irrelevant HTML.

Basic SVG
The circle on the left was created by simply including SVG elements in the HTML. No need for any external plugins.

<body style="padding: 0; margin: 0;">
  <svg height="120px" width="120px">
    <circle cx="60" cy="60" r="50" fill="orange" stroke="black" stroke-width="5"></circle>
  </svg>
</body>

jQuery SVG
For jQuery SVG, you need to include the jQuery SVG plugin. For some functionality, you need a custom version of jQuery as well. Check out the jQuery website for more information.

<body style="padding: 0; margin: 0;">
  <div id="svg_div"></div>
</body>
<script>
  $('#svg_div').svg();
  var svg = $('#svg_div').svg('get');
  svg.circle(60,60,50, {fill:"orange", stroke:"black", "stroke-width":5});
  svg.text(60,65,"jQuery SVG", {"text-anchor":"middle", "font-family": "arial", "font-size": "16px"});
</script>

On line 5 I’ve attached an svg element to the empty div I prepared, and line 6 sets up a variable to refer to this canvas. The rest should be reasonably self explanatory. Each new element is created with some mandatory data (co-ordinates and radius and stuff), and all the variably attributes are included after the mandatory stuff. The script produces the html structure below.

<svg version="1.1" width="1243">
  <circle cx="60" cy="60" r="50" fill="orange" stroke="black" stroke-width="5"></circle>
</svg>

If you compare the SVG element to the basic one further up, you’ll see that jQuery has basically created the same structure as the basic version.

D3
The D3 equivalent is shown below. Check out the D3 website for the plugin you need.

<body style="margin: 0; padding 0;">
  <div id="svg_div"></div>
</body>
<script>
  var svg = d3.select("#svg_div").append("svg");
  svg.attr("width", 120)
     .attr("height", 120);
  var circle = svg.append("circle")
     .attr("cx", 60)
     .attr("cy", 60)
     .attr("r", 50)
     .attr("fill", "orange")
     .attr("stroke", "black")
     .attr("stroke-width", 5);
var text = svg.append("text")
     .text("D3")
     .attr("x", 60)
     .attr("y", 65)
     .style("text-anchor", "middle");	
</script>

OK, so there’s a lot more code there. All those attributes could be strung together on one line, but nevertheless, it’s a bit more verbose than jQuery SVG. That’s mainly because it doesn’t provide any shortcuts for creating elements. Still, I think it’s pretty simple to understand what’s going on, and D3 will come into its own when we want to start manipulating data within our webpage. I’m not going to show the HTML it creates, as it’s fundamentally the same as the jQuery SVG structure.

Raphael
Finally, Raphael. Raphael is really strong when it comes it animation, but I’m not sure it’s as capable of manipulating the SVG DOM as the other two plugins are. That said, I’ve not got a lot of experience with it yet so we’ll see how it goes. Get the script at the Raphael website.

<body>
  <div id="svg_div"></div>
</body>
<script>
  var paper = new Raphael("svg_div",120,120);
  var circle = paper.circle(60,60,50)
     .attr("fill", "orange")
     .attr("stroke", "black")
     .attr("stroke-width", 5);
  var text = paper.text(60,60,"Raphael")
     .attr("text-anchor", "middle");
</script>

Raphael falls somewhere between jQuery SVG and D3 in terms of the amount of code required to describe an element. It’s still fairly simple though. One interesting thing to note is the “text-anchor” attribute I’ve used in all these examples. By setting it to “middle” the middle point of the text is anchored to the co-ordinates provided. However, Raphael behaves differently to the other two plugins. Raphael anchors both horizontally and vertically, whereas the other two only anchor horizontally. This is why the text co-ordinates are (60,65) in jQuery SVG and D3, but (60,60) in Raphael (which is the centre of the circle).

That sounds great, but let’s look at the HTML Raphael has created for us.

<svg height="130" version="1.1" width="130" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: absolute; left: 0px; top: 0px;">
  <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
  <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
  <circle cx="60" cy="60" r="50" fill="#ffa500" stroke="#000000" stroke-width="5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
  <text x="60" y="60" text-anchor="middle" font="arial" stroke="none" fill="#000000" font-family="arial" font-size="16px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: arial;">
    <tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Raphael</tspan>
  </text>
</svg>

Yeesh. To be honest, I’m not a fan of plugins generating a lot of code that I didn’t ask for. It’s converted “orange” to hex. It’s created a tspan element so it can offset the text to make the text-anchor work vertically. It puts in all sort of default settings that I would rather weren’t there. It’s hard enough getting CSS right without having a plugin throw in extra information all over the place.

So, while Raphael does seem to have some great features, I’m already less fond of it than the other two options! Time will tell.

Posted in D3, jQuery SVG, Raphael, SVG
2 comments on “Comparing SVG Plugins
  1. Markus says:

    It’s hard to find your articles in google. I found it on 22 spot,
    you should build quality backlinks , it will help you to rank
    to google top 10. I know how to help you, just type in google
    - k2 seo tips

  2. Who do you want to gift for baseball jerseys for cheap?
    Get value into the page: cheap Garrett Celek jerseys

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>