标签 SVG 下的文章

可能很多同学注意到了，我们的公众号文章前一段时间悄悄的变化了一些版式，最明显的就说各级标题从原来的渐变色条状变成了如今的样式：居中，无底色，以图标做分隔。喏，就是这样的：

这是一个示例的一级标题哈

这里可能有细心的同学会发现，这个图标是会动的，而且是一个“俄罗斯方块”游戏。是的，其实这个图标的原型来自于我之前给 Linux 中国设计的新徽标——当时还举办过徽标征集大赛，只是后来大家都觉得老的徽标更适应，所以没有更换。

不过我个人是挺喜欢这个样式的，所以这里就将它引入进来做标题图标了。

最初是将一个静态的 PNG 图片放到这里的，大家可以注意到开始有几天的公众号文章里面是用的静态的图标；然后几天后，我突然有了一些童心，觉得既然是模仿“俄罗斯方块”游戏的风格，为什么不能动起来呢？

说实在的，老王我是真没有动画基础，哦不，连美工基础都没有。虽然我能用一些软件拼凑出一些简单的洋葱头动画，但是要做到比较复杂和较多的帧数，那么动画 GIF 文件就会比较大。

正好我还会一点点 AI，于是用 AI 重新绘制了这个图标，并导出了 SVG 文件——我知道，这是纯文本的。然后我就可以用我心爱的文本编辑器（你猜是什么编辑器）打开直接修改代码了。

用编辑器打开后，啊哦，这里的数字都很不精确啊——不，很精确啊，都保留了小数点后好多位呢。有点强迫症的我给它们归并到一个比较舒服的整数和倍数上。

然后，怎么动起来呢？没学过，只能现去网上学习 SVG 动画的指令，一边看着别人做的极炫的动画流口水，一边反复地试错。

终于，能自己动了。但是又发现，这动画真是一帧一个状态啊，怎么计算呢？这个时候感觉自己的脑力不够了，于是就找张纸开始画分镜头图，反反复复地画了好几张。这是最终定稿的一张，就这也经过了大量涂改。

然后，最终的 SVG 代码大概是这样的：

虽然我还想加入一些更有趣的变化，比如旋转方向什么的，但是会搞得太复杂了。总之，这是老王第一次做 SVG 动画，肯定有很多浅陋之处，贻笑大方了。

最后，说一句，分镜头真的很痛苦，要一个个数据计算，一个数据错了，后面全错了。

顺便，这个 SVG 文件可以在这里下载： https://linux.cn/static/image/common/linux-logo-2019-t.svg

开源 SVG：墙上的魔法字。

新巴比伦的摄政王伯沙撒没有注意到他在盛宴期间神奇地书写在墙上的文字。但是，如果他在公元前 539 年有一台笔记本电脑和良好的互联网连接，他可能会通过在浏览器上阅读 SVG 来避开那些讨厌的波斯人。

出现在网页上的动画文本和对象是建立用户兴趣和参与度的好方法。有几种方法可以实现这一点，例如视频嵌入、动画 GIF 或幻灯片 —— 但你也可以使用可缩放矢量图形（SVG）。

SVG 图像与 JPG 不同，因为它可以缩放而不会丢失其分辨率。矢量图像是由点而不是像素创建的，所以无论它放大到多大，它都不会失去分辨率或像素化。充分利用可缩放的静态图像的一个例子是网站的徽标。

动起来，动起来

你可以使用多种绘图程序创建 SVG 图像，包括开源的 Inkscape 和 Adobe Illustrator。让你的图像“能动起来”需要更多的努力。幸运的是，有一些开源解决方案甚至可以引起伯沙撒的注意。

MacSVG 是一款可以让你的图像动起来的工具。你可以在 GitHub 上找到源代码。

根据其官网说，MacSVG 由阿肯色州康威的 Douglas Ward 开发，是一个“用于设计 HTML5 SVG 艺术和动画的开源 Mac OS 应用程序”。

我想使用 MacSVG 来创建一个动画签名。我承认我发现这个过程有点令人困惑，并且在我第一次尝试创建一个实际的动画 SVG 图像时失败了。

重要的是首先要了解要展示的书法内容实际写的是什么。

