svg标签和svg文件区别_SVGO减少SVG文件大小的三种方法

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成为可能的合作伙伴。

In this article I suggest three ways in which SVGO lets you optimize SVG graphics to make them suitable for web use.

在本文中，我建议使用SVGO的三种方式来优化SVG图形，使其适合于Web使用。

为什么需要优化SVG (Why You Need to Optimize SVGs)

SVG (a.k.a. Scalable Vector Graphics) is a resolution-independent graphics format. The big advantage of not being pixel-based is that SVGs look awesome on our shiny retina screen-enabled devices and work great on the responsive web.

SVG(又名可伸缩矢量图形)是与分辨率无关的图形格式。 不基于像素的最大优势在于，SVG在启用了闪亮的视网膜屏幕的设备上看起来很棒，并且在响应式网络上也能很好地工作。

If like me you’re not a graphic designer, you might have found yourself grabbing ready-made SVGs from various Creative Commons or Public Domain online sources. One downside of doing so is that often such artworks are not produced with the web in mind. This means that you might find they’re rife with over-complicated paths and Photoshop-like effects. Also, since SVGs are XML-based, digging into the source code often reveals lots of unnecessary markup. Apart from my ingrained love for clean code, complexity and bloat add to the file size and negatively impact on website performance.

如果像我一样，您不是平面设计师，那么您可能会发现自己从各种Creative Commons或Public Domain在线资源中获取现成的SVG。 这样做的一个缺点是通常不会在考虑网络的情况下制作此类艺术品。 这意味着您可能会发现它们到处都是过于复杂的路径和类似Photoshop的效果。 另外，由于SVG基于XML，因此深入研究源代码通常会发现许多不必要的标记。 除了我对干净代码的根深蒂固的热爱之外，复杂性和膨胀还增加了文件大小，并对网站性能产生了负面影响。

Don’t think that if you draw SVGs yourself you’ll be totally in the clear. Although the latest versions of Adobe Illustrator make it possible to export reasonably clean SVG markup, older versions, as well as some different vector graphics editors, still sprinkle the markup with unneeded comments, doctype declarations and proprietary attributes.

不要以为自己画SVG就会很清楚。 尽管Adobe Illustrator的最新版本可以导出相当干净的SVG标记，但是较旧的版本以及某些不同的矢量图形编辑器仍在标记中添加了不必要的注释，文档类型声明和专有属性。

Here’s an instance of graphics editor-generated code to illustrate the point:

这是图形编辑器生成的代码的一个实例，以说明这一点：

<svg 
  xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="https://www.w3.org/2000/svg" 
  xmlns="https://www.w3.org/2000/svg"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
  viewBox="0 0 1000 1000" version="1.1">

  <g inkscape:label="Katze" inkscape:groupmode="layer" id="layer1" transform="translate(0,-52.362183)">
  
  ... More code here
  
  </g>

</svg>

Instead, all you really need is:

相反，您真正需要的是：

<svg 
  xmlns="https://www.w3.org/2000/svg"
  viewBox="0 0 1000 1000">

  <g id="layer1" transform="tr