Main elements and attributes of SVG

Main elements and attributes of SVG

<DESC> </DESC> note <! -->

<Defs> </defs> pre-defined <element id = "name"> reference attribute: URL (# name)

<Use xlink: href> </use> reference Element

<Symbol> Template

<Image Width height> width height cannot be saved

Attribute XML: Space = "Default | preserve" Space

Attribute externalresourcerequired = "false | true" external resources are required or not. If it is true, external resources cannot be found.

<Switch> <> select a platform

<Rect x y width height RX ry> RX ry elliptical radius
The Transition Part Of The rounded corner rectangle is a 1/4 Elliptical Arc, representing its half
Long axis and semi-short axis. When only one of "RX" or "ry" is specified, the other default value is equal to this. If none of them are specified, the default value is O.
The four corners of the rectangle are right angles. If the "RX" value is greater than half the width of the rectangle, it is processed as half.

<Circle CX Cy r>

<Ellipse CX Cy RX ry>

<Line X1 Y1 X2 Y2>

<Polyline points = "x0, y0 X1, Y1 ......"> line

<Polygon points = "x0, y0 X1, Y1 ......"> Polygon

<Path d = "M | L | c | S | q | T | A | z" length =>
(]) All drawing commands are represented by only one letter.
(2) spaces between coordinate data and commands can be omitted, but spaces between coordinate data and commands cannot be omitted.
(3) When a command is repeatedly used for multiple times in a row, the command name can only use the first one,
It is omitted later, but the spaces used for data sharding cannot be less.
(4) The command name is the absolute coordinate followed by the data values in the capital letter era table, and the lowercase letter represents the relative coordinate.
(5) When drawing horizontal or vertical line segments, use the H and V commands instead of L. When H or H is used, you only need to add a parameter that represents the X coordinate. Y is the same as the current point. Similarly, when using V or V, you only need to add a parameter that represents the Y coordinate. If the two command letters are followed by multiple values, each value is considered a separate line drawing command, unlike the L and 1 commands, each two values are combined as a coordinate value of a point for processing.
(6) xy coordinates of a pair of coordinate values can be separated by spaces or commas, but the coordinate and coordinate pairs can only be
Use space as the separator.
(7) The path closure command also has two forms: Z and Z. The effect is the same and there is no difference in use. This command does not contain parameters and has simple functions. It draws a straight line from the current point to the start point of the local path.
(8) The S and S commands are the commands used to draw the "smooth" cubic besell curve. A complex curve consists of multiple curve arcs.
The control points of each arc must meet certain conditions. First
The starting point of the section Curve Arc must be the end point of the previous section of the curve arc, otherwise it cannot be connected. Second, the first control of this section of curve arc
The system point must have a symmetric relationship with the second control point of the previous curve arc. The symmetric center is the starting point of the curve arc, only
This ensures the smoothness of the curve. The syntax of the S and S commands is "s X2 Y2 destx desty", omitting the first control point implied by the smooth curve arc.
. After the command is executed, the coordinate of the current vertex also stays at the end of the last curve arc.

The elliptic arc curve command is represented by a or. Its syntax is complex, yes "a rx ry X-axis-rotation large-arc-flag sweep-flag x y" "X-axis-rotation" indicates the X axis and horizontal direction of the elliptic where the arc is located. angle, that is, the rotation angle of the X axis. Large-arc-flag and sweep-flag determine the drawing direction of the elliptical arc. The value is 0 or 1. (x, y) it is the coordinate of the end point of an elliptical arc. The coordinates of the center are automatically calculated.

Viewbox attribute not viewbox default unit measurement

Transform attribute = "translate | rotate | skewx | skewy | scale | matrix (a B c d e f )"

Preserveaspectratio attributes

<Text x y textlength lengthadjust>

<Tspan x y DX dy rotate> from <text>
<SVG>
<Text style = "fill: #000000; font-family: Arial; font-weight: bold; font-size: 40;">
<Tspan x = "50" Y = "60, 70, 80, 80, 75, 60, 80, 70"> communication </tspan>
<Tspan x = "50" Y = "150" dx = "" dy = "10, 10,-10,-10,-10,-10, 10, -10 "> communication </tspan>
<Tspan x = "50" Y = "230" rotate = "10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 90, 90"> communication </tspan>
</Text>
</SVG>

<Tref xlink: href = "#"> reference <text>

<Glyphrun>

<Altglyph xlink: href = "# ID">

<Altglyphdef id = "">

<Glyphref xlink: href = glyphref =>

<Textpath startoffset = method = "align | stretch" spacing = "exact | auto" xlink: href = ""> note that nested <tspan> overlays the subsequent steps.

Fill-Rule attribute fill-Rule = "nonezero | evenodd"

Fill-Opacity attribute fill-Opacity = "1 | 0 ~ 1"

Stroke-Opacity attributes

Stroke-linecap = butt | round | Square

Stroke-linejoin = miter | round | bevel |

Stroke-dasharray = "length spacing"

