把svg图片生成到svg_使用SVG图片是否对您网站的性能有利？

最新推荐文章于 2024-08-24 09:00:51 发布

culi3182

最新推荐文章于 2024-08-24 09:00:51 发布

阅读量701

点赞数

文章标签： java python 深度学习大数据计算机视觉

原文链接：https://www.sitepoint.com/svg-good-for-website-performance/

版权

把svg图片生成到svg

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

There are a few good reasons why Scalable Vector Graphics, or SVG, are a great choice of graphics format for the web. Having a relatively small file size is certainly one of them. However, this claim is not without some qualification. Let’s delve a bit deeper.

有很多很好的理由说明为什么可伸缩矢量图形或SVG是Web图形格式的理想选择。拥有相对较小的文件大小当然是其中之一。但是，这种说法并非没有一定条件。让我们更深入地研究。

矢量图像的好处 (Benefits of Vector Images)

Raster images, e.g., .JPEG, .PNG, etc., are made of square pixels laid out in a grid. Therefore, the larger the image, the more pixels it uses, which causes the file size to increase.

栅格图像(例如.JPEG，.PNG等)由布置在网格中的正方形像素组成。因此，图像越大，使用的像素越多，这会导致文件大小增加。

Not only that, but pixels-based graphics don’t scale very well. Here’s what I mean. This is a .JPEG image of a flower at its original width of 300 x 225px:

不仅如此，基于像素的图形也无法很好地缩放。这就是我的意思。这是花朵的.JPEG图像，其原始宽度为300 x 225px：

Example of raster or bitmap image of a flower

Here’s the same image when it is displayed at a much higher resolution:

当以更高的分辨率显示时，这是同一张图片：

Example of scaled-up raster image of a flower

Notice the fuzzy edges, the blurry surface and how the overall quality of the image is considerably degraded.

注意模糊边缘，模糊表面以及图像的整体质量如何显着下降。

With retina screens being now common on users’ devices, the risk of having raster images on your website looking like this is high. One alternative is to serve high resolution graphics, which of course can hit web performance pretty hard.

由于视网膜屏幕现在在用户的设备上很常见，因此在您的网站上显示像这样的光栅图像的风险很高。一种选择是提供高分辨率图形，这当然会严重影响Web性能。

`srcset`和`picture`元素 (The `srcset` and `picture` Elements)

Fortunately, modern HTML comes to the rescue with responsive images, i.e., the srcset and the picture elements, which at the time of writing are both supported in the latest versions of all major browsers, except for EI11 and Opera Mini.

幸运的是，现代HTML借助响应图像 (即srcset和picture元素)得以抢救，在撰写本文时，除EI11和Opera Mini之外，所有主要浏览器的最新版本均支持这两种格式。

The goal of responsive images is to serve the best quality image for the device being used. This involves making available images at various resolutions, but enabling the browser to load just that one image that fits the capabilities of the accessing device.

响应式图像的目标是为所使用的设备提供最佳质量的图像。这涉及以各种分辨率提供可用的图像，但使浏览器只能加载一个适合访问设备功能的图像。

If you’re curious to know more about how these techniques work, How to Build Responsive Images with srcset by Saurabh Kirtani goes deeply into the topic.

如果您想进一步了解这些技术的工作原理，请参阅 Saurabh Kirtani的“ 如何使用srcset构建响应图像 ”。

Here’s what srcset looks like in practice:

这是srcset在实践中的样子：

<img srcset="image_3x.jpg 3x, image_2x.jpg 2x, image_1-5.jpg 1.5x" src="image.jpg" alt="image">

And below is an example of the picture element in action:

以下是实际使用的picture元素的示例：

<picture>
  <source media="orientation:landscape" srcset="retina-horizontal-image.jpg 2x, horizontal-image.jpg">
  <source media="orientation:portrait" srcset="retina-vertical-image.jpg 2x, vertical-image.jpg">
  <img src="image.jpg" alt="image">
</picture>

