스타벅스 로고 SVG HTML 코드 (풀버전 + 심플버전)

안녕하세요. 오늘은 스타벅스 로고를 SVG 파일로 변환 후 HTML 코드로 표현해 보았습니다. 코드는 늘 그렇듯 코드팬에 올려두었습니다. 두 가지 버전이 있습니다. 글씨까지 들어있는 풀 버전이 있고 다른 하나는 사이렌 로고만 있는 심플 버전입니다. 하나씩 살펴보시기 바랍니다.

Full Version

See the Pen Starbucks_LOGO_FULL by rgy0409 (@rgy0409) on CodePen.

HTML 코드를 전체 복사 후 사용하시면 됩니다.

Simple Version

See the Pen Starbucks_LOGO_Simple by rgy0409 (@rgy0409) on CodePen.

이것도 마찬가지로 코드 전체를 복사 후 사용하시면 됩니다.

SVG 파일 만들기

스타벅스 로고는 아무래도 복잡합니다. 그래서 코드도 많아요. 따라서 이 코드를 다 쓰는것보다는 SVG 파일로 제작 후 해당 파일을 img 처럼 사용하는것이 효율적일지도 모릅니다. SVG 파일로 만드는건 간단합니다.

1. HTML 모든 코드를 전체 복사 함

2. 메모장에 붙여넣기 함

3. 저장 시 파일 확장자를 SVG로 저장함

이게 답니다. 간단하죠?

응용하기

이제 SVG 파일로 저장했으므로 해당 파일은 img 태그를 사용해서 편리하게 활용하시면 됩니다. 그냥 이미지 파일이라고 생각하고 사용하면 됩니다.

이런식으로 가로 크기만 지정해주면 원하는 크기대로 변경 가능합니다. SVG 이미지는 백터 방식이기에 크기를 확대해도 절대 이미지가 픽셀처럼 깨지지 않는 장점이 있습니다. 따라서 웹 기반에서 사용하기에 매우 안성맞춤인 이미지 포맷입니다. 오늘 내용 끝!