SVG

 

Jake Giltsoff의 오픈소스 프로젝트, 이수진의 번역, 안정민의 감수를 인용하여 글을 작성 합니다. 좋은 정보 글을 남겨주신 분들께 감사합니다. 링크를 누르시면 해당 레퍼런스로 이동합니다.

 

SVG 란?

확장 가능한 벡터 그래픽(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든 것이 될 수 있습니다. 일반적으로 웹 상 이미지 파일형식은 JPEG를 많이 사용합니다. SVG는 코드로 수정할 수 있기 때문에 (텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능합니다) 다른 이미지 형식보다 강력한 기능을 가지고 있습니다.

 

SVG를 사용해야 하는 이유.

우리는 픽셀의 시대를 살아가고 있습니다. 웹 디자이너와 웹 개발자들에게 픽셀이란 뗄레야 뗄 수 없는 친구이면서 골치덩어리입니다. 완벽한 웹 사이트를 위해서는 파일 용량을 줄여 성능을 높여야 합니다. 웹 상에 아이콘, 로고, 일러스트레이션 이미지 등을 사용한다면, SVG를 사용하는 것이 유일한 방법입니다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 모든 스크린에서 화질이 선명하며, 최소 용량이고, 편집과 수정이 쉽다는 장점을 지니고 있기 때문입니다.

 

SVG를 사용하는 방법 

저 같은 경우에는 디자인 툴을 피그마(Figma)를 이용하고 있습니다. 피그마의 경우 SVG 파일로 저장하는 기능이 아주 편하게 되어있어서 유용하게 쓰고있는데요. 다른 디자인 툴을 이용하시는 분들은 그에 맞게 이용하시면 됩니다. 

 

저의 경우 입니다.

 

원을 그려서 SVG로 저장한 후 HTML 코드를 입력하면!

 

이렇게 나와야 하는데 티스토리에서 SVG 이미지 업로드가 잘 안되네요.

 

<;svg width="461" height="525" viewBox="0 0 461 525" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="230.5" cy="262.5" rx="230.5" ry="262.5" fill="#D97979"/>
</svg>

 

코드로 표현하면 이런 식으로 표현 가능합니다.

파일 용량 줄이는 방법

SVG 최적화와 관련된 훌륭한 글들이 이미 많이 있지만, 그 중 가장 효과적이고 유용한 몇 가지 팁과 방법을 공유합니다. 별도로 해야할 추가 작업이 많지 않아 쉽게 도입하여 작업할 수 있습니다. SVG 파일 용량을 가장 효과적으로 최소화하려면 불필요한 코드를 제거하는 것이 가장 효과적입니다. SVGO는 가장 유명하고 최상의 도구로, 불필요한 코드를 모두 제거합니다. - 참고 : CSS / JS로 조작하려는 경우에는 주의하여 사용해야합니다. 파일을 과도하게 최적화하면, 추후 작업이 더 어려워질 수 있습니다. SVGO의 가장 편리한 기능은 빌드 프로세스에 추가하여 자동으로 사용할 수 있다는 것입니다. (또는 GUI를 사용할 수 있습니다) '불필요한 코드 삭제'에서 더 나아가 그래픽 편집기에서 추가 작업을 할 수 있습니다. 먼저 가능한 적은 수의 경로/도형을 사용해 작업을 했는지, 한 경로에 몇 개의 포인트가 있는지 확인합니다. 가능한 모든 요소를 결합하고 단순화하여, 경로 내 포인트 수를 최대한 제거합니다. VectorScribe는 일러스트레이터 플러그인으로 Smart Remove Brush Tool으로 전체 모양을 동일하게 유지하면서 포인트를 제거 할 수 있습니다.

 

웹에서 SVG를 표현하는 방법

웹에서 SVG를 사용하는 방법은 다양합니다. 일부는 유용하지만 피해야 할 것도 있습니다. 해상도 독립성 및 파일 용량의 최소화를 위해서는, SVG를 일반 이미지 형식과 같이 <img>로 참조하거나, CSS에서 background-image로 참조합니다.

 

SVG를 최대한 활용하려면 <object>을 사용하세요. 또는 HTTP 요청을 저장하기 위해 인라인으로 사용할 수 있지만 이미지는 캐시되지 않는 문제가 있습니다. 이미지처럼 동일하게 SVG를 사용하려면 <img>또는 background-image를 사용하세요. <iframe> 및 <embed>를 사용할 수 있겠으나 가장 좋은 방법은 아니므로 더 이상 설명은 하지 않겠습니다.

ObjectInlineImgBackground-imageCSS 조작JS 조작SVG 조작인터렉티브 SVG 애니메이션

가능	가능	일부 inline	일부 inline
가능	가능	불가능	불가능
가능	가능	가능	가능
가능	가능	불가능	불가능

참고 : '일부 inline'는 CSS <style>이 SVG 코드에 포함 된 경우에 한하여 작동합니다. 자세한 내용은 다음 부분을 참고하세요.

CSS조작

SVG의 가장 큰 장점은 CSS 사용해 스타일을 변경할 수 있다는 것입니다. 일부 페이지에서 파란색 아이콘을 주황색으로 바꾸고 싶을 때, 새 파란색 아이콘을 다시 만들지 않아도 됩니다.

SVG 스타일 변경 방법은 두 가지로, SVG 코드 내부에서 변경하는 방법(inline style)과 외부 스타일 시트(external style)로 변경하는 방법이 있습니다. 인라인 스타일에서는 <style> 태그와 <![CDATA [...]]>태그로 스타일을 묶습니다. 간혹 XML 파서가 특정 문자(예 : >)와 충돌 할 수 있기 때문에 이 방법을 사용하는 것이 가장 좋습니다. 현재 특별한 문자가 없는 경우에도 나중에 CDATA를 사용하여 추가 코드를 작성할 수 있습니다.

JS 조작

자바스크립트를 사용한 기본적인 SVG 변경 방법을 몇 가지 설명하고자 합니다. SVG 파일에 스크립트를 포함시키려면 파싱 오류를 방지하기 위해 <[!][CDATA [...]]>에 안에 코드를 작성해야합니다. <img> 또는 background-image에 보안을 적용하면 스크립트가 실행되지 않습니다. (페이지 내부에 잠재적 악성 코드 실행을 방지하기 위해)

외부 JS로 작업 할 때 (SVG 파일 내 코드를 삽입하지 않고) SVG가 인라인으로 HTML문서안에 내장되어 있으면, 다른 DOM요소처럼 타켓팅 할 수 있습니다. <object>를 사용하는 경우 contentDocument로 타겟팅 할 수 있습니다. 아래 예제보다 더 멋진 작품을 만들어 보세요.

고정너비 vs 반응형

반응형 웹 디자인에서는 이미지 스타일 지정을 위한 두 가지 옵션이 있습니다. 이미지를 고정 크기로 유지하고 필요할 경우 중단점에서 조정하거나 부모 컨테이너에 따라 페이지 크기를 조정할 수 있습니다.

SVG를 background-image로 사용하는 경우, 브라우저에게 혼란을 줄 수 있어 주의해야 합니다. 이미지 실제 사이즈에서 다른 사이즈 변경할 경우, background-size를 사용해 사이즈 축소 또는 잘라내기 등을 해야합니다.

사이즈 조정이 가능한 SVG를 만들 때, 다음과 같은 몇 가지 사항을 기억해야합니다. (background-image 구현과 함께)

애니메이션

SVG 애니메이션은 SMIL 사양을 기반으로 한 애니메이션 효과를 적용할 수 있습니다. CSS3 애니메이션 또는 JS 애니메이션을 사용할 수 있습니다. SVG 애니메이션과 CSS3 애니메이션을 함께 사용하면 거의 원하는 모든 것을 할 수 있습니다. SVG 애니메이션은 좀더 강력한 기능을 가지고 있습니다. Snap.svg와 같은 자바스크립트 라이브러리를 사용해 복잡한 애니메이션도 비교적 쉽게 만들 수 있습니다. 이 라이브러리는 필자의 자바스크립트 수준의 이상임으로, 아래 예제를 통해 살펴보시길 바랍니다.

SVG 애니메이션 기능은 매우 강력하지만, 실제로 제가 사용한 애니메이션은 일부라 너무 깊이 다루지 않겠습니다. 멋진 애니메이션을 만들고 싶겠지만, 모든 프로젝트가 이를 위해 소비할 수 있는 시간과 예산은 한정적입니다. 그래서 여러분들이 다루기 쉬운 훌륭한 온라인 튜토리얼이 있는 것입니다. 가장 좋은 점은 모든 구현 방법에서 작동한다는 것입니다. 기본적으로 애니메이션을 제어 할 SVG의 모든 경로와 모양에 하위 요소로 <animiate>를 추가 할 수 있습니다. 가장 좋은 점은 모든 애니메이션이 작동한다는 것입니다. Internet Explorer는 SVG 애니메이션을 지원하지 않습니다만, Internet Explorer에서도 작동하게 하려면 FakeSmile 등의 polyfill을 사용할 수 있습니다.

 

 

 

Jake Giltsoff의 오픈소스 프로젝트, 이수진의 번역, 안정민의 감수를 인용하여 글을 작성 합니다. 좋은 정보 글을 남겨주신 분들께 감사합니다.