실용 초보자 용 SVG 가이드

/2015-02-10 14:44:49/
Jesiyah
/제도법/

형식이 특별히 새로운 것은 아니지만 SVG 이미지는 웹 사이트 디자인에서 점점 인기를 얻고 있습니다. 모든 주요 웹 브라우저는 형식을 지원하며 SVG는 웹의 이미지에 대한 생각과 렌더링 방식을 바꾸고 있습니다.

왜 그렇게 인기가 있습니까? SVG 파일과 정확히 다른 점은 무엇입니까? 현재이 파일 형식을 시작하는 데 필요한 답변과 그 밖의 모든 내용이 있습니다. 약간의 보너스로이 게시물의 모든 이미지는 Creative Market의 SVG로 제공됩니다.

Envato Elements 살펴보기

SVG 란 무엇입니까?

SVG (Scalable Vector Graphics)는 웹용으로 개발 된 벡터 기반 이미지 형식입니다. 이전 Design Shack 기사에서 벡터 및 래스터 형식에 대해 자세히 알아볼 수 있습니다.

사용자가 모든 픽셀 (있는 경우)을 볼 수있는 고화질 디스플레이 덕분에 형식의 인기가 높아졌습니다. SVG는 벡터 형식이므로 이미지는 크기에 상관없이 동일한 방식으로 완벽하게 렌더링됩니다.

마크 업 언어는 1999 년에 W3C로 더 널리 알려진 월드 와이드 웹 컨소시엄 (World Wide Web Consortium)에 의해 처음 개발되었습니다. W3C는 SVG를“2 차원 그래픽 응용 프로그램 및 이미지를 설명하기위한 마크 업 언어 및 관련 그래픽 스크립트 인터페이스 세트로 정의합니다. ” 모든 최신 브라우저에서 지원되므로 SVG 파일이 올바르게 렌더링되는지 여부에 대해 걱정할 필요가 없으며 장치 유형에 관계없이 작동합니다.

실용적인 적용

그렇다면 왜 SVG가 인기를 끌고 더 많은 디자이너가 SVG를 사용하고 있습니까? 간단하게 작동하기 때문입니다.

SVG 파일은 작고 확장 가능합니다. 형식은 모양에 가장 적합하지만 다양한 실제 응용 프로그램이 있습니다. 브랜드 로고, 아이콘, 사용자 인터페이스 요소 및 기타 많은 디자인 비트가 SVG 형식으로 작동 할 수 있습니다. 가장 큰 보너스는 벡터입니다. 따라서 SVG 이미지는 거의 모든 크기로 사용할 수 있습니다. (가장 작은 파일 중 일부는 너무 클 수 있습니다.)

SVG 파일은 조작 및 제어가 쉽습니다. SVG를 정적 이미지로 저장할 수있을뿐만 아니라 대화 형 기능과 필터를 추가하여 이미지를 더욱 재미있게 만들 수 있습니다. (SVG 파일은 애니메이션과 색상으로 표시 될 수 있습니다.)

SVG 사용을위한 몇 가지 실용적인 응용 프로그램은 다음과 같습니다.

로고 또는 이미지
배경 이미지로
버튼과 같은 객체로
매핑
차트 또는 그림

일반적으로 SVG는 시간이 지남에 따라 또는 장치 유형에 따라 진화하거나 변경되거나 애니메이션 또는 기타 동적 효과를 포함 할 수있는 이미지에 가장 적합합니다. 로고, 스케치, 도형, 그래픽 및 차트 또는 기타 간단한 이미지와 같은 시각적 형식을 사용하십시오.

SVG 사용의 장점

그렇다면 왜 신뢰할 수있는 JPG 나 GIF에서 SVG로 옮기겠습니까? 이 형식이 프로젝트에서 가장 잘 사용되는 데는 여러 가지 이유가 있습니다. (그리고 SVG를 인쇄에 사용할 가능성도 있습니다.)

SVG는 벡터 형식입니다. 반응 형 디자인에 대해 생각할 때 장치 크기에 따라 이미지 크기가 변경되는 경우가 중요합니다. SVG는 하나의 파일이 모든 작업을 수행 할 수있을 정도로 작으며 더 큰 화면에서 품질이 손실되지 않습니다.
SVG 이미지와 비헤이비어는 XML로 정의되므로 이미지를 색인, 스크립팅 및 압축 할 수 있습니다.
다양한 디자인 기법을 포함하는 것과 같이 다른 이미지로 수행 할 수있는 SVG 이미지로 거의 모든 작업을 수행 할 수 있습니다. 필터, 블렌드 모드, 버 효과, 색상, 클리핑 및 마스킹, 그림자 및 기타 원하는 기법을 쉽게 추가 할 수 있습니다.
SVG 파일에 액세스 할 수 있습니다.
SVG는 공개 웹 표준과 함께 작동합니다.
텍스트 기반 코드를 사용하거나 그리는 이미지를 사용하여 SVG를 만들 수 있습니다. 이를 통해 필요에 따라 다른 분야의 전문 지식 수준에 따라 자유를 얻을 수 있습니다.
파일 크기가 작고 축소 할 수 있습니다. 이것은 다른 현명한 그래픽이 아닐 경우로드 시간이 길다는 것을 의미합니다. (항상 보너스입니다.)

SVG 사용의 단점

당신은 아마 모든 이점을 읽은 후 SVG에 팔릴 것입니다. 그러나 고려해야 할 몇 가지 부정적인 점이 있습니다.

Internet Explorer 8 이하와 같은 이전 브라우저는 SVG를 지원하지 않습니다. 해결 방법을 찾거나 신경 쓰지 않을 수도 있지만 이미지를 볼 수없는 일부 사용자가있을 수 있음을 알아야합니다.
SVG는 사진과 같은 복잡한 이미지에는 작동하지 않습니다. 모양과 선 전용으로 설계된 형식입니다.

SVG의 다음 단계

SVG의 미래는 막 시작되었습니다. 채택 된 모바일 이미지 형식 (및 표준)으로서 SVG의 사용 및 개발은 계속 증가 할 것입니다.

W3C에 따르면, "SVG 2는 현재 개발 중이며 SVG에 새로운 사용 편의 기능을 추가 할뿐만 아니라 HTML, CSS 및 DOM과보다 긴밀하게 통합하고 일부 브라우저에서 지원하지 않는 기능은 더 이상 사용하지 않을 것입니다."

다른 추가 사항도 던져지고 있습니다. 인쇄 하드웨어 회사는 인쇄 프로세스에 SVG를 더 잘 사용하는 방법을 찾고 있으며 Adobe 및 Canon과 같은 업계 리더의 지원을 받고 있습니다. 매핑 및 GIS의 사용도 확대되어 더 나은 매핑 및 확대 / 축소 기능을 제공합니다.

실제로 생각하기 시작할 때 SVG를 사용하여 웹 및 인쇄 디자인의 프로젝트에 SVG를 사용하고 구현하는 방법에 대한 거의 끝없는 기회가 있습니다. (이것은 벡터 기반 형식의 아름다움 중 하나입니다.)