JPG 대신 SVG 파일을 사용하는 이유

SVG의 장점

웹 사이트를 구축하고 해당 사이트에 이미지를 추가 할 때 결정해야하는 가장 중요한 사항은 올바른 파일 형식을 사용하는 것입니다. 그래픽에 따라 하나의 형식이 다른 형식보다 훨씬 낫습니다.

많은 웹 디자이너는 JPG 파일 형식에 익숙하며이 형식은 사진과 같이 색 깊이가 깊은 이미지에 적합합니다. 이 형식은 일러스트 아이콘과 같은 단순한 그래픽에서도 작동하지만 그 경우 가장 적합한 형식은 아닙니다. 이러한 아이콘의 경우 SVG가 더 나은 선택입니다. 정확히 이유를 살펴 보겠습니다.

SVG는 벡터 기술입니다.

이는 래스터 기술이 아니라는 것을 의미합니다. 벡터 이미지는 수학을 사용하여 작성된 선의 조합입니다. 래스터 파일은 픽셀 또는 작은 사각형 색상을 사용합니다. 이것이 SVG가 확장 성이 뛰어나고 응답 성이 뛰어난 웹 사이트에 완벽한 이유 중 하나로, 기기의 화면 크기와 함께 확장되어야합니다. 벡터 그래픽은 수학 세계에 존재하므로 크기를 변경하려면 숫자를 변경하기 만하면됩니다. 래스터 파일은 크기 조정과 관련하여 종종 상당한 재검토가 필요합니다. 벡터 이미지를 확대하려면 시스템이 수학적이며 브라우저가 해당 수학을 다시 계산하고 선을 그 어느 때보 다 매끄럽게 렌더링하므로 왜곡이 없습니다. 래스터 이미지를 확대하면 화질이 떨어지고 파일이 흐릿 해지기 시작합니다. 수학은 확장되고 축소되며 픽셀은 그렇지 않습니다. 이미지를 해상도 독립적 인 상태로 유지하려면 SVG가 해당 기능을 제공합니다.

SVG는 텍스트 기반입니다.

그래픽 편집기를 사용하여 이미지를 만들면 프로그램에서 완성 된 아트 워크를 캡처합니다. SVG는 다르게 작동합니다. 여전히 일부 소프트웨어 프로그램을 사용할 수 있으며 사진을 그리는 것처럼 느낄 수 있지만 최종 제품은 벡터 선 또는 단어 (페이지의 벡터 일뿐입니다)의 모음입니다. 검색 엔진은 단어, 특히 키워드를 찾습니다. JPG 를 업로드하면 그래픽의 제목과 대체 텍스트 문구로 제한됩니다. SVG 코딩을 사용하면 가능성을 넓히고 더 많은 검색 엔진 친화적 인 이미지를 만들 수 있습니다.

SVG는 XML이며 다른 언어 형식 내에서 작동합니다.

이것은 텍스트 기반 코드로 돌아갑니다. SVG에서 기본 이미지를 만들고 CSS 를 사용하여 이미지를 만들 수 있습니다. 예, 실제로 SVG 파일 인 이미지를 가질 수 있지만, SVG를 페이지에 직접 코딩하고 나중에 편집 할 수도 있습니다. 페이지 텍스트 등을 변경하는 것과 같은 방법으로 CSS로 변경할 수 있습니다. 이것은 매우 강력하며 쉽게 편집 할 수 있습니다.

SVG 쉽게 편집 가능

이것은 아마도 가장 큰 장점 일 것입니다. 당신이 광장의 사진을 찍을 때, 그것은 그것이 무엇인지입니다. 변경하려면 장면을 재설정하고 새 사진을 찍어야합니다. 당신이 그것을 알기 전에, 당신은 사각형의 40 이미지를 가지고 있으며, 여전히 그것을 제대로 가지고 있지 않습니다. SVG를 사용하여 실수를하면 텍스트 편집기에서 좌표 또는 단어를 변경하면 완료됩니다. 올바르게 배치되지 않은 SVG 원 을 그렸기 때문에 이것과 관련 될 수 있습니다. 내가해야만하는 것은 좌표를 조정하는 것이 었습니다.

JPG 이미지가 무거울 수 있습니다.

이미지를 실제 크기로 확대하려면 파일 크기가 커집니다. SVG를 사용하면 파운드를 아무리 크게해도 파운드는 여전히 파운드입니다. 너비가 2 인치 인 정사각형은 너비가 100 인치 인 정사각형과 같습니다. 파일 크기는 변경되지 않으며 페이지 성능 측면에서 뛰어납니다!

그래서 어느 것이 더 낫습니까?

그렇다면 SVG 또는 JPG의 형식은 무엇입니까? 그것은 이미지 자체에 달려 있습니다. 이것은 "무엇이 더 좋은지, 망치 나 스크루 드라이버인가?"와 같은 질문입니다. 그것은 당신이 성취해야 할 것에 달려 있습니다! 이러한 이미지 형식에서도 마찬가지입니다. 사진을 표시해야하는 경우 JPG가 최선의 선택입니다. 아이콘을 추가하는 경우 SVG가 더 나은 선택 일 수 있습니다. SVG 파일을 사용하는 것이 적절한시기에 대해 자세히 알아볼 수 있습니다.

Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 : 6/6/17