html5의 svg 란 무엇입니까?

HTML5에서 svg는 웹용 벡터 기반 그래픽을 정의하기 위해 XML 형식을 사용하는 그리기 방법인 Scalable Vector Graphics를 나타냅니다. SVG 사용의 이점: 1. 해상도에 독립적이고 무한히 확장 가능합니다. 2. CSS 또는 JS를 통해 도면에 다양한 애니메이션 및 상호 작용을 추가하도록 스크립트를 작성할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

Html5에는 두 가지 그리기 방법이 있습니다. 하나는 Canvas이고 다른 하나는 SVG입니다. 이 기사에서는 html5 svg의 응용 프로그램에 대해 간략하게 소개합니다.

1. SVG란 무엇인가요?

SVG는 Scalable Vector Graphics를 말하며 웹용 벡터 기반 그래픽을 정의하는 데 사용되며 XML 형식을 사용하여 그래픽을 정의합니다. SVG 이미지는 그래픽 품질 저하 없이 확대하거나 크기를 조정할 수 있습니다. 또한 SVG는 World Wide Web Consortium 표준이며 SVG는 DOM 및 XSL과 같은 W3C 표준과 통합되어 있습니다. 2003년 1월에 SVG 1.1이 W3C 표준으로 확립되었습니다. 다른 이미지 형식과 비교할 때 SVG를 사용하면 다음과 같은 장점이 있습니다.

1.SVG 可被非常多的工具读取和修改（比如记事本）
2.SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3.SVG 是可伸缩的
4.SVG 图像可在任何的分辨率下被高质量地打印
5.SVG 可在图像质量不下降的情况下被放大
6.SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7.SVG 可以与 Java 技术一起运行
8.SVG 是开放的标准
9.SVG 文件是纯粹的 XML

SVG의 주요 경쟁자는 Flash입니다. Flash와 비교할 때 SVG의 가장 큰 장점은 다른 표준(예: XSL 및 DOM)과 호환된다는 것입니다. . 플래시는 오픈 소스가 아닌 독점 기술입니다.

왜 SVG를 사용하나요?

SVG의 진정한 가치는 현대 웹 개발에서 가장 어려운 문제를 많이 해결한다는 것입니다. SVG 사용의 이점과 어떤 문제를 해결하는지 살펴보겠습니다.

1. 확장성 및 응답성

SVG는 픽셀 그리드가 아닌 모양, 숫자 및 좌표를 사용하여 브라우저에서 그래픽을 렌더링하므로 해상도에 독립적이고 무한하게 확장 가능합니다. 생각해 보면 원을 만드는 방법은 펜을 사용하든 태블릿을 사용하든 동일하며 비율만 변경됩니다.

SVG를 사용하면 다양한 모양, 경로 및 텍스트 요소를 결합하여 다양한 시각 효과를 만들고 모든 크기에서 선명하고 명확하게 보이도록 할 수 있습니다.

반대로 GIF, JPG, PNG와 같은 래스터 기반 형식은 고정된 크기를 가지므로 크기를 조정할 때 픽셀화됩니다. 다양한 반응형 이미징 기술이 픽셀 그래픽에 유용한 것으로 입증되었지만 SVG의 무한 확장(스케일링) 기능과 결코 경쟁할 수는 없습니다.

2. 프로그래밍 가능성 및 상호 작용

SVG는 완전히 편집 가능하고 스크립트 가능하며 CSS 또는 JavaScript를 통해 그림에 다양한 애니메이션과 상호 작용을 추가할 수 있습니다.

3. 읽기 접근성

SVG 파일은 텍스트 기반이며 검색 및 색인 생성이 가능합니다. 이렇게 하면 화면 판독기, 검색 엔진 및 기타 장치에서 읽을 수 있습니다.

4. 고성능

웹 성능에 영향을 미치는 가장 중요한 측면 중 하나는 웹 페이지에 사용되는 파일의 크기입니다. SVG 그래픽은 일반적으로 GIF, JPG, PNG와 같은 래스터 그래픽에 비해 파일 크기가 더 작습니다.

2. SVG 예제

다음 예제는 간단한 SVG 파일의 예제입니다. SVG 파일은 .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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</svg>

코드 설명:

첫 번째 줄에는 XML 선언이 포함되어 있습니다. standalone 속성을 참고하세요! 이 속성은 이 SVG 파일이 "독립형"인지 또는 외부 파일에 대한 참조를 포함하는지 여부를 지정합니다. standalone="no"는 SVG 문서가 외부 파일(이 경우 DTD 파일)을 참조한다는 의미입니다. 두 번째는 이 외부 SVG DTD를 참조합니다. 이 DTD는 W3C에 있으며 허용되는 모든 SVG 요소를 포함합니다.

