svg 란 무엇입니까? 일반적으로 사용되는 svg 메서드(코드 포함)

이 기사에서는 SVG가 무엇인지 설명합니다. 일반적으로 사용되는 svg(코드 포함) 방법에는 특정 참조 값이 있으므로 도움이 필요한 친구가 참조할 수 있기를 바랍니다.

SVG란 무엇인가요?
SVG는 Scalable Vector Graphics의 약어입니다.
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG는 XML 형식을 사용하여 그래픽을 정의합니다.
SVG 이미지의 그래픽 품질은 확대되거나 크기가 조정되더라도 변경되지 않습니다.
SVG는 World Wide Web Consortium의 표준
SVG는 DOM 및 XSL과 같은 W3C 표준과 통합됩니다.

다른 이미지 형식과 비교할 때 SVG 사용의 장점은 다음과 같습니다.
SVG는 메모장과 같은 다양한 도구로 읽고 수정할 수 있습니다.
JPEG 및 GIF 이미지와 비교하여 SVG는 크기가 더 작고 압축 가능성이 더 높습니다.
SVG는 확장 가능
SVG 이미지는 모든 해상도에서 고품질로 인쇄 가능
SVG는 이미지 품질 저하 없이 확대 가능
SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합)
SVG는 Java 기술로 실행 가능
SVG는 개방형 표준

SVG 파일은 순수 XML입니다.

코드 구조

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

SVG에서 제공하는 사전 정의된 모양 요소의 사용 및 조작:

b4bf76d38c0ddeed94a3943f1fc9c8ad 태그를 사용하여 직사각형 및 직사각형의 변형을 만들 수 있습니다.

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

코드 설명:
1) 직사각형 요소의 너비 및 높이 속성은 직사각형의 높이와 너비를 정의할 수 있습니다.

2) 스타일 속성은 CSS 속성을 정의하는 데 사용됩니다.

3) CSS의 채우기 속성은 직사각형의 채우기 색상(rgb 값, 색상 이름 또는 16진수 값)
4) CSS의 획 너비 속성은 직사각형 테두리의 너비를 정의합니다.
5) CSS의 획 속성 정의 직사각형 테두리의 색상
6 ) x 속성은 직사각형의 왼쪽 위치를 정의합니다(예: x="0"은 직사각형에서 브라우저 창 왼쪽까지의 거리를 0px로 정의합니다.)
7) y 속성은 사각형의 상단 위치를 정의합니다. 직사각형(예를 들어 y="0"은 직사각형에서 브라우저 창 상단까지의 거리가 0px임을 정의합니다.)
8) CSS의 fill-opacity 속성은 채우기 색상 투명도를 정의합니다(적용 범위: 0 - 1)
9) CSS의 획 불투명도 속성은 획 색상 투명도를 정의합니다(적용 범위: 0 - 1)
10) rx 및 ry 속성은 사각형의 모서리가 둥글게 만들 수 있습니다.



30de22e41cb8eb8fbfdc1f091d85e4be 태그를 사용하여 원

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

코드 설명:
1) cx 및 cy 속성은 원 점의 x 및 y 좌표를 정의합니다. cx와 cy가 생략되면 원의 중심은 (0, 0)

2)r로 설정됩니다. r 속성은 원의 반경을 정의합니다.

d9b42b40d0fdc429c7c48871eea4816c 태그를 사용하여 타원을 만들 수 있습니다

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

코드 설명:
1)cx 속성은 점의 x 좌표를 정의합니다.

2)cy 속성은 점의 y 좌표를 정의합니다. point

3)rx 속성은 수평 반경을 정의합니다
4)ry 속성은 수직 반경을 정의합니다


15a73cc5312745b1b00671f6e690e36a 선을 만드는 데 사용됩니다

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

코드 설명:
1)x1 속성은 x축의 선

2) y1 속성은 y축의 선의 시작을 정의합니다. 3) x2 속성은 x축의 선의 끝을 정의합니다. 4) y2 속성은 끝을 정의합니다. 측면이 있는 그래픽

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

코드 설명:

1) 점 속성은 다각형

ce803ba1a4290bddb3ba9c6f57d4c9b4 직선만 포함하는 모양을 만드는 데 사용됩니다

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

코드 설명:

1) points 속성은 각 선분의 각 모서리의 x 및 y 좌표를 정의합니다.

98953a78f52873edae60a617ec082494 아래 경로

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

을 정의하려면 경로 데이터에 사용할 수 있는 명령은 다음과 같습니다.

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

참고: 위의 모든 명령에는 소문자를 사용할 수 있습니다. 대문자는 절대 위치를 의미하고, 소문자는 상대 위치를 의미합니다.

SVG 필터 사용 가능한 필터는 다음과 같습니다:

feBlend

feColorMatrix

feComponentTransfer
feComposite

feConvolveMatrix

feDiffuseLightingfeDisplacementMapfeFlood

feGa Blur

feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight



가우스 흐림Gaussian 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实现画出一朵花（附代码）

위 내용은 svg 란 무엇입니까? 일반적으로 사용되는 svg 메서드(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!