As you can see, although only one copy of your image will be served according to the accessing device, both techniques require you to prepare and upload to your server multiple copies of that image. It won’t be a problem for your website’s performance, but it can negatively impact on your time and your server’s bandwidth.

如您所见，尽管根据访问设备只能提供图像的一个副本，但这两种技术都要求您准备该图像的多个副本并将其上载到服务器 。这不会对您网站的性能造成影响，但会对您的时间和服务器带宽产生负面影响。

SVG与分辨率无关 (SVGs are Resolution-Independent)

Scaling is in the DNA of vector graphics, and SVG is an XML-based vector image format. SVGs are made of geometrical drawing instructions, e.g., shapes, paths, lines, etc., which are independent from pixel size. From the point of view of file size, it doesn’t really matter at what size the image is rendered, simply because those instructions remain unchanged.

缩放是在矢量图形的DNA中进行的，而SVG是基于XML的矢量图像格式。 SVG由独立于像素大小的几何图形指令(例如，形状，路径，线条等)组成。从文件大小的角度来看，仅以那些指令保持不变的方式来表示图像的大小并不重要。

One more implication of being resolution-independent is that you don’t need to prepare different copies of the same image for different devices; one size fits all and looks razor sharp at any screen resolution.

与分辨率无关的另一个含义是，您无需为不同的设备准备同一张图像的不同副本；一种尺寸适合所有人，并且在任何屏幕分辨率下都看起来非常锋利。

That said, there’s something that can have a negative impact on SVG file size, i.e. how complex the image is. The more complex the drawing instructions the larger the file size.

就是说，有些东西可能会对SVG文件的大小产生负面影响，即图像的复杂程度。绘图指令越复杂，文件大小越大。

关于性能SVG文件的建议 (Suggestions for Performant SVG Files)

Generally speaking, SVGs for web use are quite simple, things like logos, maps, icons, etc. It’s likely such simple SVG images have a small file size compared to their raster counterparts.

一般来说，用于Web的SVG非常简单，例如徽标，地图，图标等。与栅格同类图像相比，此类简单SVG图像的文件大小可能较小。

However, there are steps you can take to optimize the file size even more and ensure your visitors get an awesome experience on your website.

但是，您可以采取一些步骤来进一步优化文件大小，并确保访问者在您的网站上获得出色的体验。

Here are a few tips for you.

这里有一些提示给您。

从一开始就在设计中烘烤性能 (Bake Performance in the Design from the Start)

You can code simple SVG graphics yourself or use a JavaScript library like Snap.svg to draw your vector graphics. Often, to get the job done you’ll simply fire off a vector graphics editor like Adobe Illustrator.

您可以自己编写简单的SVG图形，也可以使用Snap.svg之类JavaScript库绘制矢量图形。通常，要完成这项工作，您只需触发一个矢量图形编辑器，例如Adobe Illustrator。

If you use a graphics editor, thinking about simplifying SVG code at the design stage decreases the risk of breaking your artwork when you optimize it at later donw the line.

如果使用图形编辑器，则在设计阶段考虑简化SVG代码会降低在以后的生产线进行优化时破坏图稿的风险。

The first step you can take in this direction is to get the size of the canvas right in your graphics editor of choice. Sarah Drasner recommends setting it at 100 x 100px, give or take, depending on your project. This ensures the canvas is not too small, which generates lots of decimals you can hardly reduce at a later stage without messing up the graphic. On the other hand, this size is not too big either. In fact, a large canvas implies a corresponding large number of path points.

您可以朝这个方向迈出的第一步是在所选的图形编辑器中获取画布的大小。 Sarah Drasner建议根据您的项目将其设置为100 x 100px( 允许还是接受)。这样可以确保画布不会太小，从而生成很多小数，您以后很难在不弄乱图形的情况下减少它们。另一方面，这个大小也不算太大。实际上，一块大画布意味着相应的大量路径点。

Next, reducing the number of path points is crucial to shave bytes off your SVG file. This means using shapes instead of paths wherever possible, but also combining multiple paths into fewer paths, unless you plan on animating them individually. Adobe Illustrator offers the Simplify panel to further reduce path points. Here’s a quick video tutorial to illustrate its use.

