Go to SVG and go to xiuxian.

Go to SVG and go to xiuxian.

What is SVG? Many people may have heard about SVG, but they do not necessarily know what SVG is: SVG (a string of Scalable Vector Graphics that cannot be understood in English) Scalable Vector Graphics, it defines vector-based images for the network in XML format, and its feature is that the image quality will not be lost when the image is enlarged or changed in size, at the same time, he and DOM are both W3C standards.

Here we will explain bitmap and vector map:

Bitmap is the image we often see. It is a collection of densely arranged shops on a plane, that is, it is composed of vertices. If you zoom in on the image, the corresponding point will be zoomed in, which will make the image very unclear and rough.

Vector graphs, also known as object-oriented images or graphic images, are mathematical defined as a series of points connected by lines. The graphic elements in a Vector file are called objects. Each object is a self-contained entity with attributes such as color, shape, outline, size, and screen position. It features that the enlarged image will not be distorted and has nothing to do with the resolution. It is suitable for graphic design, text design and some logo design and layout design. Vector image formats include CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, and VML.

(Ps: The content below this essay is partly from W3Cschool) A simple 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 SVG code starts with <svg> elements, including enable tags <svg> and disable tags </svg>. This is the root element. 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.

The function of disabling tags is to disable SVG elements and the document itself.

Note:All enabled tags must be disabled!

Advantages of SVG

• SVG can be read and modified by many tools (or easily opened and modified in Notepad)
• SVG is smaller in size and more compact than JPEG and GIF images.
• SVG is scalable
• SVG images can be printed with high quality at any resolution
• SVG can be amplified without decreasing the image quality
• The text in SVG images is optional and searchable (suitable for creating maps)
• SVG can run together with Java and other technologies
• SVG is an open standard
• SVG files are pure XML

SVG files can be embedded into HTML documents using the following tags: <embed>, <object>, or <iframe>.

SVG code can be directly embedded into HTML pages, or you can directly link to SVG files.

Rectangle <rect>

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" rx="20" ry="20" width="250"height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/></svg>

• The width and height attributes of the rect element can define the height and width of the rectangle.

• The style attribute is used to define CSS attributes.

• The fill attribute of CSS defines the fill color of the rectangle (rgb value, color name, or hexadecimal value)

• The stroke-width attribute of CSS defines the width of the rectangle border.

• The stroke attribute of CSS defines the color of the rectangle border.

• The x property defines the left position of the rectangle (for example, x = "0" defines the distance between the rectangle and the left side of the browser window is 0 px)

• The y property defines the top position of the rectangle (for example, y = "0" defines the distance from the rectangle to the top of the browser window is 0 px)

• The fill-opacity attribute of CSS defines the fill color transparency (valid range: 0-1)

• The stroke-opacity attribute of CSS defines the transparency of the stroke color (valid range: 0-1)

• The CSS opacity attribute defines the transparency value of an element (range: 0 to 1 ).

• The rx and ry attributes generate rounded corners for the rectangle.

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>

• The cx and cy attributes define the x and y coordinates of dots. If cx and cy are omitted, the center of the circle is set to (0, 0)

• The r attribute defines the circle radius.

Elliptic <ellipse>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/></svg>

• X coordinate of the elliptical center defined by the CX attribute

• Y coordinate of the center of the elliptic defined by CY attribute

• Horizontal radius defined by the RX attribute

• Vertical radius defined by the RY attribute

Line <line>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <line x1="0" y1="0" x2="200" y2="200"  style="stroke:rgb(255,0,0);stroke-width:2"/></svg>

• 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 ends when the x axis defines the line.

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

Polygon

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polygon points="200,10 250,190 160,210"  style="fill:lime;stroke:purple;stroke-width:1"/></svg>

• The points attribute defines the x and y coordinates of each corner of a polygon.

Line <polyline> (used to create any shape with only a straight line)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"  style="fill:none;stroke:black;stroke-width:3" /></svg>

Path <path>

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

 

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

Note:All the preceding commands can contain lowercase letters. Upper case indicates absolute positioning, and lower case indicates relative positioning.

