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="translate(0,-52.362183)">
... More code here
</g>
</svg>

Furthermore, if you don’t use layer1 in your CSS or JavaScript, you could get rid of the id attribute on the <g> tag as well.

此外，如果您不在CSS或JavaScript中使用layer1 ，则也可以摆脱<g>标记上的id属性。

Personally, I’m in favor of a bit of manual cleaning up of SVG code. But, fear not, the bulk of the most tedious and repetitive part of the optimization work easily lends itself to automation.

就个人而言，我赞成手动清除SVG代码。 但是，不用担心，优化工作中大部分最繁琐和重复的部分很容易实现自动化。

什么是SVGO？ (What Is SVGO?)

Without a doubt, the most popular tool available for the job at this time is SVGO.

毫无疑问，目前最流行的工具是SVGO 。

SVGO runs on Node.js, an asynchronous, event-driven runtime to build scalable network applications. You don’t need to know how to build applications with Node.js in order to work with SVGO. However, you need to use your computer’s command line user interface (CLI).

SVGO在Node.js上运行， Node.js是一个异步的，事件驱动的运行时，用于构建可扩展的网络应用程序。 您无需了解如何使用Node.js来构建应用程序即可使用SVGO。 但是，您需要使用计算机的命令行用户界面(CLI)。

SVGO allows you to enable or disable specific optimizations by enabling or disabling its plugins.

SVGO允许您通过启用或禁用其插件来启用或禁用特定的优化。

For instance, if you want to remove empty attributes from your SVG graphic, you’ll have to enable the removeEmptyAttrs.js plugin.

例如，如果要从SVG图形中删除空属性，则必须启用removeEmptyAttrs.js插件 。

You can see a full list of all the available plugins for SVGO in the project’s README file on GitHub.

您可以在GitHub上的项目的README文件中查看SVGO的所有可用插件的完整列表。

There are quite a few ways in which you can integrate SVGO in your development work. In what follows, I’m going to discuss just three of the options open to you.

您可以通过多种方式将SVGO集成到开发工作中。 在下面的内容中，我将仅讨论向您提供的三个选项。

