svg嵌套svg_SVG 101：什么是SVG？

svg嵌套svg

Though it was conceived back in the late 1990s, SVG is in many ways the “ugly duckling” file format that grew up to become a swan. Poorly supported and largely ignored for most of the 2000s, since around 2017 all modern web browsers have been rendering SVG without serious issues, and most vector drawing programs have been offering the option to export SVG, which has unquestionably become a widely used graphic format on the Web.

尽管它是在1990年代后期构思的， 但从很多方面来说， SVG都是“丑小鸭”文件格式，后来逐渐发展成为一种天鹅。 在2000年代的大部分时间里，支持不力且被很大程度上忽略了，自2017年左右以来，所有现代Web浏览器都在渲染SVG时没有出现严重问题，并且大多数矢量绘图程序都提供了导出SVG的选项，毫无疑问，SVG已成为SVG上广泛使用的图形格式。网络。

This hasn’t happened by chance. Although traditional raster graphic file formats like JPGs and PNGs are perfect for photographs or very complex images, it turns out that SVG is the one graphic format that most closely meets current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.

这并非偶然。 尽管传统的栅格图形文件格式(如JPG和PNG)非常适合照片或非常复杂的图像，但事实证明SVG是最能满足当前Web开发对可伸缩性，响应性，交互性，可编程性，性能和可访问性的要求的一种图形格式。 。

This guide was updated in August 2020.

本指南于2020年8月更新。

那么，什么是SVG？为什么要使用它？ (So, What Is SVG and Why Should You Use It?)

SVG is an eXtensible Markup Language (XML)-based vector graphic format for the Web and other environments. XML uses tags like HTML, although it’s stricter. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not be rendered.

SVG是用于Web和其他环境的基于可扩展标记语言(XML)的矢量图形格式。 XML使用更严格的标签，例如HTML。 例如，您不能省略结束标记，因为这将使文件无效并且将不会呈现SVG。

To give you a taste of what SVG code looks like, here’s how you would draw a white circle with a black border:

为了让您了解SVG代码的外观，以下是绘制带有黑色边框的白色圆圈的方法：

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

As you can see, under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text. As it’s human-readable, easily understandable and modifiable, when embedded in an HTML document as an inline SVG, SVG code can be manipulated via CSS or JavaScript. This gives SVG a flexibility and versatility that can’t ever be matched by traditional PNG, GIF or JPG graphic formats.

如您所见，在幕后，SVG文档只不过是描述直线，曲线，形状，颜色和文本的简单纯文本文件。 由于它是人类可读，易于理解和可修改的，因此当将它们作为内联SVG嵌入HTML文档中时，可以通过CSS或JavaScript操纵SVG代码。 这为SVG提供了灵活性和多功能性，这是传统PNG，GIF或JPG图形格式无法比拟的。

SVG is a W3C standard, which means that it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it’s likely that SVG will continue to be the de facto standard for vector graphics in the browser.

SVG是W3C标准 ，这意味着它可以轻松地与其他开放标准语言和技术(包括JavaScript，DOM，CSS和HTML)进行互操作。 只要W3C设定全球行业标准，SVG很有可能将继续成为浏览器中矢量图形的事实上的标准。

The awesomeness of SVG is that it can solve many of the most vexing problems in modern web development. Let’s breeze through some of them.

SVG的惊人之处在于它可以解决现代Web开发中许多最棘手的问题。 让我们轻轻松松地通过其中的一些。

可扩展性和响应能力 (Scalability and responsiveness)

Under the hood, SVG uses shapes, numbers and coordinates rather than a pixel grid to render graphics in the browser, which makes it resolution-independent and infinitely scalable. If you think about it, the instructions for creating a circle are the same whether you’re using a pen or a skywriting plane. Only the scale changes.

在幕后，SVG使用形状，数字和坐标而不是像素网格在浏览器中渲染图形，这使其与分辨率无关且可无限扩展。 如果您考虑一下，无论使用钢笔还是空中书写平面，创建圆的说明都是相同的。 只有比例改变。

With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals, and you’ll be sure they’ll look clear and crisp at any size.

借助SVG，您可以组合不同的形状，路径和文本元素来创建各种视觉效果，并且可以确保它们在任何大小下都将看起来清晰明快。

In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which cause them to pixelate when they’re scaled. Although various responsive image techniques have proved valuable for pixel graphics, they’ll never be able to truly compete with SVG’s ability to scale indefinitely.

