소개
Scalable Vector Graphics의 약자인 SVG는 객체와 장면을 설명하기 위한 XML 기반 언어입니다. SVG 요소는 이벤트를 실행할 수 있고 자바스크립트로 스크립팅할 수 있습니다. SVG에는 원, 직사각형 등 텍스트 표시도 가능한 여러 기본 제공 프리미티브 유형이 함께 제공됩니다. SVG 기술이 새로운 기술이 아니지만, 이제 HTML5에서 <object> 또는 <embed> 태그를 사용하지 않고도 SVG 객체를 페이지에 직접 삽입할 수 있습니다. Raphaël.js는 프로그래매틱 방식으로 SVG 장면을 만들 수 있는 JavaScript 라이브러리입니다.
지원되는 경우 통합 API를 사용하여 SVG 장면 또는 현재 지원되는 VML(벡터 모델링 언어)(즉, IE9 이전의 Internet Explorer 버전)을 만듭니다.
첫 장면 그리기
먼저 라파엘과 함께 간단한 장면을 그려 보겠습니다. 라파엘 객체를 인스턴스화하여 장면을 그려보겠습니다. 여기에서는 주어진 너비와 높이로 주어진 HTML 요소에 객체를 삽입하는 생성자를 사용했지만, Raphaèl이 DOM(Document Object Model)에 객체를 추가하도록 할 수도 있습니다. 다음으로 원하는 x 및 y 위치에 너비와 높이를 제공하여 직사각형을 만들었습니다. 그런 다음 원하는 좌표와 반지름을 제공하여 원을 만들었습니다. 마지막으로 속성 함수(attr)를 사용해 객체에 색상을 할당했습니다
각 SVG 객체에는 색상, 회전, 획 색상, 크기 등의 속성에 할당된 속성이 있을 수 있습니다. 할당 가능한 속성의 자세한 목록은 여기에서 확인할 수 있습니다.
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
경로로 고급 도형 그리기
경로는 렌더러가 객체를 만들기 위해 사용하는 일련의 명령입니다. 경로로 그리는 것은 거대한 그래프 용지에 펜으로 그리는 것과 같습니다. 펜을 종이에서 들어 올려 다른 위치로 이동하거나(이동), 선을 그리거나(선) 곡선을 그리도록(호를 그리도록) 지시할 수 있습니다. 경로를 사용하면 SVG에서 규모에 관계없이 동일한 세부정보 수준으로 객체를 만들 수 있습니다. 곡선을 그리라는 명령을 실행하면 SVG는 조정 후 곡선의 원래 크기와 최종적으로 원하는 크기를 고려하여 매끄러운 곡선을 렌더링하기 위해 중간점을 수학적으로 계산합니다.
아래의 코드와 그림은 경로를 사용하여 그려진 직사각형과 닫힌 곡선을 보여줍니다. 문자 M 다음에 좌표가 오면 펜이 해당 위치로 펜을 이동하고, L 다음에 좌표 쌍이 오면 현재 위치에서 해당 위치까지 선을 그립니다. s는 주어진 제어점과 끝점을 사용하여 부드러운 베지어 곡선을 그립니다. Z 는 경로를 닫습니다. 일반적으로 대문자를 사용하면 명령어가 절대 좌표와 함께 실행되고 소문자는 상대 좌표를 사용합니다. M/m 및 Z/z는 각각 대문자 또는 소문자에 대해 동일한 명령어를 실행합니다. 여기에서 전체 과정 안내 목록을 확인할 수 있습니다.
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
텍스트 그리기
텍스트를 그릴 수 없는 삽화를 사용하는 것은 정말 지루할 텐데 다행히 라파엘은 두 가지 방법으로 텍스트를 그릴 수 있습니다. 첫 번째 메서드인 text는 그릴 문자열과 함께 x 및 y 좌표를 사용합니다. 텍스트 메서드를 사용하면 글꼴이나 기타 효과를 많이 제어할 수 없습니다. 기본 크기로 기본 글꼴로 그립니다.
두 번째 메서드인 print는 경로 모음으로 텍스트를 그립니다. 따라서 개별 문자를 수정할 수 있습니다. 아래 예에서는 숫자 5를 주황색으로 채우고 'ROCKS'를 푸른색으로 채우며 획을 더 두껍게 만들어 굵은 텍스트를 시뮬레이션했습니다. 글꼴 크기가 40pts인 맞춤 글꼴을 사용했습니다.
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
Vegur 글꼴은 라파엘이 아니며 어떤 글꼴도 해당 문제에 적합하지 않습니다. 또한 대부분의 글꼴은 TrueType(TTF) 또는 OpenType(OTF) 형식을 사용합니다. 이러한 형식을 라파엘이 사용할 수 있는 형식으로 바꾸려면 Cufon이라는 도구를 사용하여 변환해야 합니다. Cufon을 사용하면 특정 글꼴의 다양한 글꼴 스타일 (일반, 굵게, 기울임꼴, 굵은 기울임꼴 등)을 내보내 라파엘과 함께 사용할 수 있습니다. Cufon에 대한 자세한 내용은 이 튜토리얼의 범위를 벗어납니다. 자세한 내용은 앞서 언급한 링크를 참고하세요. Google Font Directory는 애플리케이션에 삽입되지 않은 글꼴을 제공하는 좋은 소스입니다.
이벤트
SVG 요소는 기존의 모든 마우스 기반 이벤트(click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, focus)를 직접 구독할 수 있습니다. 라파엘은 캔버스나 개별 요소에 자체 메서드를 추가할 수 있는 기능을 제공하므로 이론적으로는 모바일 브라우저용 동작을 추가할 수 있습니다.
아래 스니펫은 함수를 클릭했을 때 지정된 문자를 'ROCKS'로 45도 회전하도록 함수를 바인딩합니다.
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG와 캔버스 비교
둘 다 화면에 객체를 그리는 방법이라는 점을 감안할 때 둘 중 하나를 사용해야 하는 이유가 즉시 명확하지 않을 때가 많습니다. 두 매체는 접근 방식이 매우 다릅니다 캔버스는 즉석 모드 API로, 크레용으로 그리는 것과 매우 비슷합니다. 그림의 일부를 지우거나 삭제할 수 있지만 기본적으로 이전 획을 되돌리거나 변경할 수는 없습니다. 캔버스는 래스터 비트맵이기도 하므로 이미지의 크기가 조정될 때 모자이크 현상의 영향을 많이 받습니다. 반면에 SVG는 앞서 언급한 것처럼 세부정보 수준이 같은 여러 해상도를 제공할 수 있으며 스크립팅할 수 있습니다.
게임 프로그래밍에 SVG를 사용할지 캔버스를 사용할지 여부는 매우 간단합니다. 데스크톱 또는 모바일 중 어디에 배포할지에 대한 일반적인 제약 외에도 스프라이트 수에 따라 다릅니다. SVG는 낮은 품질의 게임에 적합합니다. 이러한 게임은 객체의 동시 이동이 제한적이고 스프라이트 제거 및 생성이 가능한 게임이라고 설명합니다. 체스, 체커, 배틀십과 같은 많은 보드게임과 블랙잭, 포커, 하트와 같은 카드 게임이 이 카테고리에 속합니다. 또 하나의 통일된 점은 이러한 많은 게임에서 플레이어가 임의의 객체를 이동해야 하고 SVG의 스크립팅 기능 덕분에 객체 선택이 쉽다는 것입니다.
SVG용 작성 도구
SVG를 사용한다고 해서 경로를 수동으로 만들어야 하는 것은 아닙니다. SVG로 내보낼 수 있는 여러 가지 도구(오픈소스 및 상업용)가 있습니다. 제가 광범위하게 사용하고 적극적으로 추천하는 두 가지 도구는 Inkscape와 svg-edit입니다.
svg-edit
svg-edit은 자바스크립트로 작성된 브라우저 기반 SVG 편집기입니다. GIMP 또는 MS Paint를 연상시키는 제한된 사용자 인터페이스를 제공합니다. 세부 수준이 비교적 낮은 경우가 아니라면 SVG 그림을 만들기보다는 대부분 svg-edit을 사용하여 SVG 그림을 수정했습니다. svg-edit을 사용하면 그래픽이나 SVG 코드를 사용하여 개체를 만들 수 있습니다.
잉크스케이프
Inkscape는 CorelDraw, Adobe Illustrator, Xara와 유사한 크로스 플랫폼 정식 벡터 그래픽 편집기입니다. Inkscape는 활발한 플러그인 커뮤니티와 성숙한 코드베이스의 이점을 활용합니다. 1999년 잉크스케이프가 포크했던 잉크스케이프가 개발되었습니다. Inkscape는 벡터 기반 및 비트맵 애셋을 위해 자주 사용하는 애플리케이션입니다.
단조
SVG는 Windows IE9 이전 버전의 Internet Explorer에서는 지원되지 않습니다. IE는 SVG와 동일한 기능을 대부분 제공하는 VML(벡터 마크업 언어)이라는 벡터 그래픽 형식을 사용합니다. 라파엘은 지원되는 경우 SVG 또는 VML을 사용하는 장면을 만들 수 있습니다. 라파엘을 사용하면 크로스 플랫폼 지원을 쉽게 할 수 있어요.
참조
- Rapahèl.js: http://raphaeljs.com
- Raphaèl 문서: http://raphaeljs.com/reference.html