WordPress에서 SVG 지원 활성화

WordPress를 사용하면 사용자가 꽤 다양한 종류의 이미지 파일을 업로드할 수 있습니다. PNG 및 JPG와 같은 일반적인 용의자를 인식할 수 있습니다. 벡터 그래픽과 같은 다른 파일 유형을 표시하는 것은 더 문제가 될 수 있습니다.

다행히 웹사이트에 벡터 파일을 통합하는 몇 가지 방법이 있습니다. 기본 기능은 아니지만 SVG(Scalable Vector Graphics) 파일을 사용하여 WordPress 사이트에 2차원 이미지를 표시할 수 있습니다. 약간의 재구성을 통해 이 파일 형식을 사용하여 일부 로고 및 기타 그래픽을 최적화할 수 있습니다.

참고: WP 엔진으로 호스팅하는 경우 기본적으로 SVG 파일에서 GZIP 압축을 지원합니다.

이 기사에서는 SVG 파일이 무엇이고 왜 사용해야 하는지에 대해 자세히 알아볼 것입니다. 그런 다음 웹사이트에서 사용할 수 있도록 하는 두 가지 방법을 살펴보겠습니다. 또한 취해야 할 몇 가지 중요한 보안 예방 조치에 대해서도 다룹니다. 시작하자!

SVG란 무엇입니까?

SVG 파일은 벡터 이미지의 한 유형입니다. 벡터 파일은 일반적인 이미지 파일 형식과 다르게 구성됩니다. 예를 들어 JPG는 수천 개의 픽셀로 구성됩니다. 반면에 SVG 파일은 그렇지 않습니다.

벡터 이미지는 일련의 서면 지침과 비슷합니다. 그들은 더 큰 이미지를 형성하는 픽셀을 포함하지 않습니다. 대신 2차원 이미지를 생성하는 스키마와 같은 데이터 세트를 포함합니다. 즉, SVG 파일을 사용하면 몇 가지 고유한 이점이 있습니다.

SVG를 사용하는 이유

SVG에는 여러 가지 특전이 있습니다. 확장성이 높기 때문에 이미지 품질에 영향을 주지 않고 필요에 따라 크기를 조작할 수 있습니다. 너무 잘 알고 계시겠지만 JPG의 크기를 늘리려고 하면 품질이 매우 빠르게 사용할 수 없는 수준으로 떨어집니다.

바로 여기서 SVG가 유용할 수 있습니다. 전통적인 사진을 표시하기 위한 것은 아니지만 웹사이트의 비즈니스 로고, 아이콘 및 기타 간단한 그래픽에 적합합니다.

또한 SVG 파일은 다른 이미지 유형보다 훨씬 작은 경향이 있습니다. 이것은 귀하의 사이트가 그래픽으로 인해 수렁에 빠지지 않는다는 것을 의미합니다. 또한 SVG 파일은 Google에서 인덱싱되며 꽤 오랫동안 사용되었습니다. 이는 사이트의 검색 엔진 최적화(SEO)에 큰 도움이 될 수 있습니다.

WordPress에 SVG를 업로드하는 방법

WordPress는 기본적으로 SVG에 대한 지원을 포함하지 않으므로 웹 사이트에 SVG를 포함하려면 좀 더 열심히 노력해야 합니다. 다음 몇 섹션에서는 플러그인과 수동 프로세스를 통해 웹사이트에 SVG 파일을 추가하는 방법을 살펴보겠습니다.

방법 1: 플러그인 사용

많은 WordPress 작업과 마찬가지로 플러그인을 사용하면 SVG 지원을 간단하게 활성화할 수 있습니다. 올바른 도구를 선택하고 몇 가지 설정을 구성하기만 하면 됩니다.

1단계: 플러그인 다운로드

먼저 SVG 플러그인을 다운로드하여 설치해야 합니다. SVG 지원을 권장합니다.

플러그인을 설치하고 활성화하면 설정 > SVG 지원 아래 WordPress 대시보드에 새 메뉴 옵션이 표시됩니다. 여기에서 웹 사이트용 SVG 파일의 스타일을 지정하는 방법에 대한 지침을 받게 됩니다.

또한 몇 가지 중요한 관리 설정을 구성할 수 있습니다. 여기에는 SVG 업로드 권한을 관리자에게만 제한하는 것이 포함됩니다.

그런 다음 SVG 파일을 미디어 라이브러리에 직접 업로드할 수 있습니다. 그러나 먼저 처리해야 할 몇 가지 다른 중요한 항목이 있습니다.

2단계: 서버에서 SVG 파일의 GZip 지원 활성화

