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.

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

<svgversion="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="#b2c1f7"> <!-- g is for group --><path stroke-width="2" d="M10 170 l590 0" /><path stroke-width="4" d="M10 190 l590 0" /><path stroke-width="6" d="M10 210 l590 0" /></g>  
</svg>

You can see the output and play with the code in this codepen.

您可以看到输出并使用此Codepen中的代码。

In the opening svg tag we add a width attribute to set the width of the viewport to 100% of the container width, you can use percentages or pixel widths. The opening svg tag also has viewbox attribute which defines a window through which elements of your svg are visible, in this case, the viewbox spans from (0,0) to (600,300). In SVG space the X-axis starts with zero on the left and increases to the right; the Y-axis starts with zero at the top and increases towards the bottom.

在开头的svg标签中，我们添加了width属性，以将视口的宽度设置为容器宽度的100％，您可以使用百分比或像素宽度。开头的svg标记还具有viewbox属性，该属性定义了一个窗口，通过该窗口可以看到svg的元素，在这种情况下，viewbox的范围为(0,0)到(600,300)。在SVG空间中，X轴从左侧的零开始，向右增加； Y轴从顶部的零开始，向底部增加。

The first new tag is the <rect /> tag which defines a rectangle in the SVG viewport. In this case we define a square which is 10 units from the top and left and 100 units tall and wide. The fill attribute sets the fill color for the shape.

第一个新标签是<rect />标签，该标签在SVG视口中定义了一个矩形。在这种情况下，我们定义了一个正方形，该正方形从顶部和左侧开始分别为10个单位，从高和宽为100个单位。 fill属性设置形状的填充颜色。

Next we define a circle or oval with the <circle /> tag. The sample defines a circle centered at (240,60) with a radius of 50 units. The stroke and stroke-width attributes set a stroke color and a size for the stroke.

接下来，我们用<circle />标记定义一个圆形或椭圆形。该示例定义了一个以(240,60)为中心的圆，半径为50个单位。 stroke和stroke-width属性设置笔划的颜色和大小。

You can add text to the graphic with the text tag. The sample text is anchored from the middle of the text to a point at (450, 70) and has a font size of 20 units. The nice thing about text in SVG is it will scale with the rest of your graphic, but it is still readable by the browser and web bots.

您可以使用text标签将文本添加到图形中。示例文本从文本的中间锚定到(450，70)处的一点，并且字体大小为20个单位。 SVG中文本的好处是它可以随图形的其余部分缩放，但仍可被浏览器和Web bot读取。

When you want to apply the same attributes or CSS styles to multiple SVG elements you can group them with the <g> tag. Attributes assigned to the <g> tag, like the stroke attribute in the example, will be applied to all elements within the group. In this case three <path /> elements.

当您要将相同的属性或CSS样式应用于多个SVG元素时，可以使用<g>标签将它们分组。分配给<g>标记的属性(如示例中的stroke属性)将应用于组中的所有元素。在这种情况下，三个<path />元素。

The <path /> element defines a vector path in the viewport. The path is defined by the d attribute. In the first example the definition reads ‘move to the absolute coordinate (10, 170) and draw a line to the relative coordinates 590 in the X direction and 0 in the Y direction.

<path />元素在视口中定义矢量路径。路径由d属性定义。在第一个示例中，定义读取为“移动到绝对坐标(10，170)，并在X方向上画一条线到相对坐标590，在Y方向上画一条线到0。

The following commands can be used to create your path:

以下命令可用于创建路径：

M = move to L = line to H = horizontal line to V = vertical line to Z = close path C = (cubic bezier) curve to S = smooth curve to Q = quadratic bezier curve to T = smooth quadratic bezier curve to A = arc

M =移动到L =直线到H =水平线到V =垂直线到Z =闭合路径C =(三次贝塞尔曲线)到S =平滑曲线到Q =二次贝塞尔曲线到T =二次贝塞尔曲线平滑到A =弧

画布元素 (The canvas element)

Canvas graphics can be drawn onto a

画布图形可以绘制到

A context is created through the getContext method on the

上下文是通过getContext方法在

