홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML 웹 페이지에 SVG 이미지를 삽입하는 4가지 방법

저자：Eve Cole 업데이트 시간：2024-12-18 10:41:14

웹 애플리케이션 개발에서는 SVG 이미지를 사용합니다. 요약하면 다음과 같은 네 가지 방법이 있습니다.

1. 페이지에 직접 삽입하세요. 2. img 태그 도입. 3. CSS 소개. 4. 객체 태그가 도입되었습니다.

1. 페이지에 직접 삽입

HTML 페이지에서는 svg 태그를 직접 사용할 수 있습니다.

<!DOCTYPE HTML>
<html>
	<머리>
		<meta charset="utf-8">
		<제목></제목>
	</head>
	<본문>
		<!-- svg 사진-->
		<svg width="200" height="150" style="테두리: 1px 솔리드 스틸블루">
			<!-- 안에 직사각형이 있습니다 -->
			<ect x="10" y="10" width="100" height="60" fill="skyblue"></lect>
		</svg>
	</body>
</html>

가동 효과:

1

2. img 태그 소개

웹 페이지에서 직접 svg 태그를 작성하는 것 외에도 jpeg 및 png 이미지를 가져오는 것처럼 img를 통해 태그를 가져올 수도 있습니다.

1) 새로운 SVG 그림을 만듭니다

그런 다음 먼저 새 svg 이미지 파일을 만들어야 하며 위 웹 페이지에 직접 작성된 svg를 사용합니다.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
	<ect x="10" y="10" width="100" height="60" fill="skyblue"></lect>
</svg>

여기에 있는 내용에는 두 가지 차이점이 있습니다.

1. 네임스페이스 xmlns 특성을 선언해야 합니다. 네임스페이스는 이 문서 끝에 있는 참조 자료에 나열되어 있습니다. 2. 원래 svg 태그에 작성된 스타일인 style="border: 1px solid steelblue"를 제거했습니다.

콘텐츠를 test.svg 파일에 저장합니다. 이는 이미지 파일입니다. 브라우저에서 열어볼 수 있습니다.

2) img 태그를 사용하여 가져오기

test.svg와 웹 페이지 파일이 동일한 디렉터리에 있다고 가정합니다.

<img src="test.svg" style="border: 1px solid steelblue" />

jpeg 및 png를 도입한 것과 유사하게 src 속성을 사용하여 이미지 경로를 직접 설정할 수 있습니다. 또한 원본 svg 스타일을 img 태그로 옮겼습니다.

실행 효과는 위와 동일합니다.

2

현재 인터넷에는 많은 SVG 사진이 있습니다. 좋은 아이콘 웹사이트인 https://www.iconfont.cn을 참조하세요.

3

3. CSS 소개

CSS 소개는 이미지를 배경 이미지로 소개하는 것입니다.

<스타일 유형="텍스트/css">
	.svg {
		너비: 200px;
		높이: 150px;
		테두리: 1px 솔리드 스틸블루;
		background-image: url(test.svg); // 배경으로 가져오기 }
</style>
<div class="svg"></div>

4. 객체 소개

img 가져오기와 마찬가지로 svg 파일이 필요하며 속성 데이터와 함께 가져옵니다.

<object data="test.svg" style="border: 1px solid steelblue"></object>

실행 효과는 위와 유사하며 더 이상 매핑이 없습니다.

기타 태그

embed 및 iframe 태그와 같은 다른 태그도 도입할 수 있지만 자세한 내용은 이 문서 끝에 나열된 참조를 참조하세요.

참고자료

네임스페이스: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

삽입 태그: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

iframe 태그: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

HTML 웹 페이지에 svg 이미지를 도입하는 4가지 방법에 대한 이 기사를 마치겠습니다. HTML에 svg 이미지를 도입하는 방법에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속해서 읽어보시기 바랍니다. 앞으로는 downcodes.com을 지원하세요!

관련 기사