接下来， 减少路径点的数量对于减少 SVG文件中的字节至关重要。这意味着将尽可能使用形状而不是路径，而且还应将多条路径合并为更少的路径，除非您计划单独对它们进行动画处理。 Adobe Illustrator提供了“简化”面板，以进一步减少路径点。这是一个快速的视频教程，以说明其用法。

聪明地导出SVG (Export SVGs the Smart Way)

Take full advantage of your graphic editor’s exporting capabilities. Not doing so, could mean getting some SVG code stuffed with proprietary markup and bloat you don’t need.

充分利用图形编辑器的导出功能。不这样做，可能意味着使一些SVG代码塞满了您不需要的专有标记和膨胀。

For instance, if you have the latest version of Adobe Illustrator (CC 2017 at the time of writing), export your SVG graphics using the Export As option, and select the .svg file type:

例如，如果您具有最新版本的Adobe Illustrator(在撰写本文时为CC 2017)，请使用“ 导出为”选项导出 SVG图形，然后选择.svg文件类型：

Illustrator’s panel offers a few settings to help you keep file size down and output clean, almost web-ready markup. You can even preview the code by clicking the Show Code button inside the panel.

Illustrator的面板提供了一些设置，可帮助您减小文件大小并输出干净的，几乎可用于Web的标记。您甚至可以通过单击面板内的显示代码按钮来预览代码。

Options in Save As panel in Adobe Illustrator

For a detailed walk-through of each option in Illustrator, The Different Ways of Getting SVG Out of Adobe Illustrator by Geoff Graham is a great read.

有关Illustrator中每个选项的详细演练，Geoff Graham 撰写的《从Adobe Illustrator中获取SVG的不同方法》是一本好书。

使用SVG优化工具压缩更多字节 (Squeeze more Bytes with SVG Optimization Tools)

Once your SVG graphic has been exported, you can still shrink it a bit more using one of the excellent SVG optimization tools available.

导出SVG图形后，您仍可以使用一种出色的SVG优化工具将其缩小一些。

SVGOMG (and and its web-based GUI counterpart) together with Peter Collingridge’s SVG Editor are the most popular tools.

SVGOMG (及其与基于Web的GUI对应 )以及Peter Collingridge的SVG编辑器是最受欢迎的工具。

Check out Optimising SVG images by Guillaume Cedric Marty to learn more about how to use SVGOMG.

查看Guillaume Cedric Marty的优化SVG图像，以了解有关如何使用SVGOMG的更多信息。

启用Gzip SVG文件的传递 (Enable Delivery of Gzipped SVG Files)

The last step in your SVG optimization to-do list is enabling gzip compression on the server. SVG is just XML markup, therefore it lends itself to compression without any issues.

SVG优化任务列表中的最后一步是在服务器上启用gzip压缩。 SVG只是XML标记，因此它可以毫无问题地进行压缩。

The benefits in terms of file reduction are significant. Appendix J of the SVG 1.1 Specification shows a comparison table between examples of uncompressed and compressed SVG files. The results are overwhelmingly in favor of compression with a decrease of 77-84% in file size.

减少文件方面的好处非常明显。 SVG 1.1规范的附录J显示了未压缩和压缩SVG文件示例之间的比较表。结果压倒性地支持压缩，文件大小减少了77-84％。

结论 (Conclusion)

SVG graphics are an awesome choice for the web. Used for simple icons, logos, etc., are often more performant than their raster counterparts, especially if you take the few precautions listed in this article.

SVG图形是Web上的绝佳选择。用于简单图标，徽标等的功能通常比其光栅对应的功能更好，尤其是如果您采取本文中列出的一些预防措施时。

The tips I mention above are by no means exhaustive. You can push the envelope even more. For detailed optimization techniques, the resources below are a must read:

我上面提到的技巧绝不是详尽无遗的。您可以进一步推动信封。有关详细的优化技术，必须阅读以下资源：