svg xml

One of the most intimidating experiences of learning SVG can be found in simply looking at the SVG code created by a vector illustration application. There’s usually a lot of code there; the output from early versions of Adobe Illustrator will often look something like this:

只需查看矢量插图应用程序创建的SVG代码，就可以发现学习SVG的最令人恐惧的经历之一。 通常那里有很多代码。 早期版本的Adobe Illustrator的输出通常如下所示：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . 
SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" enable-background="new 0 0 500 500" 
     width="500" height="500"
     xml:space="preserve">
<!-- Actual SVG code here  -->
</svg>

The good news is that most of this code is redundant or unnecessary, and can be removed. But before we do so, it’s important to understand just what we’re taking away.

好消息是，这些代码大部分都是多余的或不必要的，可以删除。 但是在我们这样做之前，重要的是要了解我们要带走的东西。

1. The first line is the XML prolog. SVG is an expression of XML, a “root language” that can communicate almost any information structure via tags. These tags are very much like the elements that you’re probably familiar with from HTML: in the case of SVG, we’re using XML structure to communicate mostly graphical information.

   第一行是XML序言 。 SVG是XML的一种表达，XML是一种“根语言”，可以通过标签传达几乎任何信息结构。 这些标记非常类似于您可能从HTML熟悉的元素：就SVG而言，我们使用XML结构来传达大多数图形信息。

   XML has a great deal of freedom: technically, you can create any kind of tags you like. However, this freedom comes at a cost: XML syntax is formal, rule-bound and rigorous. That means that XML tags must always be closed, attribute values always inside quotes, etc. The fact that the prolog is at the start expresses the fact that SVG is a “subset” or “expression” of XML; furthermore, that all the content in the document is written in Unicode. But these facts are already known or assumed by everything that touches a SVG file, including the browser, meaning the prolog can be removed.

   XML具有很大的自由度：从技术上讲，您可以创建自己喜欢的任何类型的标签。 但是，这种自由是有代价的：XML语法是正式的，受规则约束的并且是严格的。 这意味着必须始终关闭XML标记，属性值必须始终在引号内，等等。序言在开头就说明了SVG是XML的“子集”或“表达式”。 此外，文档中的所有内容均以Unicode编写。 但是，触摸SVG文件的所有事物(包括浏览器)都已经知道或假定了这些事实，这意味着可以删除序言。

2. The next line is a comment. You’ll see that comments in SVG are written just like in HTML. In this case, the comment tells us the originating application for the document. We don’t need this information either, so it can be removed.

   下一行是注释。 您会看到SVG中的注释就像HTML中那样编写。 在这种情况下，注释会告诉我们该文档的原始应用程序。 我们也不需要此信息，因此可以将其删除。

3. The DOCTYPE declaration is intended to be used for validation of the SVG document, but as Mozilla says, leaving it in place “leads to more problems than it solves”. Unless you’re planning to validate the SVG document with a schema processor it should be eliminated.

   DOCTYPE声明旨在用于SVG文档的验证 ，但是正如Mozilla所说，将其保留在原位“会导致更多的问题而不是解决的问题”。 除非您打算使用模式处理器来验证SVG文档，否则应将其删除。

4. Now we get to the actual start of the SVG document: the <svg> tag, sometimes referred to as the “root svg element”. There are still several attributes that we can cut at this point, however.

   现在，我们进入SVG文档的实际开头 ： <svg>标记，有时也称为“ root svg元素”。 但是，此时我们仍然可以切割几个属性。

SVG版本控制 (SVG Versioning)

Like most languages, SVG has gone through several versions from when the specification was first issued as version 1.0 in 1999. SVG 1.1 followed in 2001, but only updated the organization of the specification, and did not introduce any syntax changes.

与大多数语言一样，SVG从1999年该规范首次发布为1.0版本开始经历了多个版本。SVG1.1于2001年发布，但仅更新了规范的组织 ，并且未进行任何语法更改。

You may also see several other versions of SVG, particularly when exporting from vector programs like Adobe Illustrator, including SVG Tiny and SVG Basic. Both of these are considered “subsets” of SVG 1.1 - referred to as “profiles” in the spec - and were intended for use on low-powered mobile platforms. If employed in an SVG document, you’ll see them appearing as values for a baseProfile attribute withim the <svg> tag.

您可能还会看到SVG的其他几个版本，尤其是从诸如Adobe Illustrator的矢量程序中导出时，包括SVG Tiny和SVG Basic。 这两个都被视为SVG 1.1的“子集”(在规范中称为“配置文件”)，旨在用于低功率移动平台。 如果在SVG文档中使用，您将看到它们显示为带有<svg>标记的baseProfile属性的值。

