SVG가 2018 년에 어떻게 인수 될까요?
2018 년은 SVG의 해입니다. 이미지 파일 형식은 지난 몇 년 동안 꾸준히 인기와 사용이 증가하고 있지만 2018은 실제로 돌파구입니다.
고해상도 디스플레이를 사용하는 사용자와 매우 빠른 로딩 시간이 필요합니다. SVG 로의 전환은 큰 소리처럼 들릴 수 있습니다. 그렇지 않습니다.
SVG는 사용 및 구현이 쉽고 기존 파일을 실제로 변경할 필요가 없습니다. SVG로 새로운 이미지를 추가하십시오. SVG와 관련하여 알아야 할 모든 것이 있습니다.
디자인 리소스 살펴보기
SVG는 웹을 위해 만들어졌습니다
Mozilla는 다음과 같이 설명합니다.
SVG는 벡터 이미지를 설명하기위한 XML 기반 언어입니다. 이미지에 표시하려는 모양과 해당 모양에 적용하려는 효과를 정의하기위한 다양한 요소가 있다는 점을 제외하면 HTML과 같이 기본적으로 마크 업됩니다. SVG는 컨텐츠가 아닌 그래픽을 표시하기위한 것입니다. 스펙트럼의 가장 간단한 끝에는와 같은 간단한 모양을 만드는 요소가 있습니다. 고급 SVG 기능에는 (변환 매트릭스를 사용하여 변형 색상), (벡터 그래픽의 애니메이션 부분) 및 (이미지 상단에 마스크 적용)이 포함됩니다.
웹 디자이너를위한 SVG의 주요 장점은 코드 나 텍스트 편집기에서 간단한 SVG 렌더링을 생성하는 기능과 Adobe Illustrator와 같은 프로그램에서 복잡한 그래픽을 그릴 수 있다는 것입니다. SVG 텍스트에 액세스 할 수 있습니다. SVG는 스타일과 스크립트가 쉽습니다. 어떤 크기로도 잘 렌더링되는 벡터 형식으로 만듭니다. SVG 형식은 최신 브라우저에서 지원되며 미래에 대비하고 압축률이 높습니다.
단점 중 하나는 SVG 디자인이 복잡해지고 처음에는 만들기가 조금 더 어렵다는 것입니다. 다른 문제는 성능이 저하 된 일부 브라우저는 자신이 무엇인지 이해하지 못한다는 것입니다.
SVG에 대한 이해가 필요하십니까? SVG에 대한 초보자 안내서가 있습니다.
디자이너가 SVG를 사용하는 방법
SVG의 장점 중 하나는 SVG로 다양한 작업을 수행 할 수 있다는 것입니다. SVG는 다음 용도로 사용될 수 있습니다.
- 로고
- 배경, 패턴 및 질감
- 생기
- 반응 형 이미지
- 아이콘
설계자는 벡터 형식이 적용 가능한 솔루션 인 설계의 모든 요소에 SVG를 사용할 수 있습니다. JPG, PNG 및 GIF를 다른 형식으로 대체 할 수 있습니다.
벡터 형식 규칙
더 많은 벡터 형식을 사용할 가능성이 큽니다. SVG는 해상도와 무관합니다. 이미지가 어디에서나 멋지게 보일 것이므로 엄청난 보너스입니다.
SVG 이미지 작업에있어 특히 좋은 점은 실제로 이미지를 구현하기 위해 워크 플로우를 변경할 필요가 없다는 것입니다. Illustrator 또는 Sketch와 같은 소프트웨어로 디자인하는 경우 최종 내보내기 이외의 프로세스는 동일합니다. 한 가지 중요한 점은 Illustrator에서 텍스트 요소를 윤곽선으로 바꾸고 싶지만 많은 사람들이 이미 그렇게한다는 것입니다.
SVG 파일을 준비 할 때 기억해야 할 한 가지 중요한 사항이 있습니다. 가능한 한 작게 유지하려면 필요없는 정크를 삭제하십시오. 웹상의 SVG에는 요소를 그리고 SVG 파일을 가능한 가장 좋은 방법으로 저장하는 데 유용한 팁이 있습니다.
SEO에 적합한 텍스트 기반 형식
SVG를 사용하면 검색 엔진에 정통한 디자이너에게도 약간의 보너스가 제공됩니다. SVG는 포맷팅에서 실제 텍스트를 사용하기 때문에 검색 엔진이 이미지를 더 잘 읽을 수 있습니다.
예, 다른 이미지와 함께 대체 정보를 추가 할 수 있지만 키워드를 넣을 공간이 너무 많습니다. SVG를 사용하면보다 검색하기 쉬운 이미지를 만들고 업로드 만하면됩니다. Google은 독립형 파일을 비롯하여 SVG가 HTML에 직접 포함 된 경우를 포함하여 모든 SVG 컨텐츠를 색인합니다.
SVG는 가벼움
매우 빠르게 얻을 수있는 다른 벡터 기반 파일 형식과 달리 SVG는 코드입니다. 코드가 빠릅니다. 그렇게 간단합니다. 음… 거의.
SVG로 저장 한 멋진 벡터 드로잉과 관련하여 너무 멀리 가기 전에 파일 크기를 확인하십시오. 투명도를 추가하면 PNG 형식이 기하 급수적으로 커질 수 있지만 이미지의 경로 및 채우기 수에 따라 SVG가 커지는 경향이 있습니다.
SVG가 크면 JPG 또는 PNG로 내보내십시오. (모순되는 것처럼 보일지라도 현실은 대부분의 디자이너가 계속해서 파일 형식을 이미지와 혼합하여 사용한다는 것입니다. 과거보다 더 많은 SVG를 사용할 것으로 예상됩니다.)
편집이 쉽다
아이콘이나 로고 또는 벡터 드로잉 소프트웨어의 드로잉에 익숙한 경우 편집 프로세스에 대한 변경 사항이 없습니다.
그러나 SVG를 쓰면 간절히 기다리고 있습니다. 텍스트 편집기에서 단어 나 좌표 또는 색상을 변경하고 변경하면됩니다. 그보다 쉽게 편집하는 것은 어렵습니다.
SVG로 스틸 이미지 또는 애니메이션 이미지 생성
스틸 이미지 나 동영상을 가질 수있는 대부분의 다른 이미지 형식과 달리 SVG는 두 가지 중 하나를 허용합니다. 스틸 이미지 나 애니메이션을 만들 수 있습니다. 그리고 그것은 모두 거의 같은 방식으로 작동합니다. (이 멋진 예제는 SVG 경로를 따라 요소를 애니메이션하는 방법에 대한 자습서입니다!)
이 작은 이점은 SVG를 디자이너 마음의 최전선으로 끌어 올리는 데 도움이됩니다. 새로운 도구 나 기술을 배울 필요는 없습니다. SVG와 함께 필요한 모든 것을 이미 갖추고 있습니다.
결론
SVG가 인수하기 시작한 해가 2018 년이되는 가장 큰 이유는 다음과 같습니다.
모든 사람들이 고해상도 디스플레이를 사용하면 벡터 형식이 실제로 사용됩니다. 모든 것이 완벽하게 확장되므로 픽셀 화에 대해 걱정할 필요가 없습니다. SVG는 훌륭한 로고 (정적 또는 반응 형), 그래프 및 배경, 아이콘 및 작은 이미지 및 애니메이션을 만듭니다. 파일은 작고로드 속도가 빠르며 웹 사이트 디자인에서 SVG를 구현할 때 큰 학습 곡선이 없습니다.
말 그대로 SVG 이미지 사용을 시작할 수 있습니다.
