使用Raphael.js转换SVG路径

Question

I am new to SVG and Raphael.js, so while the code I have written works as I expected/wanted, I want to check if what I have done is best practice/the right way, or if there is a better way.

I have a path, it's basically an off-circle (as per the brand). I got the path by converting a PNG to SVG (online). The problem I had was while the image was meant to be 72x72px, the on-line converter had scaled it to something pretty big.

This has actually worked in my favour as I need to use the circle in various sizes.

So I used .transform() to scale it down and transform it to the size I need it to be. It feels like a bit of a hack. Is there a better way? Or is this the best you can do?

Here is my code: http://jsfiddle.net/9LHUE/ .

Thanks in advance.

Answer 1

Using .transform() is just fine. The whole idea of "Scalable Vector Graphics" is that they are, well, scalable. Since they are rendered on the page from coordinate-based definitions, they should look just as good at any size.

What feels like a hack to me is importing this nicely geometric figure from a png, rather than working out the definitions in a more mathematical way. I doubt you really need so monstrous a bezier curve for so simple a shape.

That said, I don't know what an "off-circle" is. Maybe it's not simple at all.