Path지난시간에는 SVG에서 사용할 수 있는 기본적인 도형들을 살펴보았다. 하지만 정형화된 도형을 쓰는 경우보단 정형화되지 않은 도형을 만들어서 써야 할 경우가 많다. 이때 사용할 수 있는 것은 path 이다. 사실 path 하나만으로도 지난시간에 살펴본 모든 도형들을 대체가 가능하다.M 과 Lpath 는 그 이름에서 알 수 있듯이 몇개의 좌표를 지정하고 그 좌표를 지나가도록 하여 도형을 그리는 element 이다. 아래의 예제를 보자. d 속성에 그리고자 하는 위치의 좌표값을 설정하면 된다. 좌표는 “M x y” 혹은 “L x y”로 표현이 되는데 여기서 M 은 Move를 L 은 Line을 의미한다. 즉 M 으로 시작하는 좌표로는 눈에 보이는 선을 그리지 않고 L 로 이동하는 좌표일때 선을 그리게 된..
SVG란?SVG(Scalable Vector Graphics)는 XML의 기반의 2차원 그래픽을 표현하기 위한 파일형식이다. SVG는 정적인(static) 이미지(image)뿐만 아니라 애니메이션이나 다양한 그래픽 효과를 위한 마크업과 API로 구성이 되어 있다. 그 이름 그대로 벡터(vector)기반으로 그래픽 데이터를 처리하므로 래스터(raster) 방식에 비해 확대나 축소에 유연하게 대응할 수 있으며 HTML에 섞어서 사용이 가능하므로 JavaScript를 통한 DOM 조작과 CSS로의 styling도 자유롭다. 현재는 1.1이 권고안으로 사용되고 있으며 여러가지 스펙이 추가된 1.2 버전이 재정중에 있다. 전체 스펙은 W3C SVG에서 확인할 수 있다.지원 브라우져데스크탑의 주요 브라우져인 Fir..
Flash 2 SVG (플래시를 SVG로 변환)
역시 구글과 Adobe Communities는 숨겨진 보물들이 즐비하다. 소개할 Exchange의 이름은 Flash 2 SVG 다. 플래시를 기반으로 드로잉이나 애니메이션까지 모두 SVG로 변환해 주기때문에 자바스크립트를 사용한다거나.. XML의 괴랄한 좌표 애니메이션으로 머리싸맬 고민이 필요없어졌다. 더욱이 유용한 가장 큰 이유는 SVG자체에 애니메이션 정보를 가지고 있기때문에 순수 SVG 독립형 객체라는 것이다. 플러그인을 만든 DavidBelais가 제작한 많은 툴이 있지만 공식 서포트 페이지의 주소는 http://dissentgraphics.com/tools/flash2svg 이기 때문에, 아래 그림처럼 보이는 어도비 공식 사이트에서의 사람들의 반응은 없다. 내가 리뷰 한줄 적은것 빼고는. 어쨌든..
canvas와 svg에 대한 용도와 목적은 상대적으로 다르다. svg는 미려하고 복잡한 벡터이미지를, canvas는 빠른 처리속도를 바탕으로 한 비트맵으로 지도표기와 같은 실시간 데이터 표현에 특화되어있다. 커뮤니티에 난무하는 추측성 발언이나 입코딩을 지양하고 하기 문서의 내용을 정독한 후에 판단은 본인이 내리는것을 지향한다. 소개 HTML은 고객 환경을 개선하는 데 도움이 되는 보다 풍부하고 나아진 표준 그래픽을 제공하도록 발전하고 있습니다. 개발자들이 표준 기반의 웹 기술을 사용하여 전문화된 기술을 사용하거나 브라우저 특정 코드를 작성하지 않아도 그래픽이 풍부한 대화형 사이트 및 응용 프로그램을 만들 수 있는 기회를 창출합니다. 다음 섹션에서는 벡터 그래픽의 개념을 소개하고 다음을 수행합니다. 직접 ..
SVG란 2차원 벡터그래픽을 XML방식으로 데이터를 표시하여 실시간으로 브라우저에서 렌더링하는 기술. 이미지와 그 작동은 XMl 텍스트 파일로 정의 되어 검색화. 목록화, 스크립트화가 가능하며, 필요하다면 압축도 가능하다. SVG형식의 파일은 SVG기반의 전문 그래픽 편집 프로그램을 사용하여 편집이 가능하다. 물론 XML 파일로 되어있으르모 문서 편집기로도 편집이 가능하다. 플래시에서 사용되는 벡터그래픽 방식과 유사하지만 표준성과 접근성이 뛰어나며 호환성이 좋은것이 특징. 항지만 플래시에서 표시하는 벡터방식보다 압축성과 패키지성이 떨어짐.. 이미 Adobe Illustrator는 SVG를 지원한다. 지금 소개할 지금 소개할 Raphael 은 MIT라이센스를 따르는 자바스크립트 벡터 라이브러리이다. htt..