WordPress에서 SVG를 사용하는 방법

SVG가 2000년대 초에 표준화되었음에도 불구하고 매우 매력적인 이미지 형식은 열악한 브라우저 지원으로 인해 많은 빛을 보지 못했습니다. SVG가 웹에서 사실상의 이미지 형식으로 빠르게 자리잡으면서 최근 몇 년 동안 이 모든 것이 크게 바뀌었습니다.

SVG와 사랑에 빠진 것은 그래픽 디자이너뿐만 아니라 전체 이미지 크기를 줄여 블로그 속도를 높이고자 하는 WordPress 사용자입니다. 이 게시물은 WordPress 기반 사이트에서 SVG를 사용하는 방법에 대한 주제를 탐색할 것입니다.

SVG 란 무엇입니까?

SVG(Scalable Vector Graphics)는 웹 및 앱 내에서 그래픽을 표시하기 위한 XML 기반 이미지 형식입니다. 기본적으로 SVG 파일은 SVG 이미지 내에서 사용되는 다양한 모양과 색상을 지정하는 XML 코드의 모음입니다.

또한 텍스트 편집기로 SVG 파일을 열 수 있으므로 기본 CSS3 및 JS 코드를 사용하여 쉽게 사용자 정의할 수 있습니다. 결과적으로 SVG는 다양한 유연성으로 인해 현대 웹 사용자에게 매우 선호됩니다.

가장 중요한 것은 W3C가 SVG를 업계 최고의 표준으로 인식한다는 것입니다. 따라서 SVG는 DOM, HTML 등과 같은 다른 웹 기반 기술과 완벽하게 함께 작동합니다.

SVG가 왜 중요한가요?

SVG 이미지는 벡터 기반이므로 SVG 이미지는 품질 손실 없이 화면 전체에 걸쳐 무한대로 확장될 수 있습니다. 이와 관련하여 핵심 상호 작용은 브라우저 XML입니다. 여기서 브라우저는 증가 또는 감소할 때마다 XML 사양을 표시합니다.

말할 필요도 없이 SVG 파일은 PNG 또는 JPEG와 같은 기존 형식보다 훨씬 유연합니다. CSS와 JavaScript 간의 직접적인 상호 작용은 이동 중에 SVG 이미지를 조정할 수 있음을 의미합니다. 이것은 새로운 디자인이나 다른 작업을 할 때 매우 중요합니다.

성능과 관련하여 SVG 이미지는 다른 이미지보다 크기가 훨씬 작은 경향이 있습니다. 결과적으로 일러스트레이션, 로고 및 아이콘이 벡터 그래픽으로 구축되는 것을 보는 것이 일반적입니다. 이것은 또한 많은 아이콘 글꼴의 개발로 이어졌습니다. 이에 대해서는 나중에 기사에서 간략하게 언급할 것입니다.

간단히 말해서 SVG는 유연성, 축소된 이미지 크기 및 WordPress 사이트의 이미지 성능 개선을 위한 강력한 기반을 제공합니다.

SVG 이미지는 어떻게 생성됩니까?

SVG 이미지를 만드는 방법은 '코드'를 작성하는 방법과 최신 그래픽 디자인 소프트웨어를 사용하는 방법이 있습니다. XML 스크립트를 작성하는 첫 번째 방법은 SVG 파일을 작성하는 전통적인 방법이지만 느리고 비효율적인 기술로 판명될 수 있습니다.

간단한 사각형 모음은 XML 형식으로 다음과 같이 보일 수 있습니다.

보시다시피 복잡한 그래픽에 이것을 반복적으로 작성하는 것은 발에 총을 쏘는 것과 같습니다.

다른 방법은 소프트웨어를 사용하는 것으로 SVG 그래픽을 구축하는 가장 빠르고 효율적인 방법입니다. 벡터 기반 소프트웨어를 사용하면 그래픽 생성에 집중하고 나중에 기성품 SVG 파일로 내보낼 수 있습니다.

Affinity Designer는 잘 알려진 전문 벡터 편집 프로그램이지만 Adobe Illustrator, Sketch, Figma 및 Inkscape와 같은 소프트웨어도 마찬가지입니다.

어떤 소프트웨어를 사용하기로 결정했든 정말로 중요한 것은 만들고자 하는 그래픽 유형에 대한 계획입니다. 내보내기 기능은 모든 최신 프로그램에서 동일하게 작동합니다.

말할 필요도 없이 SVG는 항상 동일한 XML 구조입니다. 따라서 SVG 이미지를 문서로 사용할 수 있지만 인라인으로 삽입할 수도 있습니다.

WordPress는 SVG를 지원합니까?

이상하게 들릴 수 있지만 WordPress 범위의 플랫폼은 실제로 SVG 파일 형식을 지원하지 않습니다. 그러나 심각한 보안 문제 때문입니다.

