SVG文件：它们是什么以及如何制作一个

In the process of designing a user-friendly website, you might encounter some difficulty with images, especially with image resolution. Image quality is important to get right — fewer things look less professional on a page than a distorted, poorly-scaled logo, icon, or photo.

此问题仅通过响应式设计加重。访问者在台式机和智能手机上查看您的内容，因此，与其他内容一起，无论设备如何，都应优化图像。如果有数字格式使图像看起来很棒，无论其尺寸多大，那会很好吗？

事实证明，有。叫做SVG format, and it’s perfect for non-photographic imagery on websites.

SVGs are something of a magic trick inwebsite design- 它们不仅会在任何规模上生成清晰的图形，而且还针对搜索引擎进行了优化，可编程，通常比其他格式小，并且能够动态动画。有很多东西要解开并了解SVG。

In this guide, I’ll cover all the fundamentals you’ll need to know to get started working with SVGs. I’ll explainwhat these files are,when to use them, andhow to get started creating SVG files你自己。

An SVG file, short for scalable vector graphic file, is a standard graphics file type used for rendering two-dimensional images on the internet. Unlike other popular image file formats, the SVG format stores images as vectors, which is a type of graphic made up of points, lines, curves and shapes based on mathematical formulas.

This prompts the question: What exactly is a vector graphic?

Raster vs. Vector

There aremore than a few image file formatsin use on the web today, which we can divide into two categories: raster graphics and vector graphics.

You’re probably familiar with the common formatsPNG and JPEG。These are raster-graphics formats, which means that they store image information in a grid of colored squares, also called a bitmap. The squares in this bitmap combine to form a coherent image, much like pixels on a computer screen.

Raster graphics work well for highly detailed images like photographs, in which the exact color of each pixel needs to be specified. Raster images have a fixed resolution, so increasing their size lowers the quality of the image.

矢量图格式（例如SVG和PDF）的工作方式不同。这些格式将图像存储为一组点和点之间的线。数学公式决定了这些点和线的位置和形状，并在图像缩放或向下缩放时保持其空间关系。矢量图形文件还存储颜色信息，甚至可以显示文本。

How SVG Files Work

SVG文件写在XML, a markup language used for storing and transferring digital information. The XML code in an SVG file specifies all of the shapes, colors, and text that comprise the image.

Let’s look at some examples. I’ll start by drawing a simple circle SVG:

When I open the file for this circle in a text editor, this XML code appears:

如您所见，这里没有太多代码。我们只需要一行代码即可绘制一个圆圈。那是因为XML为我们完成了大部分工作tags。在上面的代码中，标签以粉红色显示在角度括号内。

To draw the circle, the XML code specifies the shape with a标签，其位置与cxandcyattributes, the radius with therattribute, and the color inside the<样式>tag.#f4795b是这种特殊的橙色阴影的十六进制颜色代码。

当提供了这样一个SVG文件,web兄弟wser (or other application) takes in this XML info, processes it, and displays it onscreen as a vector image. All modern browsers render SVGs this way, as can specialized graphics editing software.

You’ll also notice that this XML file is written in English. SVGs are basically text files, which makes them readable by humans. This enables developers to make edits to XML files directly. For instance, I could replace thefillvalue to change the color of the circle:

当然，与基本圈子相比，我们可以用向量完成更多的成就。让我们看一下更复杂的图像，HubSpot链轮徽标：

Though a simple icon, this graphic consists of 30 lines connected by 30 points:

Let’s open this SVG file in a text editor:

Okay, there’s a bit more going on here. But, the concept is the same. We still have our<样式>tag, which tells us the color. Instead of atag to give us the shape, we have a<路径>tag. All of the values in this tag specify the points of the graphic and the lines between these points.

Advantages of SVG Files

XML code isn’t just neat to look at — it makes SVG files very powerful and practical for website and web applications, as we’ll explore in this section.

