透明 JPG（使用 SVG）

假设您有一张照片图像，它确实应该是一个 JPG 或 WebP，以获得最佳的文件大小和质量。但是，如果我也需要透明度怎么办？难道我不需要 PNG 吗？这是否会导致文件大小过大（PNG-24）或质量奇怪（PNG-8）？让我们看看另一种方法，最终可以实现两全其美。

目标是从图像中剪掉我自己，去除背景。我通常使用 Photoshop 和 手动剪切裁剪路径（使用钢笔工具）。

现在我可以选择裁剪路径的反向，轻松去除背景。

尝试从 Photoshop 中将此图像保存为 1200px 宽的 PNG-24 图像，结果得到大约 1MB 的图像！

我们可以使用 PNG-8 将其减少 75%，但随后我们会 1）获得那种奇怪的 GIF 风格外观（不太像照片）和 2）必须为边缘选择一个哑光颜色，因为我们在这里没有获得漂亮的 alpha 透明度，只有二元透明度。

天哪，如果我们能只使用 JPG 会怎么样？质量和文件大小都好得多。

不过没有透明度。

但是等等！我们不能只是剪掉这个东西吗？我们现在有了 clip-path。嗯……是的。我们确实有 clip-path。不过它 不能使用 path()，而我们在 Photoshop 中为矢量点创建的是路径数据。不过，如果我们把所有线条都变成直线，它可以使用 polygon()。这可能不太理想（我很有曲线美！）。或者我们可以在一些内联 SVG 中创建一个 <clipPath> 元素，并使用 clip-path: url(#id_of_clipPath);，它确实支持内部的 <path>。

还有 蒙版，这也是另一种可能性。

不过，让我们看看第三种可能性：将所有内容放入 <svg> 中。这对我来说很有逻辑意义，因此所有这些都保持在一起并一起缩放。

诀窍是制作两样东西

1. JPG
2. 裁剪 <path>

JPG 非常简单。直接从 Photoshop 输出。 优化。

现在我们可以设置 SVG 了。SVG 很乐意使用光栅图形。SVG 以矢量图形而闻名，但它是一种非常灵活的图像格式。

<svg>
  <image xlink:href="/images/chris.jpg" x="0" y="0">
<svg>

要获得路径，我们将使用钢笔工具创建的路径导出到 Illustrator。

现在我们在那里有了路径，并且可以轻松地将其导出为 SVG

现在我们有了所需的路径数据

让我们在已开始的 SVG 中的 <clipPath> 内使用该 <path>。然后将该剪辑路径也应用于 <image>

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d=" ... " />
    </clipPath>
  </defs>
  <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>

瞧！

本质上是一个透明的 JPG。