PNG/JPG/GIF 파일 유형과 달리 SVG는 래스터화된 이미지가 아니라 벡터입니다. 결과적으로 SVG는 JavaScript 악용의 위험에 노출되며 WordPress는 기본적으로 WordPress에서 SVG를 허용하지 않도록 선택했습니다. 모든 관점에서 의미가 있습니다.

WordPress 기고자들이 수년 동안 SVG에 대해 이야기했지만 대규모 보안 문제를 방지하기 위해 해결해야 할 각도가 너무 많습니다.

따라서 이 문제를 해결하는 유일한 방법은 플러그인을 사용하거나 테마 기능을 사용하여 SVG를 파일 형식으로 활성화하는 것입니다.

WordPress 웹 사이트에서 SVG 이미지를 활성화하는 방법은 무엇입니까?

플러그인 부분으로 이동하기 전에 테마 디렉토리의 functions.php 파일을 통해 WordPress에서 SVG를 실제로 활성화할 수 있습니다. 이것은 확실히 가장 빠른 방법이지만 SVG를 원시 형식으로 활성화하기 때문에 가장 안전하지 않습니다.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = 배열();
$new_filetypes['svg'] = '이미지/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

$file_types 반환;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

그리고 더 안전한 다른 옵션은 플러그인을 사용하는 것입니다. 다음은 WordPress에서 SVG를 활성화하기 위한 가장 눈에 띄는 세 가지 플러그인입니다.

SVG 지원

SVG 지원을 추가하는 것은 전투의 절반입니다. 사용자 지정 스타일, 애니메이션 효과를 추가하고 제한을 활성화할 수도 있습니다. 그러나 이 모든 것을 하려면 약간의 지원이 필요합니다.

SVG 지원 — 기존 이미지 태그를 사용하여 게시물과 페이지에 SVG 파일을 추가할 수 있습니다. 예를 들어 이미지에 "style-SVG"라는 새 CSS 클래스를 추가할 수 있습니다. 이 클래스는 업로드된 SVG 이미지를 가져와 인라인 디스플레이에서 콘텐츠를 렌더링합니다.

이 플러그인의 주요 기능은 다음과 같습니다.

• WordPress 미디어 라이브러리 내에서 SVG 파일 관리를 활성화합니다.
• 업로드된 SVG 이미지를 인라인 코드로 변환합니다.
• 모든 SVG 이미지에 Alt 및 Caption 태그를 추가하기 위한 이미지 위젯을 지원합니다.
• 사용자 정의 CSS를 사용하여 개별 SVG 이미지의 스타일을 지정합니다.
• CSS3 및 JavaScript를 사용하여 애니메이션 효과를 구현합니다.
• 플러그인 대시보드 내의 세부 설정 페이지.
• 권한 기반 액세스를 시행합니다. 예: 관리자 권한이 있는 계정으로만 업로드를 제한합니다.

이 플러그인이 제공하는 것에도 불구하고 SVG 악용의 위험은 상당히 현실적입니다. 신뢰할 수 없는 사용자에 대해 SVG 파일 관리를 활성화하지 마십시오. 따라서 이상적으로는 관리자 수준의 사용자에 대해서만 이 기능을 활성화하는 것입니다.

다시 말하지만, 업로드 권한이 있는 사람은 누구나 새 SVG 파일을 업로드할 수 있지만 SVG 파일은 XML을 기반으로 하기 때문에 악의적인 주입 등을 통해 악용될 수 있습니다.

안전한 SVG

Safe SVG는 잠재적인 보안 위험에 대해 걱정할 때 안심할 수 있는 플러그인 중 하나입니다. 플러그인은 새로운 SVG 업로드를 삭제하고 악의적인 의도를 방지하기 위해 특별히 제작되었습니다. 또한 Safe SVG는 미디어 라이브러리를 통해 업로드한 SVG 파일의 종류를 볼 수 있는 기능을 추가합니다.

50,000명의 활성 사용자와 함께 Safe SVG를 사용하여 안전한 성능에 대한 뛰어난 실적을 제공할 수 있습니다. 이 플러그인에는 두 가지 다른 버전이 있습니다. 무료 및 유료.

무료 버전에는 새 업로드를 삭제하는 기능이 포함되어 있으며 미디어 라이브러리 내에서 SVG 보기에 ​​대한 지원도 추가합니다.

Pro 버전으로 이동하면 SVGO 최적화와 같은 추가 기능을 얻을 수 있습니다. 이 최적화 기술은 SVG 업로드의 파일 크기를 더욱 줄여줍니다.

또한 Pro를 사용하면 새 SVG 파일을 업로드할 수 있는 사용자와 업로드할 수 없는 사용자를 선택할 수 있습니다. 따라서 특정 사용자에게만 액세스를 제한할 수 있습니다. 마지막으로 플러그인을 구매하면 프리미엄 지원에 액세스할 수 있습니다. 가장 필요할 때마다 질문에 대한 답변을 받을 수 있습니다.

