SVG 만들기
여기서는 일러스트, 포토샵등의 프로그램을 사용하지 않고 svg 이미지를 직접 만들어 보도록 하겠습니다.
* 수정 뒤 페이지를 새로 읽어들여도 고친 부분이 제대로 반영이 안 될 때 *
로컬 컴퓨터에서는 수정뒤 페이지 고침을 하면 잘 작동하는데 인터넷에 올린 뒤 제대로 작동하지 않을 경우가 있는데 이유는 컴퓨터에 저장된 캐시를
사용하므로 수정된 페이지가 css파일과의 연동등의 업데이트가 않되는 경우가 있으므로 캐시를 지우고 새로 불러들여야 할 경우가 있습니다.
그때는 ctrl + F5를 눌러 새로 고침을 합니다.
이미지 파일로서 확장자 svg파일은 Scalable Vector Graphics의 약자로서
벡터 이미지 파일을 의미합니다. 여기서는 래스터 파일(png, jpg, bmp, tif...)을 변환하는 것이 아닌 처음부터 svg파일을 직접 만드는 것을 설명하도록 하겠습니다.
벡터 이미지에 관한 설명은 검색을 해보면 많이 나오므로 생략하겠습니다.
HTML파일내에 svg태그를 삽입하여
<svg>
내용
</svg>
이런 식으로 그리는 것도 가능합니다만 외부에서 작성된 svg파일을 불려들여 그리는 방식으로 하겠습니다.
참고로 SEO(검색 엔진 최적화)의 견해에서 보면
- Google은 HTML에 직접 작성된 SVG 이미지 코드를 이미지로 인식하지 않습니다.
- Google은 img 태그로 참조 된 SVG 이미지 코드는 이미지로 인식합니다.
- 직접 작성된 SVG 코드의 각 요소는 텍스트 SEO에 유효합니다.
- img 태그로 참조 된 SVG 이미지는 이미지 SEO에 유효합니다.
먼저 같은 폴더내에 HTML 파일인 test.html과 SVG 파일인 test.svg파일을 생성합니다. HTML파일은 밑과 같이 한번만 코드를 카피하여 저장해서 놓으시고 SVG파일 내용이 바뀔때마다 HTML파일을 새로 읽어들이면 됩니다.
항상 이런 식으로 작성하여 여기에 그릴 내용을 입력합니다.
</svg>
글자 그리기
좌표로서 시작점(x, y)에서 시작해서 텍스트를 작성합니다. stroke는 테두리나 윤곽선의 색상 (black, blue, red, blue...)을 표현한다. fill은 내부를 지정한 색상으로 채우는 것을 의미. 수직으로 텍스트를 작성할 때는 "writing-mode: tb"를 사용. 좌표나 선, 색상등을 바꾸어서 연습해 보시길 바랍니다. 숫자뒤에 아무것도 지정해주지 않으면 자동으로 px(픽셀사이즈)가 된다.
<text x="0" y="40" style="fill: black; stroke: none; font-size: 40px;">
Hello
</text>
<text x="100" y="40" style="fill: none; stroke: black; font-size: 40px;">
Hello
</text>
<text x="200" y="40" style="fill: green; stroke: black; font-size: 40px;">
Hello
</text>
<text x="320" y="10" style="writing-mode: tb;">
Hello
</text>
</svg>
선 그리기
좌표로서 시작점(x1, y1)과 종점(x2, y2)을 지정해 주면 시작점과 종점을 연결하여 선을 그린다. stroke는 선의 색깔을 선택하고 stroke-width는 선의 굵기를 표현한다.
<line x1="10" y1="10" x2="100" y2="10" style="stroke: black;" />
<line x1="10" y1="20" x2="100" y2="20" style="stroke: black; stroke-width: 3" />
<line x1="10" y1="20" x2="100" y2="20" style="stroke: black; stroke-width: 3" />
<line x1="10" y1="30" x2="100" y2="30" style="stroke: red; stroke-width: 5" />
</svg>
원 그리기
원의 중심 좌표 cx, cy, 반지름 r의 크기를 설정한다. storke는 테두리를 그려주며 과 종점(x2, y2)을 지정해 주면 시작점과 종점을 연결하여 선을 그린다. stroke-dasharray는 점선을 표현한다. (예)stroke-dasharray: 10 5 에서 10은 점선의 길이, 5는 점선사이의 공간의 간격을 의미한다. fill은 원 안을 지정한 색으로 채워넣는 명령어고 none이면 색이 입혀지지 않은 빈 공간이고 fill-opacity는 색의 투명도를 가르킨다. 0.0 (투명) ~ 1.0 (불투명)의 범위내에서 지정한다.
<circle cx="20" cy="20" r="10" style="stroke: black; stroke-width: 3; fill: none"/>
<circle cx="50" cy="20" r="12" style="stroke: black; stroke-width: 3; stroke-dasharray: 10 5; fill: orange"/>
<circle cx="90" cy="20" r="14" style="stroke: black; stroke-width: 3; fill: blue; fill-opacity: 0.3"/>
</svg>
애니메이션
좌에서 우로 이동시킬 사각형을 하나 그립니다.
animate란 명령어를 주고 그 뒤의 atrributeName="x"는 x축을 중심으로 이동하겠다는 말입니다.
from="30" to="470"은 좌측 30픽셀에서 시작해서 우측 470픽셀까지 이동시키겠다는 뜻이며
begin="0s"은 대기 시간, dur="5s"는 한 번 좌에서 우로 이동하는 시간, fill="remove"는 이동시킬때
채워나가지 않고 지워가며 이동하겠다는 말이며 repeatCount="indefinite"는 계속 반복하겠다는 말이다.
회전시킬 텍스트를 "FACESTAR" 하나 만듭니다.
animateTransform이란 명령어를 주고 그 뒤의 attributeName="transform"은 위치를 변환시키겠다는 말이며
type="rotate"는 위치 변환의 타입은 회전으로 해서 from="0 70 30"은 시작은 0도에서 x위치: 70, y위치: 30을 중심으로
to="360 70 30" x위치: 70, y위치: 30을 중심까지 360도 회전을 시키라는 의미입니다.
<rect x="10" y="10" height="30" width="30" style="stroke: black; fill: pink">
<animate attributeName="x" attributeType="XML"
from="30" to="470"
begin="0s" dur="5s"
fill="remove"
repeatCount="indefinite"
/>
</rect>
<text x="30" y="30">
FACESTAR
<animateTransform
attributeName="transform"
begin="0s" dur="10s"
type="rotate"
from="0 70 30"
to="360 70 30"
repeatCount="indefinite"
/>
</text>
</svg>
간단하게 svg파일을 만드는 걸 설명하였습니다. 이외에도 많은 요소와 속성이 있는데 더 깊이 알려면 밑의 사이트를 참조하시길 바랍니다.
SVG 참조 사이트 (영문)