svg标签和svg文件区别_什么是SVG文件？ SVG图片和标签说明

svg标签和svg文件区别

SVG (SVG)

SVG or Scalable Vector Graphics is a web standard for defining vector-based graphics in web pages. Based on XML the SVG standard provides markup to describe paths, shapes, and text within a viewport. The markup can be embedded directly into HTML for display or saved to a .svg file and inserted like any other image.

SVG或可伸缩矢量图形是用于在网页中定义基于矢量的图形的Web标准。 SVG标准基于XML，提供标记来描述视口内的路径，形状和文本。 标记可以直接嵌入HTML中以显示，也可以保存到.svg文件中，然后像插入其他任何图像一样插入。

You can write SVG by hand, but more complicated graphics can be designed in vector graphics editors such as Illustrator or InkScape and exported to SVG files or code.

您可以手工编写SVG，但是可以在矢量图形编辑器(例如Illustrator或InkScape)中设计更复杂的图形，并将其导出到SVG文件或代码中。

SVG基础 (SVG Basics)

Developers start an SVG graphic with the <svg> tag and XML namespace like so:

开发人员使用<svg>标记和XML名称空间启动SVG图形，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

The sample also includes a version attribute. The version attribute is optional but it is recommended for complaince with XML specifications.

该示例还包括version属性。 version属性是可选的，但建议使用XML规范进行投诉。

This sample won’t display anything, it merely established a viewport. You can add height and width attributes to set a display size for the viewport this essentially establishes a canvas for you to work in.

该示例将不显示任何内容，仅建立了一个视口。 您可以添加height和width属性来设置视口的显示大小，这实际上为您创建了一个画布供您使用。

With a viewport in place you can add basic graphics, text, and path elements.

在适当的视口下，您可以添加基本的图形，文本和路径元素。

<svg
     version="1.1"
     width="100%"
     viewbox="0 0 600 300"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="#f7b2c1" />
  <circle cx="240" cy="60" r="50" fill="#c1b2f7" stroke="#b2c1f7" stroke-width="15"/>
  <text x="450" y="70" font-size="20" text-anchor="middle">SVG Text is browser readable!</text>
  <g stroke="#b2c1f