Spreet: 从 SVG 创建精灵图

Spreet 是一个命令行工具，它从一个 SVG 图像目录创建一个精灵图（也称为纹理图集）。当您创建 MapLibre 或 Mapbox 向量网络地图时，您需要它，其中制图样式表要求从精灵图中加载 图标。

与其他从 SVG 创建精灵图的工具相比，Spreet

• 输出更小的精灵图（像素和字节更少）
• 是一个大约 2.2 MB 的自包含二进制文件
• 运行更快

Spreet（也写作 spreit、spret、sprit）是苏格兰语中精灵的意思，即西方民间传说中的类似精灵的生物。

目录

• 安装
• 教程
• 命令行使用
• 将 Spreet 作为 Rust 库使用
• 基准测试

安装

您可以使用 Homebrew、cargo install、下载预构建的二进制文件或从源代码构建来安装 Spreet。

Homebrew

如果您在 MacOS 或 Linux 上使用 Homebrew，则可以从命令行安装 Spreet

brew install flother/taps/spreet

（您可以在安装之前查看公式运行 的代码。）

从 crates.io 安装 (cargo install)

Rust 的 cargo install 命令允许您本地安装二进制 crate。您可以使用以下命令安装 Spreet 的最新发布版本：

cargo install spreet

下载预构建的二进制文件

为MacOS、Linux和Windows提供了预构建的二进制文件。MacOS和Linux的二进制文件针对Intel和ARM CPU进行了构建。请访问发布页面下载Spreet的最新版本。

从源代码构建

您需要一个最新的Rust工具链版本（如果您还没有，可以尝试Rustup）。有了它，您可以检出这个仓库

git clone https://github.com/flother/spreet
cd spreet

然后构建一个发布版本

cargo build --release

完成后，构建的二进制文件将作为./target/release/spreet可用。

教程

当您为矢量地图创建自己的样式时，您会有一系列图标，您希望它们出现在地图上。比如道路符号或医院和学校的图标——这一类的东西。您将有一个SVG目录（例如osm-bright-gl-style中的icons目录），并且您希望将它们转换成一个单张位图（例如来自osm-bright-gl-style的精灵图）。

假设您有一个名为icons的SVG目录，并且您希望创建一个名为my_style.png的精灵图。像这样运行Spreet

spreet icons my_style

Spreet还会创建一个名为my_style.json的索引文件，其中包含精灵图中每个图像的尺寸和位置描述。

如果您想创建一个名为my_style@2x.png的“视网膜”版本的精灵图，请使用--retina选项

spreet --retina icons my_style@2x

您可能有多个相同的图标副本——例如，您可能对图书馆（library.svg）和书店（bookshop.svg）都使用相同的“打开书本”图标。如果您传递--unique选项，Spreet将只在精灵图中包含该图标一次，但在索引文件中引用两次。这有助于减小精灵图的大小。

spreet --retina --unique icons my_style@2x

默认情况下，JSON索引文件是格式化输出的，但您可以使用--minify-index-file选项将其压缩

spreet --retina --unique --minify-index-file icons my_style@2x

当您为生产环境创建精灵图时，使用--unique --minify-index-file以获得最佳效果。

命令行使用

$ spreet --help
Create a spritesheet from a set of SVG images

Usage: spreet [OPTIONS] <INPUT> <OUTPUT>

Arguments:
  <INPUT>   A directory of SVGs to include in the spritesheet
  <OUTPUT>  Name of the file in which to save the spritesheet

Options:
  -r, --ratio <RATIO>      Set the output pixel ratio [default: 1]
      --retina             Set the pixel ratio to 2 (equivalent to `--ratio=2`)
      --unique             Store only unique images in the spritesheet, and map them to multiple names
      --recursive          Include images in sub-directories
  -m, --minify-index-file  Remove whitespace from the JSON index file
      --sdf                Output a spritesheet using a signed distance field for each sprite
  -h, --help               Print help
  -V, --version            Print version

将 Spreet 作为 Rust 库使用

Spreet的主要目的是作为命令行工具，但您也可以将其用作自己Rust代码中的库。要将Spreet添加为依赖项，请将以下内容包含在您的Cargo.toml中

spreet = { version = "0.11.0", default-features = false }

有关如何以编程方式构建精灵图的信息，请参阅Spreet在docs.rs上的文档，并查看精灵图测试。

基准测试

要比较spritezero和Spreet的输出，我们对来自四种不同地图样式的SVG精灵集进行了基准测试：osm-bright-gl-style、openstreetmap-americana、mapbox-gl-styles (basic)和mapbox-gl-whaam-style。输出唯一、视网膜精灵图（--unique --retina），Spreet还使用--minify-index-file（spritezero没有这个选项）。

精灵图大小（总像素）

精灵图文件大小（字节）

索引文件大小（字节）