Text <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>

SVG Filter

The available filters for SVG are:

• FeBlend-filters combined with images
• FeColorMatrix-used for Color Filter Conversion
• FeComponentTransfer
• FeComposite
• FeConvolveMatrix
• FeDiffuseLighting
• FeDisplacementMap
• FeFlood
• FeGaussianBlur
• FeImage
• FeMerge
• FeMorphology
• FeOffset-filter shadows
• FeSpecularLighting
• FeTile
• FeTurbulence
• FeDistantLight-used for lighting Filtering
• FePointLight-used for lighting Filtering
• FeSpotLight-used for lighting Filtering

In addition, you can use multiple filters on each SVG element!

<Defs> and <filter>

All Internet SVG filters are defined in the <defs> element. <Defs> the Element Definition is short and contains special elements (such as filters.

<Filter> tags are used to define SVG filters. <Filter> the tag uses the required id attribute to define which filter is applied to the image?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <filter id="f1" x="0" y="0">      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />    </filter>  </defs>  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" /></svg>

• <Filter> the element id attribute defines the unique name of a filter.

• <FeGaussianBlur> blur the Element Definition

• In = "SourceGraphic" defines the effect created by the entire image.

• StdDeviation attribute definition fuzzy quantity

• <Rect> the filter attribute of an element is used to link the element to the f1 filter.

SVG <feOffset>

<FeOffset> an element is used to create a shadow effect. Our idea is to take an SVG image (image or element) and move it a little bit on the xy plane.

In the first example, offset a rectangle (with <feOffset>) and then offset the image top (with <feBlend> ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <filter id="f1" x="0" y="0" width="200%" height="200%">      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />    </filter>  </defs>  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" /></svg>

• <Filter> the element id attribute defines the unique name of a filter.
• <Rect> the filter attribute of an element is used to link the element to the f1 filter.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <filter id="f1" x="0" y="0" width="200%" height="200%">      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />    </filter>  </defs>  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" /></svg>

• The stdDeviation attribute of the <feGaussianBlur> element defines the fuzzy amount.

SVG gradient

A gradient is a smooth transition from one color to another. In addition, the transition of multiple colors can be applied to the same element.

There are two main types of SVG gradient:

• Linear

• Radial

SVG linear gradient-<linearGradient>

The <linearGradient> element is used to define a linear gradient.

<LinearGradient> labels must be nested inside <defs>. <Defs> A tag is short for definitions. It can be used to define special elements such as gradient.

A linear gradient can be defined as a horizontal, vertical, or angular gradient:

• You can create a horizontal gradient when y1 and y2 are equal, while x1 and x2 are different.

• You can create a vertical gradient when x1 and x2 are equal, while y1 and y2 are different.

• When x1 and x2 are different and y1 and y2 are different, you can create an angular gradient.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />    </linearGradient>  </defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg>

• The id attribute of the <linearGradient> label defines a unique name for the gradient.

• The X1, X2, Y1, and Y2 attributes of the <linearGradient> label define the start and end positions of the gradient.

• The gradient color range can be composed of two or more colors. Each color is specified by a <stop> label. The offset attribute defines the start and end positions of the gradient.

• The fill property links the ellipse element to this gradient

SVG radioactive gradient-<radialGradient>

The <radialGradient> element is used to define a radioactive gradient.

<RadialGradient> labels must be nested inside <defs>. <Defs> A tag is short for definitions. It can be used to define special elements such as gradient.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">      <stop offset="0%" style="stop-color:rgb(255,255,255);      stop-opacity:0" />      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />    </radialGradient>  </defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg>

• The id attribute of the <radialGradient> label defines a unique name for the gradient.

• CX, CY, and r attributes define the outermost circle and the innermost circle defined by Fx and Fy.

• The gradient color range can be composed of two or more colors. Each color is specified with a <stop> label. The offset attribute is used to define the start and end of gradient.

• The fill property links the ellipse element to this gradient

Cainiao tutorial online instance: http://www.runoob.com/svg/svg-examples.html