前言

在讲 react-native-svg 之前，我们先来了解下 SVG 是什么以及它出现的历史背景。

SVG 是 Scalable Vector Graphics 的缩写，译为 “可缩放矢量图形”，是一种基于 XML 的、用于描述二维矢量图形的图形格式。SVG 主要支持以下几种显示对象：

  • 矢量显示对象，包括矩形、圆、椭圆、多边形、直线、任意曲线等；
  • 嵌入式外部图像，包括 JPEG、PNG、SVG 等；
  • 文字。

目前 SVG 在 Firefox、Webkit、IE 等浏览器中已经部分实现，其标准制定开发历史如下：

  • 1999 年，由一组加入 W3C 的公司启动开发；
  • 2001 年，发布 SVG 1.0 版本；
  • 2003 年，发布 SVG 1.1 版本（第1版）；
  • 2003 年，推出 SVG Tiny 和 SVG Basic 这两个移动子版本；
  • 2008 年，发布 SVG Tiny 1.2 版本并成为 W3C 推荐标准；
  • 2011 年，发布 SVG 1.1 版本（第2版）并成为 W3C 目前推荐的标准；
  • W3C 目前仍在研究制定 SVG 2.0 版本。

SVG Tiny 主要是为性能低的小设备生成图元，而 SVG 只是舍弃了完整版 SVG 里的难以实现的大型渲染功能（比如动画）。

等等，怎么上面讲的都是浏览器，”浏览器中的 SVG” 和 “React Native 中的 SVG” 是有啥不可描述关系么？
image.png
哈，实际上 SVG 是因 Web 而生的一种标准，既然是一种标准那它就可以脱离浏览器的限制，从而在其它平台中实现，而 react-native-svg 就是 SVG 标准在 React Native 平台的一种实现。如果你打开了 react-native-svg 的 GitHub 仓库，可以看到下面的代码结构：
image.png image.png image.png
也就是说，react-native-svg 库通过 Android 原生代码、iOS 原生代码、RN 层的 JS 代码实现了 SVG 标准，所以我们可以在 React Native 的中通过 SVG 的语法来绘制矢量图形、图像和文字。

入门

我们先来看一个简单的示例，看看下面代码：