Stroke-dashoffset = "0 |" indicates the start offset of the stroke template (such as line type and gradient color). The default value is 0, that is, start from scratch.

<Maker makerwidth makerheight makerunits refx refy Orient>

Marker-start: URL (#) marker-mid: URL (#) marker-end: URL (#)

Color-interpolation = "auto | sRGB | linearrgb"

Color-rendering = "auto | optimizespeed | optimizequality"

Shape-rendering = "auto | optimizespeed | cripedges | geometricprecision"

Text-rendering = "auto | optimizespeed | optimizelegibility | geometricprecision"

Image-rendering = "auto | optimizespeed | optimizequality"

<A xlink: href = xlink: TYPE = "simple" xlink: Show = "New | Replace" xlink: Title xlink: actuate = "onrequest" target = "_ top | _ Self">

<? XML-stylesheet href = ". CSS" type = "text/CSS"?>

<Style type = "text/CSS | text/XSL" Media = "screen | print"> <! CDATA []> </style>

<Lineargradient ID X1 Y1 X2 Y2 gradientunits = "objectboundingbox | userspaceonuse" spreadmethod = "Pad | reflect | repeat" xlink: href = "" gradienttransform = ""> it turns out that gradientunits = "objectboundingbox" does not take effect for attributes such as X 1 Y1.

<Radialgradient id cx Cy r fx fy gradientunits = "objectboundingbox | userspaceonuse" spreadmethod = "Pad | reflect | repeat" xlink: href = "" gradienttransform = ""> CX Cy is the center of the shape. fx fy is the color center.

<Stop offset = "<length>" stop-color = "" Stop-Opacity = "">

<Pattern ID x y width height patternunits = "objectboundingbox | userspaceonuse" viewbox = "" patterntransform xlink: href = "" patterntransform = "">

Overflow = "visible | hidden | scroll | auto"

Clip = "rect (x1 Y1 X2 Y2) | auto"

<Clippath ID clippathunits = "objectboundingbox | userspaceonuse" Clip-Path = "url" Clip-Rule = "nonezero | evenodd"> you can also use text as the cropping path, in this case, the "C plus-MLE" parameter should be set to "evenodd" in most cases, because the text outlines are usually cross.

<Mask ID maskunits = "objectboundingbox | userspaceonuse" x = y = width height mask = "URL ()">

Opacity = inheritance and superposition

--------------------------------------------------------------------------

Network vector graphics standard-SVG
Introduction: the powerful support of SVG (Scalable Vector Graphics) in many industry leaders (especially Adobe, the vanguard of the publishing and printing industry)
Under implementation. I believe in Adobe's ability and vision. from a historical point of view, many of Adobe's technologies have become part of the industry.
Real industrial standards or leading products, such as PostScript Language, PDF file format, and Photoshop. SVG in view of the printing industry
Users do not know much about XML and HTML. This article will introduce SVG, a very promising unified image, with simple examples,
All-new vector format for images.

1.1 canvas and window
-The canvas is the place where SVG images are drawn and the place where the images are colored. SVG also defines the canvas shape and coloring order and
Measures taken for the covered shape. The SVG standard calls its retouching model "painters model", meaning that
The content of the first painting will be overwritten by the subsequent shapes. Draw shape and line Order on the canvas by them in the SVG document
. As shown in the following example.
Example 1:
<SVG width = "200" Height = "200"> <! -- Defines the size of the canvas as 200 pixels x pixels (starting from the top left) -->
<Rect width = "20" Height = "20" x = "20" Y = "20"/> <! -- Draw the first rectangle, X and Y as the starting coordinate, height,
Width is the size. -->
<Rect width = "20" Height = "20" x = "24" Y = "24" fill = "red"/> <! -- Draw the second rectangle, fill in red, partially
Overwrite the first rectangle -->
</SVG>
1.2 Coordinate System
All paintings are relative to the upper left corner of the coordinate (0, 0). The coordinates not specified during painting start from the origin (0, 0.
1.3 Style
You can use css2 (Cascading Style Sheet) or XSL (Extensible style language) to provide style functions when defining attributes.
Structure and functions of SVG documents
2.1 shape and line
2.1.1 rectangle
In example 1, the <rect> element draws a rectangle and is a horizontal rectangle. If you draw a rounded rectangle, you need to add the RX and ry Attribute Table rounded corners X and Y axes.
Radius.
2.1.2 circle
Use the <circle> element to draw a circle. See example 2.
Example 2
& Lt; SVG Height = "400" width = "400" & gt;
<Circle Cx = "200" Cy = "200" r = "100" fill = "red" stroke = "black"/> <! -- Draw a half Based on the point (200,200)
Circle with a diameter of 100 pixels, filled with red and black lines
</SVG>
2.1.3 lines
Draw a line with <line> elements. Connect from one point to another.
Example 3
<SVG width = "200" Height = "200">
<Line X1 = "0" Y1 = "100" X2 = "100" y2 = "200"/> <! -- Connection (0,100) (100,200) -->
</SVG>