动画文字背后的属性是 stroke-dasharray。将该术语分成三个单词有助于解释正在发生的事情：“stroke” 是指用笔（无论是物理的笔还是数字化笔）制作的线条或笔画。“dash” 意味着将笔划分解为一系列折线。“array” 意味着将整个东西生成为数组。这是一个简单的概述，但它可以帮助我理解应该发生什么以及为什么。

使用 MacSVG，你可以导入图形（.PNG）并使用钢笔工具描绘书写路径。我使用了草书来表示我的名字。然后，只需应用该属性来让书法动画起来、增加和减少笔划的粗细、改变其颜色等等。完成后，动画的书法将导出为 .SVG 文件，并可以在网络上使用。除书写外，MacSVG 还可用于许多不同类型的 SVG 动画。

在 WordPress 中书写

我准备在我的 WordPress 网站上传和分享我的 SVG 示例，但我发现 WordPress 不允许进行 SVG 媒体导入。幸运的是，我找到了一个方便的插件：Benbodhi 的 SVG 支持插件允许快速、轻松地导入我的 SVG，就像我将 JPG 导入媒体库一样。我能够在世界各地向巴比伦人展示我写在墙上的魔法字。

我在 Brackets 中开源了 SVG 的源代码，结果如下：

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="360px" style="zoom: 1;" cursor="default" id="svg_document" width="480px" baseProfile="full" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 360"><title id="svg_document_title">Path animation with stroke-dasharray</title><desc id="desc1">This example demonstrates the use of a path element, an animate element, and the stroke-dasharray attribute to simulate drawing.</desc><defs id="svg_document_defs"></defs><g id="main_group"></g><path stroke="#004d40" id="path2" stroke-width="9px" d="M86,75 C86,75 75,72 72,61 C69,50 66,37 71,34 C76,31 86,21 92,35 C98,49 95,73 94,82 C93,91 87,105 83,110 C79,115 70,124 71,113 C72,102 67,105 75,97 C83,89 111,74 111,74 C111,74 119,64 119,63 C119,62 110,57 109,58 C108,59 102,65 102,66 C102,67 101,75 107,79 C113,83 118,85 122,81 C126,77 133,78 136,64 C139,50 147,45 146,33 C145,21 136,15 132,24 C128,33 123,40 123,49 C123,58 135,87 135,96 C135,105 139,117 133,120 C127,123 116,127 120,116 C124,105 144,82 144,81 C144,80 158,66 159,58 C160,50 159,48 161,43 C163,38 172,23 166,22 C160,21 155,12 153,23 C151,34 161,68 160,78 C159,88 164,108 163,113 C162,118 165,126 157,128 C149,130 152,109 152,109 C152,109 185,64 185,64 " fill="none" transform=""><animate values="0,1739;1739,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1" repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="2"></animate></path></svg>

你会使用 MacSVG 做什么？

via: https://opensource.com/article/18/10/macsvg-open-source-tool-animation

作者：Jeff Macharyas 选题：lujun9972 译者：wxy 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

一般人喜欢使用历史命令功能来查看/再次调用之前在终端中输入的命令。不幸的是，那样做只会显示先前输入的命令，而不是之前输出的内容。

在 Linux 中，有许多可以用来记录终端活动的实用工具。这种工具将会帮助我们记录用户在终端中的活动，并帮助我们识别输出中有用的信息。

在这之前，我们已经介绍了一些这类实用工具了。今天，让我们接着讨论这类工具。

如果你希望尝试其它一些记录你终端活动的工具，我推荐你试试 script 命令和 Terminalizer 工具。script 是在无头服务器中记录终端活动的最佳方式之一。script 是一个记录在终端中输入过的 Unix 命令的实用工具（在某些终端中，它会记录显示在你终端中的所有东西）。它会在当前工作目录下以文本文件方式储存所有终端输出。

不过，如果你在寻找 GIF 录制器 ，你可以尝试 Gifine、Kgif 和 Peek。

什么是 Termtosvg

Termtosvg 是一个用 Python 编写的 Unix 终端录制器，它可以将你的命令行会话保存为 SVG 动画。