1. Infinite Scalability

It’s right there in the name: SVGs can be expanded or shrunk down to any size without a loss of quality. Image size and display type don’t matter with SVGs — they always look the same.

This is important because the size of web images differ by viewer, based on browser window dimensions, device, zoom, site layout, and responsive design. Your images must appear fully-rendered to every viewer, and SVGs make this a lot easier.

Consider the HubSpot sprocket again. Here’s the logo as an SVG, 100 pixels wide:

And here’s the same logo in PNG format, also 100 pixels wide:

They look pretty indistinguishable now, but the difference in quality is obvious when I scale each up to five times the size:

If an SVG needs to be expanded or shrunk, the program reading the file readjusts the points and lines to retain clear boundaries and solid colors.

Raster images, in contrast, appear pixelated when blown-up on our screens. While there are workarounds for this problem to keep the raster formula — like using different files of increasing size for the same image — they take more work and are more prone to eros. Raster images were ultimately not designed for scaling.

然而，有一个更好的可扩展性的权衡：根据设计，SVG缺乏栅格图像的细节。您只能从矢量系统传达如此多的视觉信息，而栅格格式可以按照位图允许的详细显示图像。任何完美代表详细的PNG（即照片）作为向量的尝试都将导致大量且不切实际的SVG文件。

So, both file types have their place in web design. Use PNGs, JPEGs, and other raster formats for photos, and try SVGs for anything less detailed.

2. Customization

SVG使设计师和开发人员对其外观有很大的控制。您可以使用许多兼容SVG兼容的编辑程序之一来更改矢量形状，颜色，文本，甚至其他视觉效果（例如颜色渐变和阴影），而不是直接修改文本编辑器中的文件，而是可以更改矢量形状，颜色，文本，甚至是其他视觉效果。

3. Scripting Compatibility

SVG文件格式由World Wide Web Consortiumas a standardized format for web graphics, designed to work with other web conventions likeHTML, CSS, JavaScript, and the文档对象模型。

Thanks to this compatibility, SVG images can be controlled with scripts. This opens the door for a huge range of dynamic display possibilities, from animations to dynamic charts to mobile-responsive images. This level of control over appearance isn’t possible with JPEG and PNG formats.

4. Accessibility and Search Engine Optimization

SVG文件是文本文件，这本身具有比栅格格式的一些优势。首先，正如我们所涵盖的那样，程序员可以查看XML代码并快速理解它。

Also, if an SVG graphic contains text, the text information is stored in the file as literal text (not as shapes). This allows SVG to be interpreted by screen readers, helping those who have difficulties interacting with digital content.

Lastly, SVG files can be indexed by search engineslike Google。If you want to place a text-heavy infographic or other SVG display on your page, including keywords text in the image can help your page rank and improve your SEO. PNGs and JPEGs are limited to metadata andalt textin this respect.

5.较小的文件尺寸

SVG files tend to store images more efficiently than common raster formats as long as the image is not too detailed. SVG files contain enough information to display vectors at any scale, whereas bitmaps require larger files for scaled-up versions of images — more pixels use up more file space.

这对网站非常有用，因为较小的文件在浏览器上加载速度更快，因此SVG可以提高整体页面性能。

但是，这并不意味着您应该将所有图像转换为SVG。现在让我们看看网站倾向于应用SVG。

What are SVG files used for?

As I mentioned, SVG files work best for images that contain less detail than a photograph. That’s still rather broad, so let’s discuss some of the most common uses of SVGs online.

Icons

Most icons translate well to vectors, given their simplicity and clearly defined borders. Icons for page elements likebuttonswill need to be responsive for varying screens sizes, which means they must be perfectly scalable.

Logos

The SVG format is particularly well suited for logos, which appear in网站标题, emails, and printed on anything from pamphlets to hoodies to billboards. Again, logos tend to be simpler in design, which lends nicely to the SVG format.

Illustrations

