SVG(Scalable Vector Graphics) 이미지 형식 가이드

인터넷에서 벗어날 수 없는 한 가지 측면이 있습니다. 바로 이미지입니다. 웹의 초창기에는 엄격한 텍스트 전용 작업이었습니다. 그러나 이제 선명한 영상을 표시하는 데 도움이 되는 전용 이미지 형식이 있습니다. SVG(Scalable Vector Graphics) 형식은 사용 가능한 가장 최신의 유연한 형식 중 하나입니다.

나중에 더 자세히 설명하겠지만 SVG는 프런트 엔드에 이미지로 표시되는 데이터 모음입니다. 이것은 CSS(Cascading StyleSheets)를 사용하여 이미지를 조작할 수 있음을 의미합니다. 또한 품질 손실 없이 필요에 따라 크기를 조정할 수 있습니다.

이 게시물에서 우리는 Scalable Vector Graphics와 그것들이 당신을 어떻게 도울 수 있는지에 대해 더 많이 이야기할 것입니다. 또한 WordPress 웹 사이트에 포함하는 방법에 대해서도 설명합니다.

가장 일반적인 웹 이미지 형식에 대한 빠른 입문서

SVG와 이를 사용하는 방법으로 넘어가기 전에 웹에 사용하는 기본 이미지 형식에 대해 이야기할 가치가 있습니다. 주의할 사항이 세 가지 있습니다.

• 합동 사진 전문가 그룹(JPEG). 이름에서 알 수 있듯이 디지털 카메라로 찍은 사진을 표시하려는 경우 이 형식이 적합합니다.
• 휴대용 네트워크 그래픽(PNG). PNG 형식을 사용하여 Adobe Illustrator에서와 같이 생성된 그래픽을 표시할 수 있습니다.
• 그래픽 교환 형식(GIF). 이봐, 모두는 소셜 미디어에서 반응으로 사용하기 위해 TV 쇼의 재미있는 클립을 좋아합니다! GIF는 휴대가 가능한 애니메이션 그래픽을 위한 완벽한 형식입니다.

일부는 원하는 형식을 선택하지만 이것이 최적의 접근 방식은 아닙니다. 예를 들어 모든 이미지를 GIF로 만들기로 선택하면 천문학적인 파일 크기와 품질이 떨어지는 영상을 볼 수 있습니다. 대조적으로 PNG가 더 최적의 형식이기 때문에 그래픽에 JPEG를 사용하고 싶지 않을 것입니다.

확장 가능한 벡터 그래픽 형식이란

우리는 일부 영역에서 기술을 얻을 것이기 때문에 이 섹션에서 우리와 함께 참기를 원할 것입니다. 또한 SVG의 개념은 혼란스러울 수 있습니다.

확장 가능한 벡터 그래픽은 존재하지 않습니다(일종의). 사실, 그것들은 그래픽이나 이미지가 아니라 XML(Extensible Markup Language)의 한 형태입니다. 모르는 사람을 위해 이것은 HTML과 가까운 형제이지만 해당 언어의 일부 측면(예: 미리 정의된 태그)이 없습니다.

이미 이해하고 있는 비교로 CSS를 사용하여 모양을 만드는 방법을 고려하십시오. 이것은 우리가 곧 더 이야기할 것입니다. 이 CSS가 표준 파일 형식 및 구조(예: image.svg )를 사용하여 호출하는 문서 래퍼로 구워졌다고 상상해 보십시오.

HTML이 헤더, 단락, 섹션, 목록 등을 정의하는 프레임워크를 제공하는 것처럼 SVG는 원 및 직사각형과 같은 모양을 정의하는 프레임워크를 제공한다고 말하는 것이 더 정확합니다. 그러나 이것은 여전히 ​​SVG 형식이 있는(때로는 필요한) 이유를 설명하지 못합니다. 이에 대해서는 다음에 이야기하겠습니다.

SVG가 있는 이유

SVG 이전에는 PNG를 사용하여 그래픽을 표시했습니다. 웹의 초기 이미지는 GIF일 수 있지만 일반적으로 PNG가 지배적인 이미지 형식입니다. 질문은 "왜 SVG가 있습니까?", "현재 이미지 형식에 SVG가 해결할 수 없는 것은 무엇입니까?"라는 질문이 아닙니다. 답은 역동성입니다.

