SVG self-organizing and SVG sorting

SVG self-organizing and SVG sorting
1. What is SVG?

SVG refers to Scalable Vector Graphics)

SVG is used to define vector-Based Graphics for Networks

SVG defines images in XML format

The image quality of SVG images is not lost when they are enlarged or changed.

2. Simple SVG instance

A simple SVG graphic example:

Here is the SVG file (storage of SVG files and extension of SVG ):

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>

SVG code parsing:

• The first line contains the XML declaration. Pay attention to the standalone attribute! This attribute specifies whether the SVG file is "independent" or contains references to external files. Standalone = "no" means that the SVG document references an external file-here, it is a DTD file.
• The second and third rows reference the external svg dtd. The DTD is located in the http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd ". This DTD is located in W3C and contains all the allowed SVG elements.
• The width and height attributes can be used to set the width and height of the SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace.
• <Circle> of SVG is used to create a circle. The cx and cy attributes define the x and y coordinates of the circle center. If the two attributes are ignored, the dot is set to (0, 0 ). The r attribute defines the radius of the circle.
• The stroke and stroke-width attributes control how to display the shape outline. We set the contour of the circle to 2px width and black border.
• Set the color in the shape in the fill attribute. We set the fill color to red.

3. SVG rectangle-<rect>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/></svg>

4. SVG circle-<circle>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg>

5. SVG Elliptic-<ellipse>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/></svg>

6. SVG straight line-<line>

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

// The x1 attribute defines the start of a line on the x axis.

// The y1 attribute defines the start of a line on the y axis.

// The x2 attribute defines the end of a line on the x axis.

// The y2 attribute defines the end of a line on the y axis.

<Line x1 = "0" y1 = "0" x2 = "200" y2 = "200" style = "stroke: rgb (, 0); stroke-width: 2 "/>

</Svg>

7. SVG path-<path>

The <path> element defines a path.

The following command can be used for path data:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic bégiscurve
• T = smooth quadratic bégiscurveto
• A = elliptical Arc
• Z = closepath

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <path d="M150 0 L75 200 L225 200 Z" /></svg>

For more information about command usage, see: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

Svg animation refer to: http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

8. SVG text-<text>

<! -- Common text -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <text x="0" y="15" fill="red">I love SVG</text></svg>

<! -- Rotate text -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text></svg>

<! -- Link text -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">     <text x="0" y="15" fill="red">I love SVG</text>  </a></svg>

// Add the following order for other usage