티스토리 뷰
반응형
SVG 이미지
- 웹에서 사용할 수 있는 이미지 파일 형식은 gif나 jpg, png 이외에 svg파일도 사용할 수 있습니다.
- svg 이미지는 크기를 조정해도 이미지가 깨지지 않는 벡터 이미지로 로고나 아이콘에서 많이 사용되며 최근 많은 관심을 끌고 있는 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때도 많이 사용됩니다.
- svg 이미지는 <img> 태그를 이용해 파일 형태로 삽입할 수도 있지만 태그를 이용해 직접 만들 수도 있습니다. 다시 말해 포토샵이나 일러스트레이터 같은 그래픽 편집 프로그램뿐만 아니라 웹 브라우저나 문서 편집기에서도 편집할 수 있습니다.
- 예를 들어 이미지 폴더에 들어있는 svg 파일은 이미지 파일이지만 더블 클릭하면 웹 브라우저에서 즉시 확인할 수 있습니다. 또한 웹 에디터 프로그램에서 열면 웹 문서와 비슷하게 보일 것입니다. 이렇게 svg는 이미지 이면서 소스 코딩을 통해 만들고 편집할 수 있기 떄문에 HTML5의 등장과 함께 많은 주목을 받고 있습니다.
- SVG는 2001년부터 웹 표준으로 지정되었지만 인터넷 익스플로러 8 버전 이하에서 지원하지 않았기에 거의 사용되지 않았지만 최근 HTML5를 지원하지 않는 인터넷 익스플로러 8 버전 이하를 사용하지 않도록 권장하기 때문에 다시 SVG에 대한 관심이 높아지고 있습니다.
SVG 이미지 삽입하기
- SVG 이미지는 직접 만들 수도 있지만 미리 만들어 놓은 SVG 이미지를 삽입할 수도 있습니다.
- SVG 이미지는 어도비 일러스트레이터 프로그램에서 벡터 이미지를 만든 후 svg 파일로 저장해 만듭니다. 이렇게 저장한 파일은 웹 문서에서 <img> 태그를 이용해 웹 문서에 삽입할 수 있습니다.
SVG 파일을 지원하지 않는 브라우저를 위해
- 대부분의 모던 브라우저에서는 svg 파일을 지원하지만 인터넷 익스플로러 8 이하를 고려해야 하거나 안드로이드 2.3 이하 버전에서는 svg 파일을 표시할 수 없습니다. 이런 경우 svg 파일 대신 png 파일 사용해야 합니다.
- 사용자의 브라우저가 svg 파일을 지원하는지 먼저 테스트해 보고 SVG 를 지원하지 않는다면 <img> 태그의 src 속성에 png 파일 경로를 지정해 주는 식으로 사용합니다. 이렇게 브라우저에서 특정 기능을 지원하는지 여부를 테스트해 주는 툴이 Modernizr입니다.
Modernizr 사이트 사용법
- SVG 기능을 체크하는 Modernizr를 다운로드하려면 Modernizr 사이트(https://modernizr.com)에 접속한 후 [Add your detects]를 클릭합니다.
2. Modernizr에서 체크할 수 있는 다양한 기능들이 나타나는데 이 중에서 [SVG as an <img> tag source]를 선택하 고 [Build]를 클릭합니다.
3. [Build] 항목 오른쪽의 [Download]를 클릭해 js 파일을 다운로드 합니다.
4. 다운로드한 파일의 이름은 modernizr-custom.js인데 이 파일을 사용할 폴더로 옮깁니다.
5. 다운로드한 modernizr-custom.js 파일은 <script>를 이용해 <head> 태그와 </head> 사이에 삽입하여 웹 문서에 연결합니다.
6. 자바스크립트를 이용해 웹 브라우저에서 SVG 기능을 지원하는지 여부에 따라 다르게 표시할 수 있는데 아래의 소 스중 하나를 사용하면 됩니다. 자바스크립트 소스는 웹 문서 안 어디나 추가할 수 있는데 주로 </head> 태그 직전이나 </body> 태그 직전에 사용합니다.
참고 : HTML5 + CSS3 웹 표준의 정석
반응형
UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML
댓글
© 2019 Eun's