기본 웹 이미지 형식을 다시 살펴보면 두 가지가 생성된 그래픽(JPEG 및 GIF)에 적합하지 않습니다. 이것은 PNG에 부담을 줍니다. 그러나 PNG는 현재 최신 웹에서만 볼 수 있는 몇 가지 문제를 겪고 있습니다.

• 이미지를 오프라인으로 만들고 특정 형식으로 내보내는 점에서 정적입니다. 이것은 다소 융통성이 없다는 것을 의미합니다.
• 추가로 이미지의 '메이크업'은 변경할 수 없습니다. 만들고 표시할 장치가 많다는 점을 감안할 때 때때로 이러한 '뷰포트'에 적응해야 합니다. PNG를 사용하여 데스크톱 및 주요 모바일 장치에 대한 모든 로고 크기를 만드는 데 필요한 노력을 기울이십시오.
• PNG는 가벼울 수 있지만 이미지 최적화가 이루어지도록 하는 것은 디자이너와 사이트 소유자의 책임입니다. PNG는 최적화 없이 무거울 수 있으며 때로는 메가바이트를 넘을 수도 있습니다.

게다가 PNG는 충분히 높은 이미지 품질을 제공할 수 있는 옵션이 거의 없었던 시기에 공백의 일부를 채웠습니다. 당시 CSS는 초기 단계에 있었고 지금과 같은 디자인 및 개발 범위가 아직 없었습니다.

예를 들어, 2010년 이후 border-radius 속성만 사용할 수 있었습니다. 이를 통해 둥근 모서리와 원을 정의할 수 있습니다. 버튼에서 작동하는 것을 많이 볼 수 있습니다.

CSS를 사용하여 화면에 맞게 조정하고 조정할 수 있는 모양을 만들지만 Scalable Vector Graphics는 더 많은 작업을 수행할 수 있습니다. 사실, 당신은 이것을 하기 위해 CSS가 아니라 SVG를 사용하게 될 것입니다. 비록 그것들이 마법의 총알은 아니지만 말입니다.

확장 가능한 벡터 그래픽의 장점

다른 모든 이미지 형식과 마찬가지로 Scalable Vector Graphics는 완벽하지 않습니다. 물론 긍정적인 부분이 많이 있습니다.

• SVG는 종종 사용자의 추가 개입 없이 장치의 크기에 맞습니다. 이렇게 하면 개발 또는 생성 시간이 단축됩니다.
• SVG가 하나만 필요하기 때문에 이미지에 대한 관련 파일은 작습니다. 대조적으로 PNG 로고는 몇 가지 다른 크기와 치수를 제공해야 합니다. 이것은 서버 공간을 차지합니다.
• 게다가 SVG는 킬로바이트의 비용으로 하나의 파일만 로드하면 되므로 PNG보다 성능이 뛰어납니다. PNG 파일 패키지는 품질, 수량 ​​및 최적화에 따라 메가바이트 단위가 될 수 있습니다.

전반적으로 SVG로 다른 이미지 형식보다 더 많은 작업을 수행할 수 있습니다. 개발자와 그래픽 디자이너 모두 코드를 통해 또는 전용 드로잉 앱에서 일반적인 생성을 내보내는 방식으로 SVG를 생성할 수 있습니다. 웹 개발과 더 밀접하게 관련되어 있기 때문에 채택이 증가하고 있습니다.

확장 가능한 벡터 그래픽의 단점

그러나 모든 것이 장밋빛은 아닙니다. SVG에는 여전히 알아야 할 몇 가지 문제가 있습니다.