Termtosvg 的特点

  • 可以制作嵌入于项目主页的简洁美观的动画。
  • 可以在 SVG 模板中自定义配色、终端 UI 和动画。
  • 兼容 asciinema 录制格式。
  • 要求 Python 版本为 3.5 或更高。

如何在 Linux 中安装 Termtosvg

它是用 Python 编写的，所以我推荐使用 pip 来安装它。

请确保你已经安装了 python-pip 包。如果你还没安装，请输入下面的命令。 对于 Debian 或 Ubuntu 用户，请使用 apt 或 apt-get 来安装 pip。

sudo apt install python-pip

对于 Archlinux 用户，请使用 pacman 来安装 pip。

sudo pacman -S python-pip

对于 Fedora 用户，请使用 dnf 来安装 pip。

sudo dnf install python-pip

对于 CentOS 或 RHEL 用户，请使用 yum 来安装 pip。

sudo yum install python-pip

对于 openSUSE 用户，请使用 zypper 来安装 pip。

sudo zypper install python-pip

最后，请执行 pip 来安装 Termtosvg。

sudo pip3 install termtosvg pyte python-xlib svgwrite

如何使用 Termtosvg

成功安装 Termtosvg 后，请使用以下命令来开始录制。

$ termtosvg
Recording started, enter "exit" command or Control-D to end

如果只是想测试它是否正常工作，随意输入几行命令即可。

