워드프레스 미디어 라이브러리에서 SVG를 지원하는 SVG Support 플러그인

워드프레스 미디어 라이브러리에서 SVG를 지원하는 SVG Support 플러그인 2

워드프레스 미디어 라이브러리에서 SVG를 지원하도록 하는 SVG Support 플러그인

SVG 이미지를 워드프레스에서 사용하는 경우 CSS를 사용하여 SVG 내에 있는 요소들의 스타일을 조정하기가 쉽지 않을 수 있습니다. 무료 플러그인인 SVG Support를 사용하면 수월하게 가능합니다.

이 플러그인은 SVG 지원을 제공할 뿐만 아니라 단순한 IMG 태그를 사용하여 전체 SVG 파일의 코드를 쉽게 삽입할 수 있도록 합니다. IMG 요소에 "style-svg"를 추가하여 "style-svg"가 포함된 IMG 요소를 완전한 SVG로 동적으로 바꾸어줍니다.

이 플러그인은 워드프레스 4.8 이상에서 도입된 새로운 Image Widget에서도 사용 가능하다고 합니다. (현재 WordPress 4.9-alpha-41335 버전까지 테스트되었다고 표시되어 있네요.)

자세한 내용은 SVG Support 플러그인 페이지를 참고해보세요.

코드를 사용하여 워드프레스 미디어 업로더를 통해 SVG를 업로드할 수 있도록 허용하기

워드프레스 4.7.1 이전 버전에서는 다음 코드를 사용할 수 있습니다.

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
// 출처: css-tricks

워드프레스 4.7.1 이상 버전에서는 다음과 같은 코드가 작동한다고 합니다.

// Allow SVG
// 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' );
// 출처: https://codepen.io/chriscoyier/post/wordpress-4-7-1-svg-upload

참고:


5개 댓글

  1. 이미지를 svg로 업로드하는 것 해결했습니다. 차일드 테마를 활성화하고 나니 svg 업로드가 가능해 졌습니다. 하지만 jpg는 여전히 흐릿하게 나오네요..^^ 그래서 svg는 선명하게 나옵니다.

    하다 보니 또 문제가 생겼습니다~(Word님 아니면 어쩔 뻔 했는지 모릅니다~) svg는 용량도 적게 들고, 선명해서 좋은데, 문제는 모바일에서 폰트가 깨지는 현상이 있네요... 이건 어떻게 해야 할까요??

    1. 폰트 깨지는 현상을 해결했습니다!! 하지만 주로 jpg로 작업을 해서 jpg에서 흐려지는 현상을 잡아야 겠어요...

  2. 워드프레스로 이미지를 업로드하면 흐려지는 현상이 계속 발생이 되어서 알려주신 functions.php 파일도 수정했는데도 안 되어서 SVG로 하면 선명해 집니다. 하지만 노출이 안 되네요... 엘리멘트에서는 노출이 됐다가 다른 곳을 클릭하면 없어지고... 위에 코드를 functions.php에도 올려 봤는데도 안 되네요... 이유가 무엇일까요??

    1. 안녕하세요, 까시돌멩이님.

      svg 파일 크기 문제가 아닐까요?

      다음 코드를 한번 넣어보시겠어요?

      function custom_admin_head() {
      $css = '';
      $css = 'td.media-icon img[src$=".svg"] { width: 100% !important; height: auto !important; }';
      echo '<style type="text/css">'.$css.'</style>';
      }
      add_action('admin_head', 'custom_admin_head');

      잘 안 되면 다음과 같은 CSS 코드로도 한 번 테스트해보시겠어요?

      img.wp-post-image {
      min-width: 100% !important;
      }

      CSS 코드를 추가하는 방법은 다음 글을 참고해보세요.

      https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/

댓글 남기기

* 이메일 주소는 공개되지 않습니다.