Vectors also suit non-photo visual art nicely. Decorative drawings on webpages can both scale easily and conserve file space if added as SVG files. The illustrations below, even thetextureson some shapes, can be achieved with SVGs.

Image Source

Animations and Interface Elements

By harnessing the capabilities of CSS and JavaScript, you can set SVGs to change their appearance dynamically, and be triggered automatically or after some event trigger. Animated SVGs can serve to add visual flair to your pages, or they can be used to engage with user interface animations:

Image Source

Infographics and Data Visualizations

Would your website benefit from informational displays, like an infographic or illustrated chart? This is another useful application for SVGs. Your designs will scale seamlessly, and text within the SVG file is indexable.

您甚至可以将图表设计为SVGS，这些图表基于实时数据输入动态更新。例如，您可以为筹款活动创建一个“进度栏”向量，该筹款活动随着捐赠总数的增加而填写。

您还将在信息站点上经常看到SVG，以进行数据可视化和地图：

Image Source

如何制作或编辑SVG文件

如果您想简单地打开SVG图像而不进行编辑，则可以直接在Web浏览器中进行操作，因为浏览器旨在解释和显示SVG。您还可以在专门编辑程序中预览SVG，正如我们接下来讨论的那样。

To modify an SVG file, you could directly modify the SVG file in a text editor, but this is impractical for changing most things beyond colors. Instead, use software for editing vector art. Free and paid options include:

• Adobe Illustrator, Adobe’s program for creating and editing vector graphics. You can export adobe projects as SVGs or in several raster formats.
• 微软Visio, a flowchart, diagram, and infographic maker.
• CorelDRAW, another dedicated vector graphic editor.
• GIMP(GNU Image Manipulation Program), a free, popular, and open-source image editing program.
• Google Docs— you can export drawings created in Google docs to SVG.
• Inkscape, free vector drawing and text tool.

要开始从头开始创建SVG，您无需了解XML或编程。您可以在上面列出的一个程序之一中绘制向量，并以SVG格式导出。

Each program has its own limitations and learning curve. If you plan to explore SVGs further, try out a few options and get a feel for the tools available before settling on a free or paid option.

这是一个如何使用Adobe Illustrator的例子software to vectorize a PNG image:

1. 在Illustrator中创建一个设计转换为a scalable vector graphic file.Make sure the imagery is smooth with distinctly indicated corners or curves to ensure a clean transition from non-SVG to SVG.
2. Click Image Trace over the design in the artboard for Illustrator to select.In the drop down menu, navigate to Advanced Options. Every design is unique so make sure to adjust as fit. General practice recommends lowering the amount of “Paths” to further smoothen borders of the design. When done, select轮廓视图for clarity on the design’s borders and the number of nodes present.
3. 单击展开以进行您确定的设计并将其制成矢量。For simple designs like this one, open theMagic WandTool, click back onto the white of the artboard and delete it. This will discard the background and leave the transparent layer with your vector visible.
4. 根据需要调整艺术板的大小。The smaller the file is, the better it will read on a website and improve Google page performance ranking.
5. Fine tune your design by removing unnecessary nodeswith either theSimplyorSmoothtool. Adjust as needed to simplify the paths without adverse effect.
6. In theMagic Wandtool, click theGroup Selection工具，将完整的设计与您在Artboard上可能存在的任何其他设计分开。
7. 选择设计的设计，单击File>出口>出口As SVG（*.svg）
8. Click显示代码in SVG Options to view the XML, copy to use as you please.

Designing for Scale

Scalable vector graphics come in handy in many different scenarios. They’re versatile, interactive, and easy to start creating with a graphics editor and a bit of design know-how. With SVGs in your web design tool belt, you won’t need to worry about blurry graphics again — at least not for your basic images. For photos, stick to PNGs and JPEGs.

Editor's note: This post was originally published on October 2020, and has been updated for comprehensiveness.