Basic and Tiny might be considered “cut down” versions of the full SVG specification: SVG Tiny does not support styling or scripting, for example, and doesn’t expose it’s elements to the DOM. However, they also contained some innovations, such as new attributes like vector-effect.

Basic和Tiny可能被视为完整SVG规范的“精简版”：例如，SVG Tiny不支持样式或脚本，并且不向DOM公开其元素。 但是，它们还包含一些创新，例如vector-effect类的新属性。

As a general rule, both Tiny and Basic should be avoided, for several reasons:

通常，应避免Tiny和Basic，这有几个原因：

1. Neither provide any guarantee of better support on mobile (iOS has good support of SVG Basic, but Windows Mobile has none, for example).
   两者都不能保证在移动设备上获得更好的支持(例如，iOS很好地支持SVG Basic，而Windows Mobile则没有)。
2. Modern implementations of SVG in browsers have incorporated most of the innovations from Tiny and Basic.
   浏览器中SVG的现代实现已合并了Tiny和Basic的大部分创新。
3. The specification of Tiny and Basic has changed since most tools were built, meaning that the applications no longer export the correct profiles or syntax.
   自从构建了大多数工具以来，Tiny和Basic的规范已发生更改，这意味着应用程序不再导出正确的配置文件或语法。
4. The intended purpose of Tiny and Basic have been made largely irrelevant by the power and popularity of smartphones.
   Tiny和Basic的预期目的与智能手机的强大功能和普及程度无关。

Without a version attribute on the <svg> element, a browser will always assume that your code is using the latest version of SVG. This has continued into SVG2, which will formally drop the attribute and take on the versioning approach of HTML5.

在<svg>元素上没有version属性，浏览器将始终假定您的代码正在使用最新版本的SVG。 这一直延续到SVG2中，它将正式删除该属性并采用HTML5的版本控制方法 。

淘汰更多冗余代码 (Weeding Out More Redundant Code)

There's a litle more we can remove from the SVG document to make it lighter and easier to read without influencing how it renders in the browser:

我们可以从SVG文档中删除更多内容，以使其更轻便，更易于阅读，而不会影响它在浏览器中的呈现方式：

• The id added by Adobe Illustrator to the code sample we started with is only necessary if you are using the SVG code inline on an HTML page and referencing that unique root element with JavaScript or CSS; in most cases, it can be removed.

  仅当您在HTML页面上内联使用SVG代码并使用JavaScript或CSS引用该唯一根元素时，才需要Adobe Illustrator将id添加到我们开始的代码示例中； 在大多数情况下，可以将其删除。

• The x and y attributes set the position of the SVG when it is nested; as it's very unlikely you're trying to do this, the attributes should be removed.

  x和y属性设置SVG 嵌套时的位置; 由于您尝试执行此操作的可能性很小，因此应删除属性。

• enable-background was intended to specify that any background for the root element could also be used by child elements (such as in a <filter> composition process). However, there's essentially no browser support for this, and it will not make a difference to your SVG, so it should be taken out.

  enable-background旨在指定根元素的任何背景也可以由子元素使用(例如在<filter>合成过程中)。 但是，基本上没有浏览器支持此功能，并且它不会对您的SVG有所影响，因此应将其删除。

• The width and height may be removed, with the understanding that doing can lead to rendering issues in Internet Explorer. This needs to be addressed when choosing to make the SVG responsive.

  可以删除width和height但要注意这样做会导致Internet Explorer中的呈现问题。 在选择使SVG响应时，需要解决此问题。

• The xml:space="preserve" is meant to signal the author’s intent as to how white-space edge-cases should be treated in the document, but browser support is poor. (If you need this feature, employ Illustrator or Inkscape's text-adjustment commands instead).

  xml:space="preserve"旨在表明作者的意图 ，即在文档中应如何处理空白边缘情况，但浏览器支持很差。 (如果需要此功能，请改用Illustrator或Inkscape的文本调整命令)。

最终SVG代码 (The Final SVG Code)

At this point, our SVG document looks something like this:

此时，我们的SVG文档如下所示：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 500 500">
    <!-- SVG code here  -->
</svg>

I think you’ll agree that it’s a whole lot cleaner and easier to understand!

我想您会同意，它整体上更加整洁且易于理解！

However, we’re not quite finished: there’s still the issue of those xmlms attributes in the <svg> element… which I’ll discuss in the next article.

但是，我们还没有完全完成：在<svg>元素中仍然存在那些xmlms属性的问题……我将在下一篇文章中进行讨论。

翻译自: https://thenewcode.com/605/SVG-Fundamentals-XML-and-Versioning

svg xml