SVG (Scalable Vector Graphics) 살펴보기
벡터 그래픽은 인쇄 매체에 널리 응용되었습니다. 웹 사이트에서 벡터 그래픽을 SVG 또는 확장 가능한 벡터 그래픽. SVG는 W3.org의 공식 사양을 인용하여 다음과 같이 설명됩니다.
XML로 2 차원 그래픽을 기술하는 언어. SVG는 세 가지 유형의 입체 객체를 허용합니다 : 벡터 그래픽 도형 (예 : 직선과 곡선으로 구성된 경로), 이미지 및 텍스트.
실제로 1999 년부터 주변에 있었고 2011 년 8 월 16 일부터 W3C 권장 사항이되었습니다. 그러나 SVG는 여전히 많이 사용되고 있지 않지만 비트 맵보다는 벡터를 사용하여 웹 사이트에서 그래픽이나 이미지를 제공하는 데 많은 이점이 있습니다.
SVG의 장점
SVG는 웹 사이트에서 그래픽을 제공 할 때 Bitmap에 비해 몇 가지 장점을 제공합니다. 그 중 일부는 다음과 같습니다.
해상도 독립
비트 맵 / 래스터 그래픽은 해상도에 따라 다르며 픽셀을 기반으로합니다. 특정 확대 / 축소 수준에서 크기가 조정되면 그래픽이 픽셀 화됩니다. 그래픽이 벡터의 수학적 방정식으로 표현되기 때문에 사실상 해상도 독립적 인 벡터 그래픽은 발생하지 않습니다. 품질을 유지하면서 모든 줌 레벨에서 확장 가능, 망막 디스플레이에서도.
HTTP 요청 줄이기
SVG는 HTML 문서에 직접 삽입 할 수 있습니다. svg 태그를 사용하므로 브라우저가 그래픽을 제공하라는 요청을하지 않아도됩니다. 또한 웹 사이트의로드 성능이 향상됩니다..
스타일 및 스크립팅
직접 퍼가기 svg 태그를 사용하면 CSS를 통해 그래픽 스타일을 쉽게 지정할 수 있습니다. 우리는 할 수있다. 객체 속성 변경 배경색, 불투명도, 테두리 등과 같은 일반적인 HTML 태그와 동일한 방식으로 처리합니다. 마찬가지로, JavaScript를 통해 그래픽을 조작 할 수도 있습니다..
애니메이션 및 편집 가능
SVG 객체는 애니메이션 요소를 사용하거나 jQuery와 같은 JavaScript 라이브러리를 통해 애니메이션 될 수 있습니다. SVG 객체는 텍스트 코드 편집기 또는 Inkscape (무료) 나 Adobe Illustrator와 같은 그래픽 소프트웨어로 편집 할 수도 있습니다.
파일 크기가 작습니다.
SVG는 비슷한 그래픽 프리젠 테이션을 가진 비트 맵에 비해 파일 크기가 작습니다..
SVG로 기본 도형 그리기
스펙에 따르면, 우리는 직사각형, 원, 선, 타원, 폴리 라인 및 다각형 SVG를 사용하고 브라우저에서 SVG 그래픽을 렌더링하려면 모든 그래픽 요소를 꼬리표. 자세한 내용은 아래 예제를 참조하십시오.
선
무승부 선 SVG에서 우리는
위에서 볼 수 있듯이 선 시작점 좌표는 처음 두 속성 x1 과 x2, 라인의 종점 좌표는 y1 과 y2.
또한 두 가지 속성이 있습니다. 행정 과 획 폭 테두리의 색과 테두리의 너비를 각각 정의하는 데 사용됩니다. 또는 다음과 같이 인라인 스타일에서 이러한 속성을 정의 할 수도 있습니다.
결국 같은 일을한다..
- 데모보기 “선”
폴리 라인
그것은 거의 비슷합니다.
전철기 행을 구성하는 모든 좌표를 포함하는 속성.
- 데모보기 “폴리 라인”
구형
직사각형 그리기도 간단합니다.
- 데모보기 “구형”
원
우리는 또한 100 반경 아르 자형 속성:
처음 두 속성, CX 과 cy 원의 중심 좌표를 정의하고 있습니다. 위의 예에서 우리는 102 둘 다 엑스 과 와이 이러한 속성이 지정되어 있지 않은 경우는 좌표, 0 기본값으로 사용됩니다..
- 데모보기 “원”
타원
우리는 타원을 그릴 수 있습니다. 엑스 선 반경 및 와이 선 반경과 rx 과 라이 속성;
- 데모보기 “타원”
다각형
와 더불어
- 데모보기 “다각형”
벡터 그래픽 편집기 사용
보시다시피 HTML에서 SVG로 간단한 객체를 그릴 수 있습니다. 그러나 개체가 더 복잡해지면 그 관행은 더 이상 이상적이지 않으며 두통을 줄 것입니다..
다행히도 위에서 언급 한 것처럼 벡터 그래픽 편집기를 사용할 수 있습니다. 어도비 일러스트 레이터 또는 잉크 스케이프 그 일을하기 위해서. 이 소프트웨어에 익숙하다면 HTML 태그로 직접 그래픽을 코딩하는 것이 아니라 GUI로 객체를 그리는 것이 훨씬 쉽습니다.
Inkscape로 작업하는 경우, 벡터 그래픽을 일반 SVG로 저장 한 다음 텍스트 코드 편집기에서 열 수 있습니다. 이제 파일에서 SVG 코드를 찾아야합니다. 모든 코드를 복사하여 HTML 문서에 붙여 넣습니다..
또는 .svg 이러한 요소 중 하나를 통해 파일; 깊숙이 박다, iframe 과 목적, 예를 들면;
결과는 결국 동일합니다..
이 예에서는 OpenClipArt.org에서이 Apple iPod을 사용합니다..
- 데모보기 “iPod”
브라우저 지원
브라우저 지원과 관련하여 SVG는 IE8 이하를 제외한 모든 주요 브라우저에서 잘 지원되었습니다. 그러나이 문제는 Raphael.js라는 JavaScript 라이브러리로 해결할 수 있습니다. 일을 더 쉽게하기 위해이 도구 인 ReadySetRaphael.com을 사용하여 SVG 코드를 Raphael 지원 형식으로 변환합니다. 방법은 다음과 같습니다..
우선, 다운로드하여 Raphael.js 라이브러리를 HTML 문서에 추가하십시오. 그런 다음 .svg 파일을 사이트에 복사 한 다음 생성 된 코드를 복사하여 다음로드 내에 붙여 넣습니다. 기능;
window.onload = function () // 라파엘 코드가 여기에옵니다
내부 신체 태그에 다음을 입력하십시오. div 와 rsr id 속성;
그게 끝났습니다. 아래 링크에서 예제를 확인하십시오..
- 데모보기 “라파엘”
마지막 생각들
이것이 SVG의 기본입니다. 이제이 주제에 대해 공정한 이해를 가지기를 바랍니다. Retina 디스플레이에서도 사용하기 위해 모든 화면 해상도에 맞게 사이트를 최적화하는 가장 좋은 방법입니다..
언제나처럼, 당신이 모험심이 많은 사람이라면,이 주제에 대해 더 깊이 파고 들기 위해 몇 가지 더 많은 참고 문헌과 토론을했습니다.
- SVG - W3 학교 소개
- SVG와 무관 한 해결책 - Smashing Magazine
- 왜 SVG를 사용하지 않습니까? - NetTuts
읽어 주셔서 감사 드리며이 게시물을 즐겁게 보내시기 바랍니다..
- 데모보기
- 소스 다운로드
