# @cloudfour/simple-svg-placeholder 中文文档

规范地址：https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/

版本：1\.2\.0
npm 元数据更新时间：2026-08-25T16:54:48.296Z
中文译文更新时间：2026-11-10T03:15:47.257Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cloudfour/simple-svg-placeholder
原文对照：https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/?lang=original
项目主页：https://github.com/cloudfour/simple-svg-placeholder#readme
源码仓库：https://github.com/cloudfour/simple-svg-placeholder

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：16.8 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2020-01-04T00:03:20.396Z
- 最新版本发布：2026-08-25T16:54:48.121Z
- 近 30 天下载量：10411（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 1 个）

## 中文简介

一个非常简单的占位符图像生成器,零依赖性. 返回一个数据 URI(或原始 SVG 源)作为模板使用的字符串 .

## 安装

```sh
npm install @cloudfour/simple-svg-placeholder
```

也可以使用：`pnpm add @cloudfour/simple-svg-placeholder`、`yarn add @cloudfour/simple-svg-placeholder`、`bun add @cloudfour/simple-svg-placeholder`

## README

# 简单的 SVG 占位符

[![NPM version](https://img.shields.io/npm/v/@cloudfour/simple-svg-placeholder.svg)](https://www.npmjs.com/package/@cloudfour/simple-svg-placeholder) [![Build Status](https://github.com/cloudfour/simple-svg-placeholder/workflows/CI/badge.svg)](https://github.com/cloudfour/simple-svg-placeholder/actions?query=workflow%3ACI) [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

> 一个非常简单的占位符图像生成器,零依赖性. 返回一个数据 URI(或原始 SVG 源)作为模板使用的字符串 .

## 开始

软件包可以通过 npm 安装:

```
npm i --save @cloudfour/simple-svg-placeholder
```

安装后,您可以导入此功能作为 ES 或 CommonJS 模块 :

```javascript
// Module
import simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';

// CommonJS
const simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');
```

然后调用函数生成占位符 SVGs :

```javascript
const placeholder = simpleSvgPlaceholder(/* options */);
// => 'data:image/svg+xml;...'
```

## 实例

### 默认

![](https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/examples/default.svg?sanitize=true)

```javascript
simpleSvgPlaceholder();
```

### 尺寸

![](https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/examples/size.svg?sanitize=true)

```javascript
simpleSvgPlaceholder({
  width: 180,
  height: 135,
});
```

### 文本

![](https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/examples/text.svg?sanitize=true)

```javascript
simpleSvgPlaceholder({
  text: 'Hello world!',
});
```

### 颜色

![](https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/examples/color.svg?sanitize=true)

```javascript
simpleSvgPlaceholder({
  bgColor: '#0F1C3F',
  textColor: '#7FDBFF',
});
```

### 字体

![](https://npmcn.com/package/%40cloudfour/simple-svg-placeholder/examples/font.svg?sanitize=true)

```javascript
simpleSvgPlaceholder({
  fontFamily: 'Georgia, serif',
  fontWeight: 'normal',
});
```

## 选项参考

### 宽度 `{Number}`

默认为 `300`,大多数浏览器中SVG元素的默认宽度.

### 高度 `{Number}`

默认为 `150`,大多数浏览器中SVG元素的默认高度.

### 文本 `{String}`

要显示的文本 。 默认图像维度 .

此处作为文字而非标记处理: XML (英语)`&`, (中文(简体) ), `<`, (中文(简体) ), `>`, (中文(简体) ), `"`为你而逃,所以 `'Tom & Jerry'` 作为 写入而非生成 SVG 浏览器拒绝解析 .

### 字体家庭 `{String}`

用于文本的字体。 对于数据 URI,这需要是一个系统安装的字体. 默认为 `'sans-serif'`。 。 。 .

### 字体重量 `{String}`

默认为 `'bold'`。 。 。 .

### 字体大小 `{Number}`

默认为最短图像尺寸的20%,四舍五入.

### 阳 `{Number}`

对 [页:1 `dy` 属性](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy) 文本元素,使其以垂直为中心。 默认为35% `fontSize`。 。 。 .

### bg 颜色 `{String}`

图像的背景颜色 。 默认为 `#ddd`。 。 。 .

### 文本颜色 `{String}`

文字之色相. 为透明起见,使用 `rgba` 或者说 `hsla` 颜色值. 默认为 `rgba(0,0,0,0.5)`。 。 。 .

### 数据Uri `{Boolean}`

若为 `true`,该函数将返回编码字符串,用作 `img` 元素的 `src` 数值。 若为 `false`,该函数将返回未编码的 SVG 源,适合插入文档。 默认为 `true`。 。 。 .

### 字符集 `{String}`

默认为 `UTF-8`,但如果源 HTML 文档的字符集不同,您可能想要更新以匹配.

## 常见问题

### @cloudfour/simple-svg-placeholder 是什么？

一个非常简单的占位符图像生成器,零依赖性\. 返回一个数据 URI\(或原始 SVG 源\)作为模板使用的字符串 \.

### 如何安装 @cloudfour/simple-svg-placeholder？

在项目目录运行 npm install @cloudfour/simple-svg-placeholder，或使用 pnpm add / yarn add / bun add。

### @cloudfour/simple-svg-placeholder 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cloudfour\_\_simple-svg-placeholder 是否存在。

### @cloudfour/simple-svg-placeholder 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cloudfour/simple-svg-placeholder 可以商用吗？

@cloudfour/simple-svg-placeholder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cloudfour/simple-svg-placeholder 的下载量有多少？

根据 npm 官方下载统计，@cloudfour/simple-svg-placeholder 在 2026/10/10 – 2026/11/08 这 30 天内被下载 10,411 次，日均约 347 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cloudfour/simple-svg-placeholder 还在维护吗？

最新版本 1\.2\.0 发布于 2026/08/26（2 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 1 个；首次发布于 2020/01/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。