SVG vector graphics: use label codes to draw pictures

canvas: It is a technology developed by H5, using JS to draw pictures (both SVG and canvas are codes)

img: is a picture, is the picture code

SVG is a scalable vector graphics (that is, use tag codes to draw pictures), which is based on XML and is used to describe the language of graphics ;

Unlike matrix images (JPG, PNG, GIF) that are drawn by pixels, SVG is resolution-independent;

SVG images can be created and manipulated through JS and DOM manipulation;

SVG has its own huge syntax and great complexity, we just understand this image format here;

2. SVG example

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>

</svg>

SVG code analysis:

SVG code begins with the <svg> element, including opening <svg> and closing tags</svg> . This is the root element. The width and height properties set the width and height of this SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace.

The <rect> of SVG is used to create a rectangle, and the background color is set to yellow by fill.

SVG's <circle> is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If these two properties are omitted, the dot will be set to (0, 0), and the r property defines the radius of the circle. A green circle <circle> with a radius of 80px is drawn in the very center of the red rectangle (offset 150px to the right and 115px down).

The stroke and stroke-width properties control how the shape's outline is displayed. We set the outline of the circle to be 4px wide with a red border.

The fill property sets the color inside the shape. We set the fill color to red.

The closing tag </svg> closes both the SVG element and the document itself.

Note: All opening tags must have a closing tag!

3. SVG in HTML

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

The SVG code can be embedded directly into the HTML page, or you can link directly to the SVG file.

4. SVG rectangle - <rect>

The width and height attributes of the rect element define the height and width of the rectangle

The style attribute is used to define CSS properties

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

CSS's stroke-width property defines the width of the rectangle's border

The stroke property of CSS defines the color of the border of the rectangle

The x attribute defines the left position of the rectangle (for example, x="0" defines the distance of the rectangle from the left side of the browser window to be 0px)

The y attribute 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 0px)

The fill-opacity property of CSS defines the fill color transparency (legal range: 0 - 1)

The CSS stroke-opacity property defines the transparency of the outline color (legal range: 0 - 1)

The CSS opacity property is used to define the transparency value of an element (range: 0 to 1).

The rx and ry attributes make the rectangle rounded.

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

<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;opacity:0.5"/>
</svg>

5. SVG circle - <circle>

The cx and cy attributes define the x and y coordinates of the dot. If cx and cy are omitted, the center of the circle will be set to (0, 0)
The r attribute defines the radius of the 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>

6. SVG ellipse - <ellipse>

The x-coordinate of the center of the ellipse defined by the CX property
The y-coordinate of the center of the ellipse defined by the CY attribute
The horizontal radius defined by the RX property
The vertical radius defined by the RY attribute

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>

7. SVG straight line - <line>

The x1 attribute defines the start of the line on the x-axis
The y1 attribute defines the start of the line on the y-axis
The x2 property defines the end of the line on the x-axis
The y2 property defines the end of the line on the y-axis

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

8. SVG polygon - <polygon>

create a pentagram

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

9. SVG polyline - <polyline>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

10. SVG path - <path>

The <path> element is used to define a path.

The following commands are available for path data:

M = moveto
L = lineto
H = horizontal line
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
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>

11. SVG text - <text>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
</svg>

12. SVG Stroke attribute

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

13. SVG filter

14. SVG blur effect - <defs> and <filter>

15. SVG shadows - <defs> and <filter>

16. SVG linear gradient - <linearGradient>

17. SVG radial gradient- <radialGradient>

18. svg verification code

You can also see how to use the manual on the official website:

svg-captcha - npm

Implement verification code using svg-captcha third-party module

1. Download
cnpm i --save svg-captcha
or write: npm i svg-captcha

2. Import and generate verification code

//Service文件:或者 controller下的user.js中
'use strict';
const Service = require('egg').Service;
const svgCaptcha = require('svg-captcha');   //核心==>引入
class ToolsService extends Service {
    // 产生验证码
    async captcha() {
        const captcha = svgCaptcha.create({   //核心==>设置验证码的样式
            size: 4, //随机字符串的个数
            fontSize: 50,
            width: 100,
            height: 40,
            background: '#cc9966'
        });
        this.ctx.session.code = captcha.text;//缓存验证码中的文字
        return captcha;//返回验证码
    }
}
module.exports = ToolsService;

//控制器文件:
    async coder() {
        const {ctx} = this;
        let captcha = await this.service.tools.captcha(); // Service里面的方法
        ctx.body = captcha.data; // 返回一张svg图片
    }

SVG (SVG concept, SVG example, SVG in HTML, SVG rectangle, SVG circle, SVG ellipse, SVG line, SVG polygon, svg verification code)

1. The concept of SVG