HTML에서 이미지를 사용하는 것은 멀티미디어가 풍부한 웹사이트에 적합합니다. 여러분이 해야 할 일은 HTML 코드에 태그를 추가하는 것뿐입니다. 그러면 브라우저가 선택한 이미지에 대한 링크를 표시하고 추가할 수도 있습니다. JPG 또는 PNG가 해상도 이상으로 확대되면 더 이상 세부 정보가 표시되지 않기 때문에 이미지나 다이어그램이 확대된다는 것을 알면 약간 문제가 됩니다. SVG는 이 문제에 대한 해결책입니다. SVG는 확장 가능한 벡터 그래픽을 나타냅니다. 이름에서 알 수 있듯이 필요한 만큼 확대할 수 있으며 세부 정보가 절대 사라지지 않습니다. SVG는 웹 기술에만 국한되지 않지만 HTML에서 사용하는 것은 정말 깔끔합니다. SVG는 브라우저의 다이어그램, 벡터, 차트 및 그래프에 유용합니다.
HTML에 SVG 삽입 구문:
HTML5에서 캔버스를 사용하는 것과 유사하게 HTML5 페이지에 SVG를 삽입하는 데 사용할 수 있는 간단한 태그가 있습니다.
구문:
<svg width="width here" height="height here ">
…. …. …. ….
</svg>
로그인 후 복사
HTML의 SVG 예
다음은 HTML5에서 생성하고 삽입할 수 있는 벡터의 몇 가지 예입니다.
예 #1 – HTML에서 SVG를 통해 직사각형 그리기
코드:
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/>
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>
로그인 후 복사
출력:
예 #2 – SVG에서 모서리가 둥근 사각형 그리기
모서리가 둥근 정사각형의 경우 정사각형의 크기와 크기 외에 rx, ry를 사용하여 모서리의 반경을 정의해야 합니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>
로그인 후 복사
출력:
예 #3 – 윤곽선과 색상 파일링이 내부에 포함된 SVG에서 원 그리기
코드:
<!DOCTYPE html>
<html>
<body>
<svg width= "400" height= "400">
<circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>
로그인 후 복사
출력:
예 #4 – HTML5에서 SVG를 사용하여 직선 그리기
HTML5 SVG에서 직선을 그리는 태그; 색상, 선의 굵기, 위치 등을 정의할 수 있습니다.
코드:
<html>
<body>
<svg width= "400" height= "400">
<line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/>
</svg>
</body>
</html>
로그인 후 복사
출력:
예 #5 – HTML5에서 SVG를 통해 일식 그리기
HTML5 SVG에 일식을 그리는 태그; 색상과 위치는 반경에 따라 다이를 따라 정의될 수 있습니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" />
Sorry but this browser does not support inline SVG.</svg>
</body>
</html>
로그인 후 복사
출력:
예 #6 – HTML5에서 SVG를 사용하여 다각형 만들기
태그 SVG에서 다각형을 만드는 데 사용할 수 있습니다. 태그에서는 각 지점의 위치를 언급해야 합니다. 채우기 색상, 윤곽선 두께 등도 코드에서 정의할 수 있습니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600" >
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>
로그인 후 복사
출력:
예 #7 – HTML5에서 SVG를 사용하여 폴리라인 만들기
폴리라인은 직선으로만 구성된 도형을 그리는 데 사용됩니다. 이 선들도 연결되어야 한다는 점을 명심하세요. 다음은 HTML5의 폴리라인 구현 예입니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>
로그인 후 복사
출력:
예 #8 – HTML5에서 SVG를 사용하여 텍스트 그리기
차트 라벨 지정 등 다양한 상황에서 SVG에 텍스트가 필요할 수 있습니다. 다행히 SVG에서 사용할 수 있는 태그입니다. 텍스트는 SVG의 어느 위치에나 설정할 수 있으며 색상 및 기타 세부 사항도 사용자 정의할 수 있습니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>
로그인 후 복사
출력:
예 #9 – HTML5에서 SVG를 사용하여 별 그리기
이제 기본 작업이 완료되었으므로 SVG를 사용하여 만들 수 있는 별을 만들어 보겠습니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198"
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>
로그인 후 복사
출력:
예 #10 – SVG에서 선형 그라데이션 사용
SVG 다중 라인 HTML 캔버스에서는 선형 및 방사형 그래디언트를 사용할 수 있습니다. 그라데이션은 꼬리표. 그런 다음 이 태그는 SVG 태그에 표시되어 사용법을 나타냅니다. Eclipse에서 Gradient를 사용하는 예를 살펴보겠습니다.
코드:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>
로그인 후 복사
출력:
결론
다이어그램과 차트를 사용하는 사이트의 경우 SVG는 생명의 은인입니다. 대부분의 최신 웹 브라우저는 확장성 외에도 SVG도 지원합니다. SVG 사용의 또 다른 이점은 파일 크기입니다. 단지 약간의 코드이기 때문에 SVG는 기존 이미지에 비해 메모리와 대역폭 소비량이 매우 작을 수 있습니다.
위 내용은 HTML SVG의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