＃1。 只是Node.js和SVGO (#1. Just Node.js and SVGO)

To start using SVGO, just install Node.js by downloading the latest stable version corresponding to your operating system and follow the instructions in the installer.

要开始使用SVGO，只需下载与您的操作系统相对应的最新稳定版本来安装Node.js ，然后按照安装程序中的说明进行操作即可。

Next, you can install SVGO using npm, Node’s package manager. Type this command in your terminal:

接下来，您可以使用Node的软件包管理器npm安装SVGO。 在终端中键入以下命令：

npm install -g svgo

Now, you have installed SVGO globally in your machine so you can use it anywhere.

现在，您已经在机器中全局安装了SVGO，因此您可以在任何地方使用它。

To optimize an SVG file, type in your terminal:

要优化SVG文件，请在终端中输入：

svgo yoursvgfile.svg

Replace yoursvgfile.svg with the name of the SVG file you wish to optimize. However, using the tool this way destroys the original file, which is something I wouldn’t recommend. In fact, you might want to make changes to the original file, and destroying all the editor-specific code might prevent you from being able to use your graphics program’s editing features. Therefore, it’s best practice to generate a new, optimized file without overriding the original one. To do so, type this command:

将您的yoursvgfile.svg替换为您要优化的SVG文件的名称。 但是，以这种方式使用该工具会破坏原始文件，我不建议这样做。 实际上，您可能想对原始文件进行更改，并且销毁所有特定于编辑器的代码可能会阻止您使用图形程序的编辑功能。 因此，最佳实践是在不覆盖原始文件的情况下生成新的优化文件。 为此，请键入以下命令：

svgo yoursvgfile.svg yoursvgfile.min.svg

Now, you have two SVG files: yoursvgfile.svg, which is the original file, and yoursvgfile.min.svg, which is the optimized SVG file.

现在，你有两个SVG文件： yoursvgfile.svg ，这是原始文件， yoursvgfile.min.svg ，这是优化的SVG文件。

I’ve just performed this step and SVGO lets me know that in just 167 milliseconds it created an optimized copy of the original file. The latter weighed 17.9 Kb while the optimized copy weighs 11.48 Kb, yielding a 36.2% saving:

我刚刚执行了此步骤，SVGO让我知道，它仅在167毫秒内就创建了原始文件的优化副本。 后者的重量为17.9 Kb，而优化的副本的重量为11.48 Kb，节省了36.2％：

If you open yoursvgfile.min.svg in a text editor, you’ll see much less code, which means a much smaller file size. Great!

如果在文本编辑器中打开yoursvgfile.min.svg ，您将看到更少的代码，这意味着更小的文件大小。 大！

You can also point SVGO to an entire folder using the -f flag, like this:

您也可以使用-f标志将SVGO指向整个文件夹，如下所示：

svgo -f ../path/to/folder/with/svg/files

To customize the output SVGO generates, enable the many plugins available. For instance:

要自定义SVGO生成的输出，请启用许多可用的插件。 例如：

svgo yoursvgfile.svg --enable='removeComments,mergePaths'

The command above creates an optimized version of yoursvgfile.svg by removing comments and merging multiple paths in the source code.

上面的命令通过删除注释并合并源代码中的多个路径来创建yoursvgfile.svg的优化版本。

＃2。 将SVGO集成到您的Gulp工作流程中 (#2. Integrate SVGO in Your Gulp Workflow)

A widely adopted front-end workflow these days includes a task runner that performs automated operations like compiling Sass into CSS, minifying scripts, etc.

如今，广泛使用的前端工作流包括执行自动操作的任务运行程序，例如将Sass编译为CSS，最小化脚本等。

One of the most popular task runners is Gulp, which is both powerful and quick to implement.

Gulp是最受欢迎的任务执行者之一，它功能强大且执行Swift。

It’s easy to integrate SVGO with your Gulp-based workflow thanks to gulp-svgmin.

借助gulp-svgmin，可以轻松地将SVGO与基于Gulp的工作流集成gulp-svgmin 。

You install gulp-svgmin with npm:

您使用npm安装gulp-svgmin ：

npm install gulp-svgmin

A basic gulp task for svgmin looks like this:

svgmin的基本gulp任务如下所示：

var gulp = require('gulp');
var svgmin = require('gulp-svgmin');
gulp.task('default', function () {
return gulp.src('logo.svg')
.pipe(svgmin())
.pipe(gulp.dest('./out'));
});

The code above, which you add to your Gulp configuration file, Gulp.js, takes logo.svg, calls svgmin to optimize it, and outputs it in a dedicated folder.

上面的代码(添加到Gulp配置文件Gulp.js )采用logo.svg ，调用svgmin对其进行优化，并将其输出到专用文件夹中。

You can find more articulated examples on the gulp-svgmin GitHub page. If you’re not all too familiar with Gulp but you’d like to get up to speed with it, don’t miss An Introduction to Gulp.js by Giulio Mainardi, which offers an easy-to-follow walk-through.

您可以在gulp-svgmin GitHub页面上找到更多明确的示例。 如果您对Gulp不太熟悉，但是想快速掌握它，请不要错过Giulio Mainardi的An Introduction to Gulp.js ，它提供了易于遵循的演练 。

＃3。 SVGOMG：SVGO的在线GUI版本 (#3. SVGOMG: The Online GUI Version of SVGO)

Command line tools are practical and get the job done quickly. However, nothing beats having a preview of your SVG graphic while you’re optimizing it.

命令行工具很实用，可以快速完成工作。 但是，在优化SVG图形时，预览并没有什么比这更好的了。

The advantage of the preview is that you immediately realize when a specific otpimization is degrading the graphics by being too aggressive. Therefore you have the opportunity of quickly adjusting the corresponding setting to generate an optimal output before the minified copy is made.

预览的优点是，您可以立即意识到特定的otpimization由于过于激进而使图形降级。 因此，您有机会在缩小副本之前快速调整相应的设置以生成最佳输出。

Enters SVGOMG by Jake Archibald

杰克·阿奇博尔德 ( Jake Archibald)进入SVGOMG

This is a free online GUI (Graphical User Interface) version of SVGO (SVGOMG stands for SVGO Missing GUI):

这是SVGO的免费在线GUI( 图形用户界面 )版本(SVGOMG表示SVGO Missing GUI)：

SVGOMG Interface.

SVGOMG接口。

To get started, pick any of the following three ways:

首先，请选择以下三种方式之一：

• Drag and drop your SVG graphic in the large checkered, grayed out area you can see in the image above将SVG图形拖放到上方的灰色方格区域中，您可以在上图中看到
• Open your SVG using your computer’s File Upload feature使用计算机的文件上传功能打开SVG
• Paste your SVG markup inside the designated menu area.将您的SVG标记粘贴到指定的菜单区域中。

Or you can click on Demo to try out the application using the demo SVG file already available for you.

或者，您可以单击“ 演示”以使用已经可用的演示SVG文件来试用该应用程序。

Once you’ve done so, you can adjust the tool’s settings, which correspond to SVGO’s plugins, and immediately preview their effects both on the quality of the graphic and the file size/kilobytes savings.

完成此操作后，您可以调整与SVGO插件相对应的工具设置，并立即预览它们对图形质量和文件大小/千字节节省的影响。

SVGOMG in action.

SVGOMG在行动。

The huge advantage is that if you go too far with your optimizations and the image starts to break, you can take action right away and nip the problem in the bud.

巨大的优势在于，如果您在优化方面走得太远，并且图像开始破裂，则可以立即采取措施，将问题压在萌芽状态。

If you click on Code in the menu on the top left of the application, you can also get instant feedback on the code changes SVGOMG makes in your file as you fiddle with the options.

如果您在应用程序左上方的菜单中单击“ 代码” ，那么您在摆弄选项时也会获得有关SVGOMG在文件中进行的代码更改的即时反馈。

You can also toggle between the original graphic and the optimized version, which helps you make useful comparisons.

您还可以在原始图形和优化版本之间切换，这有助于您进行有用的比较。

One final neat feature of SVGOMG is that it works offline too by taking advantage of Service Workers technology.

SVGOMG的最后一个完整功能是，它也可以通过利用Service Workers技术来脱机工作 。

结论 (Conclusion)

If you care about clean code and website performance, and you should, optimizing your SVG graphics for use on the web is a must.

如果您关心纯净的代码和网站性能，并且应该这样做，则必须优化在网络上使用的SVG图形。

In this article I pointed you to three ways in which you can optimize SVG graphics for your website using SVGO. There are tons more, for example:

在本文中，我指出了使用SVGO为网站优化SVG图形的三种方法。 还有更多，例如：

• Grunt-SVGmin, a Grunt plugin for SVGO

  Grunt-SVGmin ， SVGO的Grunt插件

• Atom-SVGO, an SVGO plugin for Atom

  Atom-SVGO ，是Atom的SVGO插件

• Sublime-SVGO, an SVGO plugin for Sublime Text

  Sublime-SVGO ，Sublime Text的SVGO插件

• SVGO-Inkscape, to export clean SVG from Inkscape using SVGO

  SVGO-Inkscape ，使用SVGO从Inkscape导出干净的SVG

• And more.和更多。

How do you use SVGO? What’s your SVG optimization workflow? Hit the comment box below to share.

您如何使用SVGO？ 您的SVG优化工作流程是什么？ 点击下面的评论框分享。

翻译自: https://www.sitepoint.com/three-ways-decreasing-svg-file-size-svgo/

svg标签和svg文件区别