制作SVG动画图标

Recently one of my 1st year students proposed a UI design for her photography tutorial site, and asked for my advice as to how to pull it off. In my opinion, SVG was the best answer; while the student ultimately went another way, I thought that what I came up might still be a useful lesson.

最近，我的一名一年级学生为她的摄影教程网站提出了一个UI设计，并就如何实现它提出了建议。 我认为， SVG是最好的答案。 当学生最终走了另一条路时，我认为我提出的内容可能仍然是一个有用的课程。

Bitmap images and icon fonts are traditionally used for UI elements on web pages, but SVG has a number of advantages:

传统上， 位图图像和图标字体用于网页上的UI元素，但是SVG具有许多优点：

• Mouse and shape interaction are matched exactly in SVG, making the format perfect for creating accurate non-rectangular UI elements such as hexagons, geographical areas and (in this case) triangles.

  鼠标和形状的交互在SVG中完全匹配，从而使该格式非常适合创建精确的非矩形UI元素，例如六边形 ， 地理区域和(在这种情况下)三角形。

• As a vector format, SVG is infinitely scalable, and is oft