• 대부분의 다른 핵심 웹 측면과 달리 기술은 발전하고 있습니다. 많은 사람들이 Scalable Vector Graphics에서 많은 것을 기대하기 때문에 할 수 있는 것과 하고 싶은 것 사이에는 '갭'이 있습니다.
• 기본 SVG 지원은 대부분의 브라우저에서 사용할 수 있지만 사용하는 브라우저에 따라 전체 기능을 사용할 수 없습니다. 다시 말하지만, SVG에는 아직 명확하지 않은 더 많은 잠재력이 있습니다. 형식이 무엇을 할 수 있는지 보려면 고급 기능에 대한 더 나은 브라우저 지원이 필요합니다.
• 경우에 따라 SVG 이미지가 덜 정확하거나 보기에 좋지 않다는 것을 알 수 있습니다. 예상대로 사이트 로딩에 의존해야 하기 때문입니다. 오류 때문에 웹 페이지를 다시 로드해야 했던 시간을 기억할 수 있다면 SVG 이미지만으로 이러한 일이 발생하는 것을 이미지화할 수 있습니다.

우리는 또한 어떤 경우에는 코딩 지식 없이 SVG를 만드는 것이 더 어렵다고 말합니다. Affinity Designer 및 Adobe Illustrator와 같은 그래픽 프로그램에서 훨씬 더 나은 지원이 있습니다. Google Drawing과 같은 앱에서 SVG 내보내기도 지원합니다.

이것은 개선된 영역이지만 여전히 다른 이미지 형식에 비해 약간 뒤쳐져 있습니다.

이러한 단점에도 불구하고 이를 완화할 수 있습니다. 물론 기본적인 사용법의 경우 거의 바로 구현할 수 있습니다. 사실 WordPress는 몇 단계만 거치면 이러한 지원을 제공하며 이에 대해서는 다음에 논의하겠습니다.

WordPress 웹 사이트에서 SVG를 사용하는 방법

나쁜 소식은 작업 없이 SVG를 WordPress에 업로드하려는 경우 업로드할 수 없다는 것입니다. 현재 Scalable Vector Graphics 지원과 관련된 한 가지 추가 문제는 WordPress에서 보안상의 이유로 이러한 이미지를 표준으로 업로드할 수 없다는 것입니다.

그 이유는 이 기사의 범위를 벗어납니다. 간단히 말해서 SVG 형식은 실제 이미지가 아닌 문서이기 때문에 악의적인 사용자가 잠재적인 스크립팅 공격을 만들 수 있습니다. 이것이 의미하는 바는 더 안전한 대안을 찾아야 한다는 것입니다.

웹의 다른 곳에서 SVG 업로드를 활성화하기 위해 functions.php 파일에 일부 코드를 추가하는 지침을 보게 될 것입니다. 그러나 보안을 보장할 수 없기 때문에 이 단계를 거치지 않을 것입니다. 대신 WordPress로 자주 하던 일을 할 수 있습니다. 플러그인으로 전환하세요. SVG 지원을 권장합니다.

플러그인을 설치하고 활성화하면 WordPress 내에서 설정 > SVG 지원 화면으로 이동합니다. 그러면 몇 개의 화면이 표시되지만 관리자로 제한을 선택하기만 하면 됩니다. 설정 패널의 확인란을 선택합니다.

기본적으로 플러그인은 모든 사용자가 SVG를 업로드할 수 있도록 합니다. 이것은 고유한 보안 문제를 기반으로 하는 나쁜 소식일 수 있으며, 이것이 바로 WordPress가 애초에 해당 파일을 업로드할 수 없도록 하는 이유입니다. 그러나 이 상자를 선택하면 플러그인이 사이트 관리자에게만 업로드를 제한하고 SVG를 표준으로 더 안전하게 사용합니다.

요약하자면

웹에 이미지를 표시하는 방법에는 여러 가지가 있으며 대부분의 사람들은 사용하는 형식에 대해 두 번 생각하지 않습니다. 그러나 시간을 내어 필요에 맞게 형식을 맞추면 모든 화면에서 멋지게 보이는 상세하고 선명한 이미지를 얻을 수 있습니다.

이 게시물을 통해 우리는 Scalable Vector Graphics에 대한 많은 정보를 제공했습니다. CSS를 사용하여 이미지를 필요에 맞게 조정하고 조작 범위는 PNG 및 JPEG보다 훨씬 큽니다. 또한 가볍기 때문에 작은 화면과 열악한 인터넷 연결에 적합합니다.

웹사이트에서 Scalable Vector Graphics를 사용하고 싶습니까? 그렇다면 이 문서가 도움이 될까요? 아래 의견 섹션에서 알려주십시오!

이미지 크레디트: GDJ.