[정리] 클론 코딩시 SVG 이미지 가져오기

사용 예시 출처 > '카카오 AI 사이트 logo'

 

 

처음 개발자 도구에서 이미지를 가져 왔을 때 클래스명, fill, 제목 등등 사용자가 작성한 모든 것이 담겨 온다

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 18" fill="#000000" class="ico_logo" data-v-6776bf5c="">
	<title>kakaoi</title>
	<use xlink:href="#icoLogoFoot"></use>
</svg>

 

필요한 부분만 수정, 다듬기(대부분의 로고 형태는 사이트에서 링크 되므로 a클래스 안에 넣어주자)

<a href="#" class="logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 18">
        <use href="#icon-logo" />
    </svg>   
</a>

 

패스 부분 마저 가져오기

path는 svg 클래스 안에 포함되어 있어야 하는데, 패스 길이가 어마어마 하니 작업에 방해가 된다
그렇기 때문에 사용 하는 svg 이미지가 2개 이상 정도 되면 svg 클래스를  만든 후 따로 모아서 빼주는게 좋다

<svg style=display:none;>
    <path id="icon-logo" d="M81.7941245,14.94769298 75653071964582448....생략"></path>
</svg> 

 

css 설정

html 입력이 끝났는데 이미지가 나오지 않을 때는 색상과 크기를 반드시 지정 해준다

(svg 이미지는 한계 없이 유연)

/* 노말라이즈 */
body,
ul,
li {
    margin: 0;
    padding: 0;    
}

/* 라이브러리 */
svg.ico_logo {
    display:none;
}
.logo > svg {
    display:block;
    width:100%;
}

/* 커스텀 */

/* 로고 */
.logo > svg {
    width:500px;    
    margin-left:30px;
    fill:#00000;
}

 

코드펜 참고 >>>

See the Pen wvzPBvR by issue72y (@issue72y) on CodePen.