SVG를 사용해야하는 6 가지 이유

SVG를 사용해야하는 6 가지 이유

확장 가능한 벡터 그래픽 (SVG)는 모든 데스크톱 및 모바일 브라우저에서 보편적으로 지원되는 이미지 유형입니다. 웹 및 앱 디자인에 사용하는 이점은 엄청납니다. 여섯 가지 가장 큰 이유에 대해 설명하겠습니다.

01. 해상도에 독립적이고 반응이 좋습니다.

다른 모든 요소의 크기를 조정하는 것과 동일한 방식으로 이미지 크기를 조정할 수 있습니다. 반응 형 웹 디자인 . SVG의 벡터 특성으로 인해 이미지는 해상도에 독립적입니다. 이미지는 새로운 스마트 폰에서 볼 수있는 아름다운 ~ 285ppi 픽셀 밀도 디스플레이에서 ~ 85ppi의 표준 모니터에 이르기까지 모든 디스플레이에서 선명하게 보입니다.

SVG를 사용하면‘@ 2x. png '이미지 (IE8을 지원할 필요가없는 경우)하고 모든 아이콘에 대해 하나의 파일을 만듭니다. SVG 이미지는 반응 형 디자인에서 다른 모든 요소의 크기를 조정하는 것과 동일한 방식으로 크기를 조정할 수도 있습니다.

수상 경력에 빛나는 Sarah Drasner의 사이트에서 SVG 활용

수상 경력에 빛나는 Sarah Drasner의 사이트에서 SVG 활용

02. 탐색 가능한 DOM이 있습니다.

브라우저 내부의 SVG에는 자체 DOM이 있습니다. SVG는 브라우저에서 별도의 문서로 취급 된 다음 페이지의 일반 DOM 내부에 배치됩니다. 이것은 'viewBox'속성에 중요합니다. 어떤 크기의 캔버스 에든 이미지를 그릴 수 있지만 SVG 내부의 속성을 업데이트하지 않고도 다른 크기의 브라우저에 표시 할 수 있기 때문입니다. 이 분리되고 탐색 가능한 DOM은 CSS 및 JavaScript를 사용하여 SVG 내부 요소와 상호 작용하는 방식이기도합니다.

03. 애니메이션 가능

SVG 내부의 요소를 애니메이션으로 만들어 진정으로 놀라운 대화 형 경험을 만들거나 애니메이션을 사용하여 인터페이스, 이미지 또는 아이콘에 약간의 터치를 추가 할 수 있습니다. 애니메이션은 CSS, Javascript의 Web Animations API 또는 SVG의‘ ’태그.

SVG 애니메이션 개발의 흥미로운 시점에 있습니다. Google은 CSS 애니메이션과 웹 애니메이션 API를 선호하는 Chrome 45에서 SMIL (SVG의 애니메이션 태그)을 지원 중단했지만 이후 지원 중단을 중단했습니다.

04. 스타일링 가능

클래스 이름이나 ID를 사용하면 일반적으로 사용하는 속성과 약간 다른 속성 만 사용하여 SVG 내부의 요소를 스타일링 할 수 있습니다. '색상'대신 '채우기'를 사용하고 테두리 대신 '획'을 사용합니다. 페이지에서 SVG를 사용하는 방식에 따라 SVG 스타일 지정에는 몇 가지 제한이 있습니다.

SVG를 이미지 태그로 사용하는 경우 Internet Explorer에서 내부 요소의 스타일을 지정할 수 없습니다. 그러나 polyfill이 있습니다. svg4everybody –이 문제를 해결할 것입니다.

Traveler Today가되어보세요 SVG 애니메이션

05. 인터랙티브

JavaScript를 사용하면 탐색 가능한 DOM 덕분에 SVG 내부의 요소와 상호 작용할 수 있습니다. 이를 통해 HTML 및 CSS에서와 동일한 방식으로 SVG를 사용하여 대화 형 요소를 만들 수 있습니다.

수채화로 풍경을 그리는 방법

또한 새로운 Web Animations API를 사용하여 JavaScript를 통해 애니메이션을 적용 할 수 있으므로 간단하고 복잡한 상호 작용과 애니메이션을 프로그래밍 할 수 있습니다. 또한 SVG 워크 플로의 속도를 높이기 위해 만들어진 다양한 자바 스크립트 라이브러리를 사용할 수 있습니다.

06. 작은 파일 크기

SVG의 벡터 특성 (좌표 집합에서 가져온 이미지 임)로 인해 최적화 된 파일 크기는 거의 모든 다른 이미지 파일 유형에 비해 작습니다. 명령 줄 도구에서 포인트와 그룹을 수동으로 제거하는 등 SVG를 최적화하는 방법에는 여러 가지가 있지만 SVGOMG 최적화 과정에서 변경된 사항을 시각적으로 보여주는 GUI와 다양한 조정 옵션이 있습니다.

SVG는 반응이 빠르고 애니메이션이 가능하며 복잡 할 수 있으므로 블로그 게시물 또는 기타 온라인 미디어의 큰 영웅 이미지 나 이미지에 SVG를 사용하지 않아야 할 이유가 없습니다.

디자이너-관련성 있고 효과적인 유지

Generate New York에서 Dan Mall보기

더 이상 Photoshop 마스터가되는 것만으로는 충분하지 않습니다. 디자이너는 관련성과 효율성을 유지하기 위해 자신의 기술을 키워야하지만 어떤 것에 집중할 가치가 있습니까? 디자이너가 코딩을 배워야하고, 그렇다면 제한된 코드 지식이 재능있는 엔지니어와 함께 작업하는 데 실제로 차이를 만들 수 있습니까? 디자이너는 Agile 워크 플로우에 어떻게 적응할 수 있습니까? 어쨌든 프로젝트 방법론이 중요합니까? 디자이너는 디자인 시스템을 만들고, 사용하고, 유지하는 데 어떤 역할을합니까?

SuperFriendly Director Dan Mall은 이러한 질문에 답하기위한 이야기와 관점을 공유합니다. 2018 년 4 월 25 일부터 27 일까지 뉴욕 생성 .

지금 티켓 받기

이 기사는 원래 전문가 가이드, 최신 기능 및 필수 리소스를 제공하는 크리에이티브 잡지 인 Web Designer 267 호에 게재되었습니다. 오늘 구독하세요.

관련 기사: