728x90
300x250
svg는 확대가 가능하고 자연스럽게 이미지 조절이 가능한 이미지 입니다.
jpg/jpeg, png 파일은 확대하면 깨지지만 svg는 벡터 기반이라서 확대해도 깨지지 않습니다.
svg는 최근 브라우저에서 지원하면서 로고나 차트, 그래프 등에 많이 사용되고 있습니다.
svg 참고사이트
http://dmitrybaranovskiy.github.io/raphael/
svg 만드는 방법
1. 일러스트에서 이미지를 그립니다.
2. save as에서 svg를 선택하면
파일이 만들어집니다.
svg는 대부분의 브라우저에서 지원하지만 익스 8이하 버전이나 안드로이드 2.3이하버전에서는 svg파일을 표시할 수 없습니다.
그래서 이런경우 svg대신 png를 사용해야 한다.
이럴때는 사용자의 브라우저가 svg를 지원하는지 먼저 테스트 해 보고 지원안하면 png로 경로를 지정해주는 식으로 사용해야함
위 주소로 접속한 후 [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>
이런식으로 표시합니다.
728x90
반응형
'Front-end > HTML' 카테고리의 다른 글
text slid up&down :: 텍스트 슬라이드 업앤다운 (0) | 2019.03.28 |
---|---|
여러가지색 그라데이션 :: 그라디언트 적용 (0) | 2019.03.25 |
파비콘 만들기및 등록하기 (0) | 2019.03.10 |
햄버거메뉴 코딩으로 만들기 (0) | 2019.02.09 |
반응형웹 모바일 해상도 (0) | 2019.02.07 |
댓글