전체 SVG 지원 추가

우리가 나열한 처음 두 플러그인으로 합리적인 결과를 얻어야 합니다. 그러나 Shortcodes를 사용하여 SVG를 사이트에 추가하는 아이디어가 마음에 들면 이 플러그인을 확인하십시오.

이 플러그인은 WordPress에 일부 SVG 기능을 추가하고 Alexey Ten의 아이디어를 기반으로 하는 SVG 기술을 사용합니다. SVG 이미지를 HTML에 포함시키는 이러한 방식은 현재로서는 성능과 호환성이 가장 잘 결합된 방식인 것 같습니다.

전체 SVG 지원 추가를 통해 SVG 업로드 및 단축 코드 생성이 가능합니다. 또한 사용자 정의 CSS를 사용하여 각 SVG 요소의 스타일을 사용자 정의할 수 있습니다. 마지막으로 업로드한 SVG의 일부 또는 전체에 대한 대체 사진을 지정할 수 있습니다.

WordPress에 대한 다른 유용한 SVG 플러그인은 무엇입니까?

WordPress 사이트에 SVG 지원을 추가하는 것 외에도 사이트에 도움이 될 수 있는 다른 플러그인이 있습니까? 모두와 그들의 할머니는 상당한 성능상의 이점이 있다는 것을 알고 있습니다. 파일 크기 측면에서뿐만 아니라 벡터 그래픽을 인라인으로 렌더링하는 브라우저 기능도 있습니다.

WP SVG 아이콘

아이콘은 시각적 요소이며 이러한 요소는 디자인에 새로운 생명을 불어넣는 경향이 있습니다. 흥미롭게도 이 플러그인은 개인적인 필요에서 태어났습니다. 저자는 자신의 디자인에 더 많은 SVG 파일을 구현하고 싶었지만 이에 대한 솔루션을 찾지 못했습니다. 그래서 그는 시간과 노력을 들여 WP SVG 아이콘을 만들었습니다.

이 플러그인은 사용이 매우 간편하며 몇 번의 클릭만으로 사이트의 기존 아이콘을 교체할 수 있습니다. 무엇보다도 최대 너비를 설정하는 한 Retina 디스플레이의 모든 이미지를 다시 만들 필요가 없습니다. 아이콘 크기가 자동으로 조정됩니다.

작성자의 경우와 마찬가지로 이 플러그인은 모든 종류의 개발, 다중 사이트 및 클라이언트 작업에 탁월합니다. 제한이 없으므로 테마 호환성이나 그와 유사한 것에 대해 걱정할 필요가 없습니다.

또한 사용자 정의 아이콘 업로드를 가능하게 하는 기능이 있는 프리미엄 버전이 제공되는 것으로 보입니다. 따라서 통합 아이콘으로 제한되지 않습니다.

SVG 소셜 메뉴

SVG 이미지를 통해 소셜 미디어 아이콘을 표시하기 위한 위젯으로 작동하는 플러그인입니다. 이 플러그인을 작동시키려면 소셜 미디어 프로필에 대한 링크가 있는 새 WordPress 메뉴를 만들기만 하면 됩니다.

그런 다음 사용자 정의 SVG 소셜 메뉴 위치를 선택하고 새 메뉴를 저장합니다. 그런 다음 사이드바 또는 블로그의 다른 위젯 준비 영역에서 SVG 소셜 메뉴 위젯을 사용할 수 있습니다.

현재 사용 가능한 아이콘은 plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto와 같은 사이트 및 플랫폼용입니다.

SVG 로고 및 텍스트 효과

SLATE는 사용자 정의 SVG 효과를 추가하기 위한 단축 코드 지원을 활성화하는 플러그인입니다. 이 플러그인을 사용하여 강력한 브랜드 이미지를 홍보하거나 CTA 위젯을 강조하거나 고유한 방식으로 요소를 돋보이게 할 수 있습니다. 단축 코드 지원의 지능적인 사용은 주어진 시간에 효과를 편집하고 사용자 정의할 수 있음을 의미합니다.

예를 들어 다양한 색상, 글꼴, 필터를 혼합하고 눈길을 끄는 디자인 효과로 나타나는 수많은 채우기 패턴을 활용할 수 있습니다. SLATE는 벡터 편집 소프트웨어만큼 창의적인 자유를 제공하지만 소프트웨어를 사용할 필요가 없습니다!

그렇다면 주요 기능에는 어떤 것들이 있을까요?

