반응형
웹 페이지에 SVG 태그 사용
웹 페이지에 SVG 태그를 사용하여 벡터 이미지를 구현하는 것은 효율적이고 유연한 방법입니다. SVG (Scalable Vector Graphics)는 XML 기반의 마크업 언어로, 웹에서 고품질의 그래픽을 표현할 때 매우 유용합니다. SVG를 사용하면 이미지가 확대나 축소될 때도 선명도가 유지되며, CSS와 JavaScript로 쉽게 스타일링하고 상호작용할 수 있습니다.
웹 페이지에 SVG 이미지를 추가하는 방법
직접 HTML 내에 SVG 코드 삽입하기
- SVG 코드를 HTML 문서의 적절한 위치에 직접 붙여 넣습니다.
- 이 방법은 SVG 요소에 CSS 스타일을 적용하거나 JavaScript로 조작하기가 쉽다는 장점이 있습니다.
예시:
<html>
<body>
<svg>
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
</html>
SVG 파일을 외부에서 불러오기
- SVG 파일을 별도로 만들고, HTML에서 <img> 태그나 CSS의 background-image 속성을 이용하여 불러옵니다.
- 이 방법은 SVG 파일을 여러 페이지나 여러 위치에서 재사용할 때 유용합니다.
예시:
<html>
<body>
<img src="textInCircle.svg" alt="예제 SVG 이미지">
</body>
</html>
정리
SVG를 웹 페이지에 구현할 때 주의할 점은 SVG 코드나 파일이 복잡해지면 페이지 로딩 시간에 영향을 줄 수 있다는 것입니다. 따라서 가능한 한 최적화된 SVG를 사용하는 것이 좋습니다. 또한, 모든 브라우저가 SVG를 지원하지만, 오래된 브라우저에서는 호환성 문제가 발생할 수 있으므로 테스트를 충분히 해야 합니다.
반응형
'도서로 공부하는 프로그래밍 > 코딩 자율학습' 카테고리의 다른 글
| [SVG] SVG에 둥근 모서리 사각형 만들기 (67) | 2024.01.27 |
|---|---|
| [SVG] SVG로 사각형 그리기 (69) | 2024.01.26 |
| [SVG] SVG 코드에 텍스트를 넣기 (62) | 2024.01.24 |
| [SVG] SVG 만드는 법 (61) | 2024.01.23 |
| [Python] 편집 툴, Visual Studio Code 설치 (57) | 2024.01.22 |
