HTML524 SVG Circle * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG Circle - 태그는 원을 만들때 사용한다 Sorry, your browser does not support inline SVG. SVG 코드 코드 설명cy , cy 요소는 원의 중심의 x , y 좌표를 정의한다. 만약 cx , cy 가 생략되었다면 원의 중심은 0,0으로 설정된다.r 요소는 원의 반지름을 정의한다. 출처 : W3SCHOOL.COM - SVG - Circlehttp://www.w3schools.com/svg/svg_circle.asp 2015. 6. 8. SVG rect * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG 모양 SVG는 개발자들을 위해 미리 정의된 모양 요소들이 몇가지 있다.직사각형 원 타원 선 폴리라인 다각형 연결형 챕터를 따라오면 각 요소를 설명할 것이며, rect요소부터 시작하도록 한다. SVG 직사각형 - 예제1 요소는 직사각형과 직사각형 모양의 변화를 정의하는데 사용된다. Sorry, your browser does not support inline SVG. SVG 코드 코드 설명태그의 width 와 height 속성은 직사각형의 width,height 를 정의한다.style 속성은 직사각형의 CSS 값을 정의할 수 있다.CSS의 fill 속성은 직사각형내의 색상을 지정.. 2015. 6. 8. SVG in HTML * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. HTML5 에서는 HTML 페이지 내에 SVG 요소들을 직접 삽입할 수 있습니다. HTML 페이지에 SVG를 직접적으로 끼워넣기.여기 간단한 SVG그래픽의 예가 있다. Sorry, your browser does not support inline SVG. HTML 코드 My first SVG SVG코드 설명 SVG 이미지는 태그와 함께 시작한다.SVG 태그 내의 width, height 속성은 SVG 이미지의 width,height 속성을 정의한다. 태그는 원을 그리는 태그다.cx, cy 속성은 원의 중심 좌표를 정의한다. 만약 cx,cy 속성이 정의 되어 있지 않다면 원의 중심은 (.. 2015. 6. 8. 웹기반 편집기 개발을 위한 SVG 정리 현재 캔버스로 개발되어있는 편집기가 하나하나의 객체가 많아지다보니 렌더링 시간이 꽤나 오래 걸리기 시작했다.또한 캔버스 기반 편집기는 렌더링시마다 서버와 통신을 해서 바뀐 정보를 하나하나 보낸 뒤 다시 받는 형식으로 개발되어있다.SVG로 변경하게 되면 서버와의 통신을 줄일 수 있고, 좀더 클라이언트 기반으로 편집기 엔진이 변경될 것 같아 SVG 스터디를 시작하려 한다. SVG 의 위키백과부터 살펴보았다. SVG(Scalable Vetor Graphics) 는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의.. 2015. 6. 8. 이전 1 ··· 3 4 5 6 다음