$ uname -a
Linux daygeek-Y700 4.19.8-2-MANJARO #1 SMP PREEMPT Sat Dec 8 14:45:36 UTC 2018 x86_64 GNU/Linux
$ hostname
daygeek-Y700
$ cat /etc/*-release
Manjaro Linux
DISTRIB_ID=ManjaroLinux
DISTRIB_RELEASE=18.0
DISTRIB_CODENAME=Illyria
DISTRIB_DESCRIPTION="Manjaro Linux"
Manjaro Linux
NAME="Manjaro Linux"
ID=manjaro
ID_LIKE=arch
PRETTY_NAME="Manjaro Linux"
ANSI_COLOR="1;32"
HOME_URL="https://www.manjaro.org/"
SUPPORT_URL="https://www.manjaro.org/"
BUG_REPORT_URL="https://bugs.manjaro.org/"
$ free -g
free: Multiple unit options doesn't make sense.
$ free -m
free: Multiple unit options doesn't make sense.
$ pip3 --version
pip 18.1 from /usr/lib/python3.7/site-packages/pip (python 3.7)

完成后，你可以按下 CTRL+D 或输入 exit 来停止录制。录制完后，输出文件会以一个独一无二的名字被保存在 /tmp 文件夹中。

$ exit
exit
Recording ended, SVG animation is /tmp/termtosvg_5waorper.svg

我们可以在任意浏览器中打开 SVG 文件。

firefox /tmp/termtosvg_5waorper.svg

最终效果

via: https://www.2daygeek.com/termtosvg-record-your-terminal-sessions-as-svg-animations-in-linux/

作者：Magesh Maruthamuthu 选题：lujun9972 译者：zhs852 校对：校对者ID

本文由 LCTT 原创编译，Linux中国 荣誉推出

Banner 图

录制终端会话可以满足我们不同类型的需求。通过录制终端会话，你可以完整记录你在终端中执行的操作，将其保存以供后续参考。通过录制终端会话，你还可以向青少年、学生或其它打算学习 Linux 的人展示各种 Linux 命令及其用例。值得庆幸的是，市面上已经有不少工具，可以帮助我们在类 Unix 操作系统下录制终端会话。我们已经介绍过一些可以帮助你录制终端会话的工具，可以在下面的链接中找到。

今天，我们要介绍另一款录制终端操作的工具，名字叫做 Termtosvg。从名字可以看出，Termtosvg 将你的终端会话录制成一个单独的 SVG 动画。它是一款简单的命令行工具，使用 Python 语言编写，可以生成轻量级、外观整洁的动画，可以嵌入到网页项目中。Termtosvg 支持自定义 色彩主题 color themes 、终端 UI，还可以通过 SVG 模板完成动画控制。它兼容 asciinema 录制格式，支持 GNU/Linux，Mac OS 和 BSD 等操作系统。

安装 Termtosvg

PIP 是一个面向 Python 语言编写的软件包的管理器，可以用于安装 Termtosvg。如果你没有安装 PIP，可以参考下面的指导：

安装 PIP 后，运行如下命令安装 Termtosvg 工具：

$ pip3 install --user termtosvg

此外，还要安装渲染终端屏幕所需的依赖包：

$ pip3 install pyte python-xlib svgwrite

安装完毕，我们接下来生成 SVG 格式的终端会话。

将 Linux 终端会话录制成 SVG 动画

使用 termtosvg 录制终端会话十分容易。打开终端窗口，运行如下命令即可开始录制：

$ termtosvg

注意： 如果 termtosvg 命令不可用，重启操作系统一次即可。

运行 termtosvg 命令后，可以看到如下命令输出：

Recording started, enter "exit" command or Control-D to end

你目前位于一个子 Shell 中，在这里可以像平常那样输入命令。你在终端中的所作所为都会被录制。

不妨随便输入一些命令：

$ mkdir mydirectory
$ cd mydirectory/
$ touch file.txt
$ cd ..
$ uname -a

操作完成后，使用组合键 CTRL+D 或者输入 exit 停止录制。录制结果将会保存在 /tmp 目录，（由于做了唯一性处理）文件名并不会重复。

现在，你可以在命令行运行命令，使用你的浏览器打开 SVG 文件：

$ firefox /tmp/termtosvg_ddkehjpu.svg

你也可以在（图形界面的）浏览器中直接打开这个 SVG 文件（ File -> ）。

我用 Firefox 浏览器打开的效果如下：

下面举例说明几种使用 Termtosvg 录制终端会话的方式。

我刚刚提到，Termtosvg 录制终端会话后默认保存成 /tmp 目录下的一个 SVG 动画文件。

但你可以指定 SVG 动画文件的文件名，例如 animation.svg；也可以指定一个存放路径，例如 /home/sk/ostechnix/。

$ termtosvg /home/sk/ostechnix/animation.svg

录制终端会话并使用特定模板进行渲染：

$ termtosvg -t ~/templates/my_template.svg

使用指定的 屏幕参数 screen geometry 录制终端会话：

$ termtosvg -g 80x24 animation.svg

使用 asciicast v2 格式录制终端会话：

$ termtosvg record recording.cast

将 asciicast 格式的录制结果渲染成 SVG 动画：

$ termtosvg render recording.cast animation.svg

欲了解更多细节，请参考 Termtosvg 手册。

好了，本次分享就到这里，希望对你有帮助。更多精彩内容，敬请期待！

干杯！

via: https://www.ostechnix.com/how-to-record-terminal-sessions-as-svg-animations-in-linux/

作者：SK 选题：lujun9972 译者：pinewall 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

从图像中生成的 SVG 可以用作占位符。请继续阅读！

我对怎么去让 web 性能更优化和图像加载的更快充满了热情。在这些感兴趣的领域中的其中一项研究就是占位符：当图像还没有被加载的时候应该去展示些什么？

在前些天，我偶然发现了使用 SVG 的一些加载技术，我将在这篇文章中谈论它。

在这篇文章中我们将涉及如下的主题：

  • 不同的占位符类型的概述
  • 基于 SVG 的占位符（边缘、形状和轮廓）
  • 自动化处理

不同的占位符类型的概述

之前 我写过一篇关于图像占位符和 延迟加载 lazy-loading 的文章以及 关于它的讨论。当进行一个图像的延迟加载时，一个很好的办法是提供一个东西作为占位符，因为它可能会很大程度上影响用户的感知体验。之前我提供了几个选择：

在图像被加载之前，有几种办法去填充图像区域：

  • 在图像区域保持空白：在一个响应式设计的环境中，这种方式防止了内容的跳跃。从用户体验的角度来看，那些布局的改变是非常差的作法。但是，它是为了性能的考虑，否则，每次为了获取图像尺寸，浏览器就要被迫进行布局重新计算，以便为它留下空间。
  • 占位符：在图像那里显示一个用户配置的图像。我们可以在背景上显示一个轮廓。它一直显示直到实际的图像被加载完成，它也被用于当请求失败或者当用户根本没有设置头像图像的情况下。这些图像一般都是矢量图，并且由于尺寸非常小，可以作为内联图片。
  • 单一颜色：从图像中获取颜色，并将其作为占位符的背景颜色。这可能是图像的主要颜色、最具活力的颜色 … 这个想法是基于你正在加载的图像，并且它将有助于在没有图像和图像加载完成之间进行平滑过渡。
  • 模糊的图像：也被称为模糊技术。你提供一个极小版本的图像，然后再去过渡到完整的图像。最初显示的图像的像素和尺寸是极小的。为去除 细节 artifacts ，该图像会被放大并模糊化。我在前面写的 Medium 是怎么做的渐进加载图像、使用 WebP 去创建极小的预览图像、和渐进加载图像的更多示例 中讨论过这方面的内容。

此外还有其它的更多的变种，许多聪明的人也开发了其它的创建占位符的技术。

其中一个就是用梯度图代替单一的颜色。梯度图可以创建一个更精确的最终图像的预览，它整体上非常小（提升了有效载荷）。

使用梯度图作为背景。这是来自 Gradify 的截屏，它现在已经不在线了，代码 在 GitHub。

另外一种技术是使用基于 SVG 的技术，它在最近的实验和研究中取得到了一些进展。

基于 SVG 的占位符

我们知道 SVG 是完美的矢量图像。而在大多数情况下我们是希望加载一个位图，所以，问题是怎么去矢量化一个图像。其中一些方法是使用边缘、形状和轮廓。

边缘

在 前面的文章中，我解释了怎么去找出一个图像的边缘并创建一个动画。我最初的目标是去尝试绘制区域，矢量化该图像，但是我并不知道该怎么去做到。我意识到使用边缘也可能是一种创新，我决定去让它们动起来，创建一个 “绘制” 的效果。

使用边缘检测绘制图像和 SVG 动画

在以前，很少使用和支持 SVG。一段时间以后，我们开始用它去作为一个某些图标的传统位图的替代品……

形状

SVG 也可以用于根据图像绘制区域而不是边缘/边界。用这种方法，我们可以矢量化一个位图来创建一个占位符。

在以前，我尝试去用三角形做类似的事情。你可以在 CSSConf 和 Render Conf 上我的演讲中看到它。

上面的 codepen 是一个由 245 个三角形组成的基于 SVG 占位符的概念验证。生成的三角形是基于 Delaunay triangulation 的，使用了 Possan’s polyserver。正如预期的那样，使用更多的三角形，文件尺寸就更大。

Primitive 和 SQIP，一个基于 SVG 的 LQIP 技术

Tobias Baldauf 正在致力于另一个使用 SVG 的低质量图像占位符技术，它被称为 SQIP。在深入研究 SQIP 之前，我先简单介绍一下 Primitive，它是基于 SQIP 的一个库。

Primitive 是非常吸引人的，我强烈建议你去了解一下。它讲解了一个位图怎么变成由重叠形状组成的 SVG。它尺寸比较小，适合于直接内联放置到页面中。当步骤较少时，在初始的 HTML 载荷中作为占位符是非常有意义的。

Primitive 基于三角形、长方形、和圆形等形状生成一个图像。在每一步中它增加一个新形状。很多步之后，图像的结果看起来非常接近原始图像。如果你输出的是 SVG，它意味着输出代码的尺寸将很大。

为了理解 Primitive 是怎么工作的，我通过几个图像来跑一下它。我用 10 个形状和 100 个形状来为这个插画生成 SVG：

使用 Primitive 处理 ，使用 10 个形状 、 100 形状、 原图。
使用 Primitive 处理，使用 10 形状 、 100 形状、 原图 。

当在图像中使用 10 个形状时，我们基本构画出了原始图像。在图像占位符这种使用场景里，我们可以使用这种 SVG 作为潜在的占位符。实际上，使用 10 个形状的 SVG 代码已经很小了，大约是 1030 字节，当通过 SVGO 传输时，它将下降到约 640 字节。

<svg xmlns=”http://www.w3.org/2000/svg" width=”1024" height=”1024"><path fill=”#817c70" d=”M0 0h1024v1024H0z”/><g fill-opacity=”.502"><path fill=”#03020f” d=”M178 994l580 92L402–62"/><path fill=”#f2e2ba” d=”M638 894L614 6l472 440"/><path fill=”#fff8be” d=”M-62 854h300L138–62"/><path fill=”#76c2d9" d=”M410–62L154 530–62 38"/><path fill=”#62b4cf” d=”M1086–2L498–30l484 508"/><path fill=”#010412" d=”M430–2l196 52–76 356"/><path fill=”#eb7d3f” d=”M598 594l488–32–308 520"/><path fill=”#080a18" d=”M198 418l32 304 116–448"/><path fill=”#3f201d” d=”M1086 1062l-344–52 248–148"/><path fill=”#ebd29f” d=”M630 658l-60–372 516 320"/></g></svg>

正如我们预计的那样，使用 100 个形状生成的图像更大，在 SVGO（之前是 8kB）之后，大小约为 5kB。它们在细节上已经很好了，但是仍然是个很小的载荷。使用多少三角形主要取决于图像类型和细腻程度（如，对比度、颜色数量、复杂度）。

还可以创建一个类似于 cpeg-dssim 的脚本，去调整所使用的形状的数量，以满足 结构相似 的阈值（或者最差情况中的最大数量）。

这些生成的 SVG 也可以用作背景图像。因为尺寸约束和矢量化，它们在展示 超大题图 hero image 和大型背景图像时是很好的选择。

SQIP

用 Tobias 自己的话说：

SQIP 尝试在这两个极端之间找到一种平衡：它使用 Primitive 去生成一个 SVG，由几种简单的形状构成，近似于图像中可见的主要特征，使用 SVGO 优化 SVG，并且为它增加高斯模糊滤镜。产生的最终的 SVG 占位符后大小仅为约 800~1000 字节，在屏幕上看起来更为平滑，并提供一个图像内容的视觉提示。

这个结果和使用一个用了模糊技术的极小占位符图像类似。（看看 Medium 和 其它站点 是怎么做的）。区别在于它们使用了一个位图图像，如 JPG 或者 WebP，而这里是使用的占位符是 SVG。

如果我们使用 SQIP 而不是原始图像，我们将得到这样的效果：

第一张图像 和 第二张图像 使用了 SQIP 后的输出图像。

输出的 SVG 约 900 字节，并且通过检查代码，我们可以发现 feGaussianBlur 过滤被应用到该组形状上：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123–16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>

SQIP 也可以输出一个带有 Base64 编码的 SVG 内容的图像标签：

<img width="640" height="640" src="example.jpg” alt="Add descriptive alt text" style="background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw…<stripped base 64>…PjwvZz48L3N2Zz4=);">

轮廓

我们刚才看了使用了边缘和原始形状的 SVG。另外一种矢量化图像的方式是 “描绘” 它们。在几天前 Mikael Ainalem 分享了一个 codepen 代码，展示了怎么去使用两色轮廓作为一个占位符。结果非常漂亮：

SVG 在这种情况下是手工绘制的，但是，这种技术可以用工具快速生成并自动化处理。

如果感兴趣，可以去看一下 Emil 的 webpack 加载器 (基于 potrace) 和 Mikael 的手工绘制 SVG 之间的比较。

这里我假设该输出是使用默认选项的 potrace 生成的。但是可以对它们进行优化。查看 图像描绘加载器的选项，传递给 potrace 的选项非常丰富。

总结

我们看到了从图像中生成 SVG 并使用它们作为占位符的各种不同的工具和技术。与 WebP 是一个用于缩略图的奇妙格式 一样，SVG 也是一个用于占位符的有趣格式。我们可以控制细节的级别（和它们的大小），它是高可压缩的，并且很容易用 CSS 和 JS 进行处理。

额外的资源

这篇文章上到了 Hacker News 热文。对此以及在该页面的评论中分享的其它资源的链接，我表示非常感谢。下面是其中一部分。

via: https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c

作者：José M. Pérez 译者：qhwdw 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出