SVG

1. SVG, or Scalable Vector Graphics, is a Graphics technology.

SVG uses XML format to define images.

3, scalable, without distortion.

A simple example:

<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>
Copy the code

1. Structure of SVG

It is a standard XML document structure.

<?xml version="1.0" standalone="no"? >

      

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

Copy the code

Include:

1. XML declaration.

DOCTYPE declaration. A DTD is a standard format for constraining XML files.

3, and a graphical description of an SVG tag package.

2. Embed HTML

The first: the <embed /> tag

<embed src="circle1.svg" type="image/svg+xml" />
Copy the code

The second is the <object /> tag

<object data="circle1.svg" type="image/svg+xml"></object>
Copy the code

Third: <iframe /> tag

<iframe src="circle1.svg"></iframe>
Copy the code

Finally, you can also use the A tag to link to an SVG file.

<a href="circle1.svg">View SVG file</a>
Copy the code

Tips: Browsers can display SVG graphics directly.

Differences and advantages:

For compatibility reasons, it is better to display SVG using Object. Object does not support JS scripts.

From a scripting perspective, it is better to use embed and iframe.

3. SVG rectangle — rect

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="The fill: RGB (0,0,255); stroke-width:1; Stroke: RGB (0, 0)."/>
</svg>
Copy the code

Rectangle, whose label is RECT.

Related attributes: width, height, style, class, x, y, rx, RY.

X and y are the rectangles of SVG, respectively, and the offset distance relative to SVG.

Rx and ry indicate adding rounded corners to the rectangle.

Both Style and class are written to the current SVG.

Common style attributes are as follows:

.svg {
    width: 100px;
    height: 100px;
    fill: rgb(0,0,255);
    stroke-width: 1;
    stroke: black;
    fill-opacity: 1;
    stroke-opacity: 1;
}
Copy the code

Fill indicates the fill color. Stroke-width indicates the border width of the graph. Stroke represents the border color.

Opacity of the fill color stroke-opacity of the border on which opacity is expressed

4. SVG circle — Circle

He has the following attributes:

Cx and cy represent the coordinate points of the circle.

R is the radius of the circle

5. SVG ellipse — Ellipse

<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
Copy the code

Cx and cy represent the coordinate center, rx and ry represent the horizontal and vertical axes.

6, SVG line — line

<line x1="0" y1="0" x2="200" y2="200"
  style="Stroke: RGB (0, 255); stroke-width:2"/>
Copy the code

X1 and y1 represent the starting point.

X2 and y2 indicate the end point.

7. SVG polygon — ploygon

<polygon points="200, 250190, 160210"
  style="fill:lime; stroke:purple; stroke-width:1"/>
Copy the code

fill-rule: nonzero

fill-rule: evenodd

Represents the rendering rule for overlapped parts!

8. SVG curve — Ployline

The element is used to create any shape that has only a straight line

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none; stroke:black; stroke-width:3" />
Copy the code

9, SVG path — path

Path rules

M = moveto L = lineto H = horizontal lineto V = vertical lineto C = Curveto S = smooth curveto Q = quadratic Bezier Curve T = smooth quadratic Bezier curveto A = Octagon Arc Z = Closepath

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

10, SVG text — text

Basic use:

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

Rotate :transform=”rotate(30, 20,40)”

<text x="0" y="15" fill="red" transform="Rotate 20 (30, 40)">I love SVG</text>
Copy the code

The stroke property of SVG

Stroke, defines color.

Stroke-width defines the width.

Stroke-linecap has butt, round, and square values.

Stroke-dasharray, defines dashed lines. Use special rules.

SVG filter

1. SVG filters are used to add special effects to SVG graphics.

2, two tags: <defs> and <filter>

3, filter, represents a rule, let your graphics in accordance with the rules you want to display!

4. The filter tag defines an SVG filter.

5, All SVG filters should be placed in the DEFS tag.

Basic examples:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <rect filter="url(#f1)" class="svg"/>
</svg>
Copy the code

Description:

