What is svg? Commonly used methods of svg (with code)

This article brings you what is SVG? The commonly used methods of svg (with code) have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the web
SVG uses XML format to define graphics
SVG images are enlarged or resized There will be no loss in graphic quality
SVG is a standard of the World Wide Web Consortium
SVG is an integral part of W3C standards such as DOM and XSL

Compared with other image formats, using SVG The advantage is:
SVG can be read and modified by many tools (such as Notepad)
Compared with JPEG and GIF images, SVG is smaller in size and more compressible.
SVG is scalable
SVG images can be printed with high quality at any resolution
SVG can be enlarged without losing image quality
Text in SVG images is scalable optional, and also searchable (great for making maps)
SVG can run with Java technology
SVG is an open standard

SVG files are pure XML

Code structure

422c3ebf87b39009776eca69aca0a0b8
6c04bd5ca3fcae76e30b72ad730ca86d
 
e388a4556c0f65e1904146cc1a846beeThis is an HTML paragraph94b3e26ee717c64999d7867364b1b4a3
 
ebb178b4b6c1a8cb89c091aaafc34159
725a7b21fa8cf5d6becde54634815ffa
d6fc9cdcb501326c88994993872f8701
 
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Use and operation of predefined shape elements provided by SVG:

4f5c91326734be5b874f0369b6cec59d tag can be used to create rectangles, as well as variants of rectangles

<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

Code explanation:
1) The width and height attributes of the rect element can define the height and width of the rectangle
2) The style attribute is used to Define CSS properties
3)CSS fill property defines the fill color of the rectangle (rgb value, color name or hexadecimal value)
4)CSS stroke-width property defines the width of the rectangle border
5 )CSS stroke attribute defines the color of the rectangle border
6)x attribute defines the left position of the rectangle (for example, x="0" defines the distance from the rectangle to the left side of the browser window to be 0px)
7)y The 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 to be 0px)
8) The CSS fill-opacity attribute defines the fill color transparency (the legal range is: 0 - 1 )
9) The stroke-opacity attribute of CSS defines the transparency of the stroke color (the legal range is: 0 - 1)
10) The rx and ry attributes can make the rectangle have rounded corners.

30de22e41cb8eb8fbfdc1f091d85e4be tag can be used to create a circle

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

Code explanation:
1) The cx and cy attributes define the x and y coordinates of the point. If cx and cy are omitted, the center of the circle is set to (0, 0)
2)r. The r attribute defines the radius of the circle.

d9b42b40d0fdc429c7c48871eea4816c tag can be used to create ellipses

##

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

Code explanation:

1 )cx attribute defines the x coordinate of the point
2)cy attribute defines the y coordinate of the point
3)rx attribute defines the horizontal radius
4)ry attribute defines the vertical radius

15a73cc5312745b1b00671f6e690e36a tag is used to create lines

##

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

Code explanation:

1)x1 attribute defines the start of the line on the x-axis

2)y1 attribute defines the start of the line on the y-axis
3)x2 attribute defines the end of the line on the x-axis
4)y2 attribute defines the end of the line on the y-axis

6f1cb7f8499a7e0f625f982868cbc44d tag is used to create graphics with no less than three sides

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

Code explanation:

1) The points attribute defines the x and y coordinates of each corner of the polygon

ce803ba1a4290bddb3ba9c6f57d4c9b4 tag is used to create a shape containing only straight lines

##

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  style="fill:white;stroke:red;stroke-width:2"/>

Code explanation:
1) The points attribute defines the x and y coordinates of each corner of each segment of the line

98953a78f52873edae60a617ec082494 tag is used to define the path

<path d="M250 150 L150 350 L350 350 Z" />

The following commands can be used for path data:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

Comments : All the above commands allow lowercase letters. Upper case means absolute positioning, lower case means relative positioning

SVG filter Available filters are:

feBlendfeColorMatrix

feComponentTransfer

feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight



Gaussian BlurGaussian Blur

1d24e586ca31f4bd05eca427459d98c7 标签用来定义 SVG 滤镜。1d24e586ca31f4bd05eca427459d98c7 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
1d24e586ca31f4bd05eca427459d98c7 标签必须嵌套在 9f9d05a576cea0d265e9d798da82bdec 标签内。9f9d05a576cea0d265e9d798da82bdec 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

代码解释：
1)1d24e586ca31f4bd05eca427459d98c7 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过 ad11e455a1398b09cace1648f731f602 标签进行定义的。fe 后缀可用于所有的滤镜
4)ad11e455a1398b09cace1648f731f602 标签的 stdDeviation 属性可定义模糊的程度
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

bffa9ad35fc32d811cd3bf50cdea268e 可用来定义 SVG 的线性渐变

bffa9ad35fc32d811cd3bf50cdea268e 标签必须嵌套在 9f9d05a576cea0d265e9d798da82bdec 的内部。9f9d05a576cea0d265e9d798da82bdec 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>

代码解释：
1)bffa9ad35fc32d811cd3bf50cdea268e 标签的 id 属性可为渐变定义一个唯一的名称
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3)bffa9ad35fc32d811cd3bf50cdea268e 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 6b22e4f809621b65b94f163c16b42e35 标签来规定。offset 属性用来定义渐变的开始和结束位置。

0649cc1cc16c8306177acf255def2211 用来定义放射性渐变

0649cc1cc16c8306177acf255def2211 标签必须嵌套在 9f9d05a576cea0d265e9d798da82bdec 中。9f9d05a576cea0d265e9d798da82bdec 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

代码解释：
1)0649cc1cc16c8306177acf255def2211 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 6b22e4f809621b65b94f163c16b42e35 标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变

a7121d48c316f728a47bbecf3a7063fd

  a621bf16da020740c635caa581263430
    46d89249be8c78da1fd3893f45bde870
    f4c3b6cd438b80e29d9f5a6bed69ce8e
    c463ca39b3fa7eed4fe47128078c87a4
  e283b8d45af6d064ef80ffba8eeee854

de28f444098d408d960da4dccff3a948

相关文章推荐：

svg中的symbol如何制作icon

SVG画图功能：svg实现画出一朵花（附代码）

The above is the detailed content of What is svg? Commonly used methods of svg (with code). For more information, please follow other related articles on the PHP Chinese website!