1.SVG 코드는 시작 태그 < svg >와 루트 요소인 < /svg >를 포함하여 시작됩니다.
2. width 및 height 속성은 이 SVG 문서의 너비와 높이를 설정합니다. version 속성은 사용된 SVG 버전을 정의하고 xmlns 속성은 SVG 네임스페이스를 정의합니다.
3.SVG의 < Circle >은 원을 만드는 데 사용되며 cx 및 cy 속성은 원 중심의 x 및 y 좌표를 정의합니다. 이 두 속성을 생략하면 점이 (0, 0)으로 설정됩니다. r 속성은 원의 반경을 정의합니다.
4. 획 및 획 폭 속성은 도형의 윤곽선이 표시되는 방식을 제어합니다. 원의 윤곽선을 빨간색 테두리와 함께 2px 너비로 설정했습니다.
5.fill 속성은 도형 내의 색상을 설정합니다. 채우기 색상을 용서 색상으로 설정했습니다.
닫는 태그는 SVG 요소와 문서 자체를 닫습니다.
Note: 모든 열린 태그에는 닫는 태그가 있어야 합니다!

HTML 페이지의 SVG

SVG 파일은 < embed > 또는 < iframe > 태그를 통해 HTML 문서에 포함될 수 있습니다.

SVG 파일을 HTML 페이지에 삽입하는 세 가지 방법.

使用 < embed > 标签

< embed > 标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 < embed > 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 < embed >。任何 HTML 规范中都没有 < embed > 标签。
语法：

< src="rect.svg" width="300"    style="max-width:90%" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

注释：pluginspage 属性指向下载插件的 URL。

使用 < object > 标签

< object > 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 < object > 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

语法：

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

注释：codebase 属性指向下载插件的 URL。

使用 < iframe > 标签

< iframe > 标签可工作在大部分的浏览器中。

语法：

<iframe src="rect.svg" width="300" height="100"></iframe>

三、SVG 各形状介绍

（一）SVG 矩形

能根据之前的圆形联想到，rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="100" 
    style="fill:rgb(0,0,255);
    stroke-width:1;
    stroke:rgb(0,0,0);
    fill-opacity:0.1;
    stroke-opacity:0.9;
    opacity:0.9"/>
</svg>

代码解释：

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1
CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角。

（二）SVG 圆形：详细见上svg实例

（三）SVG椭圆：

ellipse 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

代码解释：

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

（四）SVG线条

line 标签用来创建线条

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

代码解释：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

（五）SVG多边形

polygon 标签用来创建含有不少于三个边的图形。它们都是由连接一组点集的直线构成。polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>

代码解释：

points 属性定义多边形每个角的 x 和 y 坐标
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。

（六）SVG 折线

polyline 标签用来创建仅包含直线的形状。它是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline>
</svg>

points
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。

四、SVG 滤镜简介

　所有互联网的SVG滤镜定义在 < defs > 元素中， < filter > 标签用来定义SVG滤镜， < filter > 标签使用必须的ID属性来定义向图形应用到那个滤镜中。在 SVG 中，可用的滤镜有：

feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix SVG 滤镜。应用matrix转换。
feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。
feComposite SVG 滤镜。
feConvolveMatrix SVG 滤镜。
feDiffuseLighting SVG 滤镜。
feDisplacementMap SVG 滤镜。
feDistantLight SVG 滤镜。 Defines a light source
feFlood SVG 滤镜。
feGaussianBlur SVG 滤镜。对图像执行高斯模糊。
feImage SVG 滤镜。
feMerge SVG 滤镜。创建累积而上的图像。
feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
feOffset SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight SVG 滤镜。
feSpecularLighting SVG 滤镜。
feSpotLight SVG 滤镜。
feTile SVG 滤镜。
feTurbulence SVG 滤镜。

注释：您可以在每个 SVG 元素上使用多个滤。

（一）SVG 高斯滤镜

< filter > 标签必须嵌套在 < defs > 标签内。< defs > 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <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)"/>
</svg>

代码解释：

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

（二）SVG 阴影效果

feOffset 元素用于创建阴影效果

偏移一个矩形（带 < feOffset > ），然后混合偏移图像顶部(含 < feBlend > )
SVG代码：

<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 > 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符

（三）SVG 线性渐变

　渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

• 线性渐变

• 放射性渐变

< linearGradient > 可用来定义 SVG 的线性渐变。

< linearGradient > 标签必须嵌套在 < defs > 的内部。< defs > 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<svg width="100%"  style="max-width:90%" version="1.1" xmlns=" http://www.w3.org/2000/svg">
    <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)"/>
</svg>

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

（四）SVG 放射渐变

< radialGradient > 用来定义放射性渐变。

<svg width="100%"    style="max-width:90%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <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)"/>
</svg>

코드 설명:
　　 cy 및 r 속성 정의 외부 링인 반면, fx 및 fy는 두 개 이상의 색상으로 구성될 수 있는 내부 링 그라데이션의 색상 범위를 정의합니다. 각 색상은 오프셋 속성은 그라디언트의 시작 및 끝 위치를 정의하는 데 사용됩니다.

【관련 추천: html 동영상 튜토리얼, 웹 프론트엔드】

위 내용은 html5의 svg 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!