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的全部功能中受益。