• 텍스트. 시선을 사로잡으면서도 SEO 친화적인 텍스트 효과의 효과를 복제할 수 있는 단축 코드를 생성합니다. 위의 스샷에서 본 것과 매우 유사합니다.
• 글꼴. 사용자 정의 글꼴을 어디서 얻을 수 있는지 모르십니까? SLATE에는 방대한 Google 글꼴 라이브러리가 미리 패키지되어 있으므로 걱정할 필요가 없습니다.
• 채우기 패턴. 글자는 선택한 채우기 패턴으로 채워집니다. 채우기 패턴에는 매개변수가 있습니다. 다양한 크기, 거리 및 색상을 제어하여 고유한 변형을 생성하거나 기본값이 작동하도록 하십시오.

그리고 훨씬 더! 이 플러그인은 텍스트와 로고를 매우 정밀하게 스타일화할 수 있는 강력한 도구입니다. SVG를 통해서도 마찬가지입니다.

SVG 그래픽은 어디에서 찾을 수 있습니까?

벡터 그래픽 디자인에 대한 사전 지식이 없다면 무엇을 할 수 있습니까? 다행히 요즘 SVG를 찾는 것은 간단하고 간단합니다. 기껏해야 그래픽을 만든 원저자에게 다시 연결하기만 하면 됩니다. 그리고 많은 플랫폼에서 저작자 표시 없이 무료 이미지를 제공합니다.

다음은 무료 SVG 콘텐츠를 제공하는 몇 가지 놀라운 사이트입니다.

• FontAwesome — Font Awesome은 세계에서 가장 멋진 글꼴 아이콘 라이브러리입니다. 이 프로젝트는 수년간 강력하게 진행되어 왔으며 브라우저뿐만 아니라 특정 프레임워크 및 디자인 소프트웨어에 대한 심층적인 지원을 제공합니다. 이 접근성 지향적인 글꼴 패키지는 절대적인 킬러이며 사용하기 쉽습니다! 사실, Font Awesome을 지원하는 12개의 WordPress 플러그인이 있다고 확신합니다!
• Vecteezy — Vecteezy는 틀림없이 지구상에서 가장 큰 벡터 그래픽 플랫폼입니다. 사용자 지정 디자인, 커뮤니티 기여 및 웹 기반 데이터를 기반으로 하는 Vecteezy는 모든 종류의 범주, 모양 또는 형식으로 사용할 수 있는 벡터를 제공합니다. 그리고 파일 다운로드도 매우 쉽습니다. 파일을 가져온 작성자 페이지로 다시 링크하기만 하면 됩니다. 제가 자주 이용하는 사이트입니다.
• SVG 배경 — 최신 웹 디자인 트렌드를 따라가고 있습니까? 지금 디자인이 탐구되고 있는 창조적인 영역이 너무 많습니다. 그리고 그 영역 중 하나는 SVG 배경입니다. 당신도 그들을 보았다. 물결 모양 패턴, 곡선 등. 이 사이트를 사용하여 쉽게 액세스할 수 있는 SVG 배경을 생성하십시오!
• SVG Grabber — 이 Chrome 확장 프로그램은 다양한 웹사이트 페이지에서 SVG 이미지를 가져오기 위한 절대적인 선물입니다. 아이콘을 클릭하기만 하면 확장 프로그램이 페이지의 모든 단일 SVG 파일을 가져올 수 있습니다. 물론 가능한 모든 곳에서 저작권 규칙을 따라야 하지만 전반적으로 이것은 자주 사용할 수 있는 견고한 확장처럼 느껴집니다.
• 벡터 로고 영역 — 작업하는 틈새 시장에 따라 세계 최고의 브랜드의 벡터 기반 로고 컬렉션이 유용할 수 있습니다. 특정 발표나 판촉을 할 때 이 파일을 사용할 수도 있습니다. 그리고 요즘 대부분의 사진 편집기는 SVG 파일을 PNG 등으로 변환할 수 있습니다.

그리고 그것은 우리가 실제로 존재하는 것의 표면을 만지고 있는 것입니다. 개인적으로 SVG는 웹사이트 디자인 작업 방식과 추천 이미지 생성 방식에 많은 변화를 가져왔습니다. SVG를 사용하면 색상 스펙트럼, 다양한 모양 정렬 등을 모두 처리할 수 있습니다.

물론 아름다운 실생활 사진을 사용하는 것과 같지는 않지만 주어진 웹사이트에서 JPG를 벡터 그래픽으로 대체할 수 있는 곳을 많이 찾을 수 있습니다. 그리고 WordPress에서 SVG를 사용하는 방법에 대한 광범위한 개요를 제공하는 것이 바로 이 게시물의 목표입니다.

우리가 그 목표를 달성했는지 여부에 대한 판단은 귀하에게 맡기겠습니다. 이 게시물에 추가하고 싶은 것이 있거나 공유할 추가 리소스가 있는 경우 댓글 섹션이 항상 열려 있음을 알아두십시오.