[HTML] SVG 파일을 지원하지 않는 브라우저를 위해

코딩 | 개념 정리/HTML & CSS

PatienceLee 2020. 4. 23. 10:08

대부분의 모던 브라우저에서 SVG 파일을 지원하지만 익스플로러 8이하를 고려해야 하거나 안드로이드 2.3이하 버전엥서는 SVG 파일을 표시하라 수 없다. 이런 경우, SVG 이미지 파일 대신 PNG 이미지 파일을 사용해야 한다.

이러한 여부를 테스트 하기 위해 아래의 사이트에서 특정 기느을 지원하는지 여부를 테스트해 주는 툴을 받아 활용하도록 한다. https://modernizr.com 사이트

1. Add your detect를 클릭

2. 내가 필요한 요소를 추가후 BULID를 클릭해 .js 파일을 다운로드 해준다.

3. 다운로드시 아래와 같이 뜰테지만, 계속을 눌러준다.

4. 본인이 사용할 HTML 문서가 있는 곳으로 이동시킨 후

5. html 문서에 아래와 같이 코드를 입력하면 사용이 가능하다.

<head>
	<meta charset="utf-8">
    <title>Insert SVG</title>
    <script src="modernizr-custom.js></script>
</head>

6. 추가로, if 함수를 사용해준다면, 지원 유무에 따라 SVG와 PNG를 선택하여 자동으로 적용할 수 있다.

<script>
	if(!Modrenizr.svg) {
    //지원하지 않을 경우
    }
</script>

<script>
	if(Modernizr.svg){
    //지원할 경우
    } else{
    //지원하지 않을 경우
    }
</script>