相反，基于栅格的格式(例如GIF，JPG和PNG)具有固定的尺寸，这会使它们在缩放时像素化。 尽管已证明各种响应式图像技术对像素图形很有用，但它们永远无法与SVG无限扩展的能力真正竞争。

可编程性和交互性 (Programmability and interactivity)

SVG is fully editable and scriptable. All kinds of animations and interactions can be added to an inline SVG graphic via CSS and/or JavaScript.

SVG是完全可编辑和可编写脚本的。 各种动画和交互可以通过CSS和/或JavaScript添加到嵌入式SVG图形中。

辅助功能 (Accessibility)

SVG files are text-based, so when embedded in a web page, they can be searched and indexed. This makes them accessible to screen readers, search engines and other devices.

SVG文件基于文本，因此当嵌入到网页中时，可以对其进行搜索和索引。 这使屏幕阅读器，搜索引擎和其他设备可以访问它们。

性能 (Performance)

One of the most important aspects impacting web performance is the size of the files used on a web page. SVG graphics are usually smaller in size compared to bitmap file formats.

影响Web性能的最重要方面之一是网页上使用的文件的大小。 与位图文件格式相比，SVG图形通常较小。

常见用例和浏览器支持 (Common Use Cases and Browser Support)

SVG has an avalanche of practical use cases. Let’s explore the most significant of them.

SVG有大量的实际用例。 让我们探索其中最重要的。

普通插图和图表 (Plain illustrations and diagrams)

Any traditional drawing that lends itself to being produced using pen and pencil should translate perfectly into the SVG format.

任何适合用钢笔和铅笔制作的传统图形都应完美地转换为SVG格式。

徽标和图标 (Logos and icons)

Logos and icons must be clear and sharp at any size — be it the size of a button or that of a billboard — which makes them ideal candidates for SVG. Furthermore, SVG icons are more accessible and are much easier to position.

徽标和图标的大小必须清晰，清晰(无论是按钮大小还是广告牌大小)，这使其成为SVG的理想选择。 此外，SVG图标更易于访问，并且更容易放置。

动画制作 (Animations)

You can create appealing animations, including cool line drawing effects using SVG graphics. In fact, SVG code can interact with CSS animation, as well as JavaScript and its own built-in SMIL animation functionality.

您可以使用SVG图形创建引人入胜的 动画 ，包括漂亮的线条绘制效果 。 实际上，SVG代码可以与CSS动画以及JavaScript及其内置的SMIL动画功能进行交互。

互动性(图表，图形，图表，地图) (Interactivity (charts, graphs, infographics, maps))

SVG can be used to plot data and update it dynamically based on user actions or other events. See Interactive SVG Infographic and SVG Interactive Roadtrip Map.

SVG可用于绘制数据并根据用户操作或其他事件动态更新数据。 请参阅“ 交互式SVG信息图”和“ SVG交互式Roadtrip地图” 。

特殊效果 (Special effects)

Many live effects can be achieved by using SVG, including shape morphing or different gooey effects.

使用SVG可以实现许多现场效果，包括形状变形或不同的粘稠效果 。

构建界面和应用程序 (Building interfaces and applications)

SVG enables you to make sophisticated interfaces that you can integrate with HTML5, web-based applications, and rich internet applications (RIAs).

SVG使您能够创建可与HTML5，基于Web的应用程序和富Internet应用程序(RIA)集成的复杂界面 。

As you can see, SVG is used almost everywhere and in countless situations. The good news about all this is that browser support for SVG is great, as you can check for yourself on caniuse.com.

如您所见，SVG几乎在所有地方和无数情况下使用。 关于这一切的好消息是，浏览器对SVG的支持很棒，因为您可以在caniuse.com上进行检查 。

So, now you know what SVGs are and why they’re awesome for the Web. As a next step, I recommend you check out Craig’s article on the various ways to use CSS with SVG, and ways to include SVGs in a web page and manipulate them. Or if you want to dive in deep, check out the book Practical SVG, by Chris Coyier.

因此，现在您知道什么是SVG，以及为什么它们对Web很棒。 下一步，我建议您查看Craig的文章，其中介绍了将CSS与SVG一起使用的各种方法，以及将SVG包含在网页中并对其进行操作的方法 。 或者，如果您想深入研究，请查看Chris Coyier撰写的《 实用SVG 》一书。

翻译自: https://www.sitepoint.com/svg-101-what-is-svg/

svg嵌套svg