svg 이미지 만들기

svg는 확대가 가능하고 자연스럽게 이미지 조절이 가능한 이미지 입니다.

jpg/jpeg, png 파일은 확대하면 깨지지만 svg는 벡터 기반이라서 확대해도 깨지지 않습니다.

svg는 최근 브라우저에서 지원하면서 로고나 차트, 그래프 등에 많이 사용되고 있습니다.

svg 참고사이트

http://d3js.org/

http://dmitrybaranovskiy.github.io/raphael/

svg 만드는 방법

1. 일러스트에서 이미지를 그립니다.

2. save as에서 svg를 선택하면

파일이 만들어집니다.

svg는 대부분의 브라우저에서 지원하지만 익스 8이하 버전이나 안드로이드 2.3이하버전에서는 svg파일을 표시할 수 없습니다.

그래서 이런경우 svg대신 png를 사용해야 한다.

이럴때는 사용자의 브라우저가 svg를 지원하는지 먼저 테스트 해 보고 지원안하면 png로 경로를 지정해주는 식으로 사용해야함

http://modernizr.com/

위 주소로 접속한 후 [Add your detects]를 클릭

svg를 클릭하고 build 클릭 한후에 build 오른쪽 다운로드를 클릭

다운로드한 modernizr-custom.js 파일은 스크립트로 연결

<script src="modernizr-custom.js">

<script>

if(!Modernizr.svg){

//지원하지 않을 경우

}

<script>

또는

<script>

if(Modernizr.svg){

//지원할 경우

} else {

//지원하지 않을 경우

}

<script>

이런식으로 표시합니다.