이 단계에 접근하는 방법은 웹 호스트 및 서버 설정에 따라 다릅니다. 예를 들어 여기 WP Engine에서 GZip은 특정 파일 형식 목록에 대해 이미 활성화되어 있습니다. 즉, "image/svg+xml"은 그 중 하나가 아닙니다.

이 유형을 웹 사이트 목록에 추가하면 SVG 파일이 적절하고 빠르게 최적화됩니다. 모든 것이 원활하게 실행되도록 하려면 이 파일 형식을 .htaccess 파일에 포함해야 합니다.

3단계: 플러그인이 파일을 올바르게 보호하는지 확인

SVG 파일 사용의 단점 중 하나이자 이 파일 유형이 아직 WordPress 코어에 통합되지 않은 주된 이유는 보안 문제 때문입니다. SVG 파일은 XML 기반이므로 다른 위험 중에서도 외부 엔티티 공격에 취약합니다.

SVG 플러그인을 구성할 때 SVG 업로드 액세스 권한을 관리자로만 제한하는 것이 좋습니다. 그러나 훨씬 더 안전한 방법은 SVG 파일을 업로드하기 전에 '삭제'하는 것입니다. 이것은 사이트를 공격에 노출시킬 수 있는 불필요한 XML 코드를 제거합니다.

SVG 지원 플러그인에는 자동 삭제 기능이 포함되어 있지 않지만 포함하는 다른 플러그인이 있습니다. 안전한 SVG는 그 중 하나입니다.

또는 자체 소독제를 설치하여 독립적으로 사용할 수도 있습니다. Safe SVG의 제작자는 누구나 사용할 수 있도록 GitHub에 플러그인의 새니타이저 코드를 제공했습니다.

WordPress 웹 사이트에서 SVG를 활성화하는 다음 방법을 사용하려는 경우 자체 새니타이저를 배치하는 것도 좋은 옵션입니다.

방법 2: 수동으로 SVG 파일 업로드 활성화

플러그인을 사용하는 것보다 손을 더럽히는 것을 선호하는 경우 SVG 파일을 허용하도록 WordPress 사이트를 수동으로 활성화할 수 있습니다. 다음으로 프로세스가 어떻게 작동하는지 살펴보겠습니다.

1단계: 사이트의 Functions.php 파일 편집

시작하려면 웹사이트의 functions.php 파일을 편집해야 합니다. 이렇게 하려면 대시보드에서 모양 > 테마 편집 으로 이동하고 functions.php 파일을 선택하면 됩니다.

또는 FileZilla와 같은 파일 전송 프로토콜(FTP) 애플리케이션을 사용하여 사이트의 파일에 액세스할 수 있습니다.

어느 쪽이든 웹 사이트에서 주요 작업을 수행하기 전에 하위 테마를 만들거나 개발 환경으로 전환하는 것이 가장 좋습니다. 이렇게 하면 변경하는 동안 라이브 사이트를 위험으로부터 안전하게 보호할 수 있습니다.

2단계: 코드 스니펫 추가

다음으로 functions.php 파일에 다음 코드 스니펫을 추가해야 합니다.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

그런 다음 SVG 이미지를 미디어 라이브러리에 업로드할 수 있습니다. 여기에서 다른 이미지 파일 형식과 마찬가지로 보고 상호 작용할 수 있습니다.

3단계: 보안 액세스 및 SVG 업로드 권한 제한

앞에서 언급했듯이 SVG 파일을 활성화하면 특정 위험이 수반됩니다. 사이트를 안전하게 유지하기 위해 사용자 정의 사용자 역할을 생성하여 SVG에 대한 업로드 권한을 설정할 수 있습니다. 사용자 역할 편집기 또는 WPFront 사용자 역할 편집기와 같은 플러그인을 사용하여 이를 수행할 수 있습니다.

이러한 플러그인을 사용하면 기존 사용자 역할에 대한 액세스 및 권한 수준을 사용자 지정할 수 있습니다. 즉, SVG를 업로드할 권한이 있는 사용자를 지정할 수 있습니다. 이렇게 하면 해당 파일의 보안을 유지하는 데 도움이 됩니다.

WP 엔진으로 보안 유지

기본적으로 WordPress는 SVG 파일을 사용할 수 없습니다. 이러한 파일은 로고 및 기타 그래픽을 표시하는 데 가장 좋은 옵션인 경향이 있기 때문에 안타깝습니다. 좋은 소식은 우리가 즐겨 사용하는 일부 개발자 리소스의 도움으로 귀하의 사이트에서 SVG 파일을 사용하고 보호할 수 있다는 것입니다.

또한 WordPress 호스팅 플랜에서는 전문적인 지원과 잘 개발된 웹사이트 보안 솔루션을 이용할 수 있습니다. 오늘 저희와 함께 귀하의 사이트를 보호하십시오!