본문 바로가기
info

svg map 지도 파일 받고 html 적용하기

by 개코 - 개발과 코딩 2021. 7. 11.

웹을 하다보면 지도 파일이 필요할 때가 있다. 옛날에야 유료플러그인과 삽질로 구현했다지만 지금 svg를 이용하여 map 지도를 쉽게 형성할 수 있다. 이미 만들어진 map 파일들도 많기 때문에 단순히 검색을 해도 전세계의 svg 지도를 구할 수 있다. svg는 비단 지도만을 위한 것은 아니지만 이것만큼 편한 것은 없는 듯 하다.

 

svg map 검색

구글에서 svg map으로 검색을 해보도록 한다.

다양한 형태의 지도를 구할 수 있다.

검색어를 다르게 해도 많은 분야의 svg 파일을 구할 수 있다.

이것을 프로그래밍으로 코딩하여 구현하는 것은 개개인의 몫이다.

마음에 드는 지도파일을 구했다면 다운로드 하자.

svg 파일은 xml 형태이기 때문에 당황하지 말자.

아래의 지도는 simplemaps 에서 구할 수 있다.

  • https://simplemaps.com/

우리나라 지도 svg map 파일
우리나라 지도 svg map 파일

 

svg 파일 실행하기

다운로드 받은 svg 파일은 웹브라우저에서 바로 실행하여 볼 수 있다.

svg파일을 더블클릭하여 볼 수 있고 자신이 원하는 웹브라우저를 선택하여 볼 수도 있다.

개인적으로 마이크로소프트 엣지브라우저가 최근 잘 만들어진 느낌이라 자주 사용하고 있다.

아래는 svg map 파일을 엣지 브라우저에서 나타낸 것이다.

svg map 파일 엣지 브라우저에서 보기
svg map 파일 엣지 브라우저에서 보기

 

html 적용

svg 파일을 그 자체로 html 에 붙여넣으면 그만이다.

중간생략된 부분은 우리나라 지도 path 태그 내용이다.

너무 길기 때문에 생략하였다.

우리나라 지도를 받았다면 그냥 붙여넣으면 그만이다.

<!-- html5 기본템플릿 -->
<!DOCTYPE html>

    <!-- head -->
    <head>
        
        <!-- meta SEO 컨텐츠 -->
        <meta name="title" content="제목">
        <meta name="description" content="내용">
        <meta name="keywords" content="키워드">
        <meta name="author" content="작성자">
        <meta name="copyright" content="저작권">
        <!-- // -->

        <!-- meta 반응형 웹표준 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- // -->

        <!-- 스타일 -->
        <style></style>
        <!-- // -->

    </head>
    <!-- // -->

    <!-- body -->
    <body>
    
    	<svg baseprofile="tiny" stroke-linecap="round" stroke-linejoin="round" version="1.2" viewbox="0 0 2000 857" xmlns="http://www.w3.org/2000/svg">
        	<!-- 중간생략-->
        </svg>
        
    </body>
    <!-- // -->

    <!-- 자바스크립트 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- // -->

</html>

위의 파일을 그대로 다시 실행해 보았다.

잘 나오는 것을 볼 수 있다.

svg 파일 내용은 xml형태의 tag이기 때문에 html에 그대로 붙여넣기 하는 것만으로도 이미지를 표시할 수 있다.

울릉도는 있지만, 독도가 없다. 조금 아쉽다.

svg 공부 좀 해 보고 독도를 추가해봐야 겠다.

html에 svg 적용 결과
html에 svg 적용 결과

반응형

댓글