728x90
📌 svg-tutorial 으로 학습한 내용을 정리했습니다.
SVG Tutorial - Learn how to code images in HTML with SVG
Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity.
svg-tutorial.com
SVG 삽입
SVG(Scalable Vector Graphics)는 HTML과 유사한 구문을 갖는다. 둘 모두 XML을 기반으로 한다.
HTML5 이후로 HTML 파일 내에 SVG 이미지 코드를 인라인 할 수 있다.
<html>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" fill="red" />
</svg>
</html>SVG 크기 조정
SVG 요소는 이미지 요소를 포함하고 이미지의 프레임을 정의한다. 즉 이미지의 내부 크기와 외부 크기를 설정한다.
width와height는 이미지가 브라우저에서 차지하는 공간을 정의한다.viewBox는 이미지 요소의 좌표계를 정의한다. viewBox의 처음 두 값은 이미지의 왼쪽 상단 좌표를, 마지막 두 값은 이미지 요소의 관점에서 크기를 정의한다.viewBox에 의해 정의된 크기가width및height속성과 일치하지 않는 경우 이미지가 확대되거나 축소된다.
<svg width="100" height="100" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" />
</svg><svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" />
</svg><svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="100" cy="100" r="50" />
</svg>이미지의 왼쪽 상단에 좌표를 설정할 수도 있다.
아래는 좌표계의 원점을 이미지의 중심으로 이동하고, 이미지 크기의 절반인 -100, -100 으로 왼쪽 상단을 설정한다.
원의 중심 위치는 0, 0이 된다.
<svg width="200" height="200" viewBox="-100 -100 200 200">
<circle cx="0" cy="0" r="50" />
</svg>크리스마스 장식품 그리기
circle로 주요 부분을 정의한다. 원을 그리려면 중심 위치(cx, cy)와 반경(r)을 설정한다.- 색상을 지정한다. CSS의
background-color과 유사한fill속성으로 색상을 설정한다.
<svg width="200" height="200" viewBox="-100 -100 200 200">
<circle cx="0" cy="20" r="70" fill="#D1495B" />
</svg>rect로 원형 장식 위에 작은 직사각형을 그린다. 직사각형의 왼쪽 상단의 위치와 크기를 설정하고 색을 입힌다.
<svg
width="200"
height="200"
viewBox="-100 -100 200 200"
>
<circle cx="0" cy="20" r="70" fill="#D1495B" />
<rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
</svg>- 사각형 위에 다른 원을 링으로 추가한다.
circle에fill="none"을 설정하고stroke,stroke-width속성을 사용해 테두리의 색상과 두께를 설정한다.
<svg
width="200"
height="200"
viewBox="-100 -100 200 200"
>
<circle cx="0" cy="20" r="70" fill="#D1495B" />
<rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
<circle
cx="0"
cy="-75"
r="12"
fill="none"
stroke="#F79257"
stroke-width="2"
/>
</svg>
728x90
'FE > SVG' 카테고리의 다른 글
| 5. SVG clip-path 사용 (0) | 2024.01.19 |
|---|---|
| 4. SVG로 집짓기 (0) | 2024.01.18 |
| 3. SVG로 진저브레드 그림 만들기 (0) | 2024.01.15 |
| 2. SVG로 크리스마스 트리 만들기 (0) | 2024.01.15 |