FeGaussianBlur: defines the blur effect of a graph.
In =”SourceGraphic”, indicating that this section creates the effect from the entire image.
StdDeviation, defined the fuzzy quantity, indicating the expansion effect on the original graph.
The Fitler property links the current graph to the defined rule.
The x attribute of the filter tag: represents horizontal compression. Y attribute: indicates vertical compression.

SVG shadow — feOffset

FeOffset label, which forms an offset graph.

The feBlend tag represents the filter to be combined with the image. Or you could view it as generating an original image.

The feColorMatrix tag renders the color to the element.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
            <feColorMatrix result="matrixOut" in="blurOut" type="matrix"
                           values="0.2 0 0 0 0 0 0 0 0.2 0 0 0 0 0 0 0 0 0 0 0 1 0" />
            <feBlend in="SourceGraphic" in2="matrixOut" mode="normal" />
        </filter>
    </defs>
    <rect filter="url(#f1)" class="svg"/>
</svg>
Copy the code

SVG linearGradient

LinearGradient, which means a linearGradient. You need to set four values: x1, y1, x2, and y2.

X represents the process of horizontal gradient and Y represents the process of vertical gradient.

Internally, you need two stop tags, and you need to set the color (style) and position (offset).

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="Stop - color: RGB (255255, 0). stop-opacity:1" />
        <stop offset="100%" style="Stop - color: RGB (0, 255); stop-opacity:1" />
    </linearGradient>
</defs>

<rect fill="url(#grad1)" class="svg"/>
Copy the code

15, SVG radioactive gradient — radialGradient

RadialGradient is defined as the gradient from center to periphery.

The outermost circle defined by the CX, CY, and R attributes and the innermost circle defined by Fx and Fy.

<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)" />
Copy the code

16. SVG Reference Manual

www.runoob.com/svg/svg-ref…

17. Thinking and summarizing (realistic application scenario)

SVG drawing, can draw some simple, regular graphics, and to these graphics, text some filter effects.
On the difference between SVG and Canvas.

1. SVG can’t draw pictures, canvas can. SVG is drawn using XML, while Canvas is drawn using JS

2. Canvas is rendered pixel by pixel through JS. That is, it can draw a complex graph as well as a simple graph.

SVG is rendered in XML. Its nature is DOM, and complex graphics can degrade rendering performance.

3. Canvas is resolution-dependent and a scalar graph. So when scaling, there are distortion problems.

When SVG is drawn, it does not depend on resolution and is a vector graph. So when SVG is scaled, it does not distort the image.

SVG is suitable for applications with large rendering areas, such as Google Maps, Baidu Maps.

Canvas is suitable for object-intensive game applications.

Original address: github.com/liwudi/fron…

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Front-end visualization — SVG vector graphics technology

SVG

1. Structure of SVG

2. Embed HTML

3. SVG rectangle — rect

4. SVG circle — Circle

5. SVG ellipse — Ellipse

6, SVG line — line

7. SVG polygon — ploygon

8. SVG curve — Ployline

9, SVG path — path

10, SVG text — text

The stroke property of SVG

SVG filter

SVG shadow — feOffset

SVG linearGradient

15, SVG radioactive gradient — radialGradient

16. SVG Reference Manual

17. Thinking and summarizing (realistic application scenario)

Front-end visualization — SVG vector graphics technology

SVG

1. Structure of SVG

2. Embed HTML

3. SVG rectangle — rect

4. SVG circle — Circle

5. SVG ellipse — Ellipse

6, SVG line — line

7. SVG polygon — ploygon

8. SVG curve — Ployline

9, SVG path — path

10, SVG text — text

The stroke property of SVG

SVG filter

SVG shadow — feOffset

SVG linearGradient

15, SVG radioactive gradient — radialGradient

16. SVG Reference Manual

17. Thinking and summarizing (realistic application scenario)

Related Posts

Baidu Programmer development guide to avoid pit (3)

What can you do with blocked cross-domain requests?

Front-end gitLab’s initial ATTEMPT at CI