<p > Before canvas . </p >
< canvas width ="120" height ="60" > </ canvas >
<p > After canvas . </p >
< script >
var canvas = document . querySelector (" canvas ") ;
var context = canvas . getContext ("2 d ") ;
context . fillStyle = " red ";
context . fillRect (10 , 10 , 100 , 50) ;
</ script >

After creating the context object, the example draws a red rectangle 100 pixels wide and 50 pixels high, with its top-left corner at coordinates (10,10).

创建上下文对象后，该示例绘制一个100像素宽，50像素高的红色矩形，其左上角位于坐标(10,10)处。

绘制饼图 (Drawing a pie chart)

The results variable contains an array of objects that represent the survey responses.

结果变量包含代表调查响应的对象数组。

var results = [
{ name : " Satisfied " , count : 1043 , color : " lightblue "} ,
{ name : " Neutral " , count : 563 , color : " lightgreen "} ,
{ name : " Unsatisfied " , count : 510 , color : " pink "} ,
{ name : " No comment " , count : 175 , color : " silver "}
];

To draw a pie chart, we draw a number of pie slices, each made up of an arc and a pair of lines to the center of that arc. We can compute the angle taken up by each arc by dividing a full circle (2 π ) by the total number of responses and then multiplying that number (the angle per response) by the number of people who picked a given choice.

要绘制饼图，我们绘制了许多饼图，每个饼图由一个圆弧和指向该圆弧中心的一对线组成。我们可以通过将一个完整的圆(2π)除以响应总数，然后将该数字(每个响应的角度)乘以选择给定选择的人数来计算每个弧所占的角度。

< canvas width ="200" height ="200" > </ canvas >
< script >
var cx = document . querySelector (" canvas ") . getContext ("2 d ") ;
var total = results . reduce ( function ( sum , choice ) {
return sum + choice . count ;
} , 0) ;// Start at the topvar currentAngle = -0.5 * Math . PI ;
results . forEach ( function ( result ) {
var sliceAngle = ( result . count / total ) * 2 * Math . PI ;
cx . beginPath () ;
// center =100 ,100 , radius =100
// from current angle , clockwise by slice ' s angle
cx . arc (100 , 100 , 100 ,
currentAngle , currentAngle + sliceAngle );
currentAngle += sliceAngle ;
cx . lineTo (100 , 100) ;
cx . fillStyle = result . color ;
cx . fill () ;
}) ;
</ script >

This draws the following chart:

得出以下图表：

浏览器支持 (Browser Support)

Browser support for SVG is available in all modern browsers. There are some issues with scaling in IE 9 through IE 11 however they can be overcome with the use of the width, height, viewbox, and CSS.

所有现代浏览器均提供对SVG的浏览器支持。在IE 9到IE 11中，缩放存在一些问题，但是可以通过使用width ， height ， viewbox和CSS来解决。

编者 (Editors)

Vectr - web and desktop tool fot creating and editing SVG graphics, free of charge
Vectr-免费创建和编辑SVG图形的Web和桌面工具

创建SVG的工具 (Tools to create SVG)

There are few tools available to create SVG in the form of drawing program.

几乎没有可用的工具以绘图程序的形式创建SVG。

Inkscape - It is an open source tool for state-of-the-art vector drawing with an easy to use graphical interface.
Inkscape-这是一个用于使用最新技术绘制图形的开源工具，具有易于使用的图形界面。
Adobe Illustrator - Adobe Illustrator is a commercial tool for Vector Imagery.
Adobe Illustrator -Adobe Illustrator是用于Vector Imagery的商业工具。

For more tools, refer to W3C list of tools that supports SVG

有关更多工具，请参阅支持SVG的W3C工具列表。

为什么要使用SVG (Why you should use SVGs)

As a vector image format, it allows you to resize an image without any loss of quality and a particularly light weight. As an XML format, it allows you to benefit from the full power of JavaScript and especially CSS.

作为矢量图像格式，它使您可以调整图像大小，而不会损失质量和特别轻的重量。作为XML格式，它使您可以从JavaScript尤其是CSS的全部功能中受益。