（目前发现一些文章被盗用的情况，我们将在每篇文章前面添加原文地址，本文源地址：http://www.cnblogs.com/idealer3d/p/tomAndJerryRaphaelVectorGraphics.html)
经过前面3个博文的介绍，这里我们尝试来做一些简单的图片，并添加一些效果。效果图：
由于本人美术天赋实在是惨绝人寰，这里就直接从百度搜了个素描图然后通过inkscape的图像轮廓工具把素描图的轮廓给转换成为了path。做法是导入图片--点击选中图片--Shift+Alt+B，点击确定、更新就可以了。然后我们导出svg文件，找到里面的path标签部分（svg文件格式就是xml格式，很好找到标签），复制出来就可以进行下面的操作了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Raphael Test</title>
</head>
<body>
<div );
});
</script>
</body>
</html>
后面我们有个动画效果，实际上是个伪动画啦，因为里面的图像并不动，只是渐变上色、变大和转一圈。我接下来会尝试去看看能不能定位其中的path命令来做一些真正意义上的动画效果。（半小时后）我修改了一下代码，就不再贴了，直接把上面那个代码给覆盖了。现在动画效果还可以哟，大家复制代码试一试！效果图奉上：