WordPress allows uploading SVG image plug-in SVG Support

WordPress does not allow uploading SVG files by default, while SVG Support The plug-in can Upload SVG image in WordPress , bring benefits to the website. In this article, Lao Wei shares how to install and set the SVG Support plug-in.

1、 SVG Introduction

SVG is an open, XML based vector graphics format that supports interactive elements. Use XML to define the file format of vector graphics.

2、 Why SVG

The advantage of SVG images is that they can be resized as needed without affecting image quality. However, the commonly used jpg images are different from png images. After zooming in, you will see many small squares (pixelated). If you compress jpg images, the quality may drop to the point where they cannot be used normally.

SVG is commonly used for logos, icons and simple vector graphics on websites. There is no mass loss even in amplification.

For the same image, SVG files are generally much smaller than jpg, png, etc., so that your website will not be affected by large size images. Vector graphics do not use pixels, so the image will not be pixelated when zoomed in.

More importantly, SVG files can be indexed by Google, which is also good for SEO optimization of website images.

3、 SVG Security

The SVG file contains the XML markup language code. Parse the XML markup language through a browser to display the output on the screen. However, this may be exploited by someone to access user data without authorization, trigger violent attacks or cross site scripting attacks.

Although the advanced mode>cleaning SVG files mentioned above can improve security. However, plug-ins cannot completely prevent malicious code from being uploaded or injected.

A more appropriate solution is to use a secure and reliable website to create SVG files, and limit it to only administrators who can upload SVG files.

4、 SVG Support Plug in Installation Settings

In the WordPress background>Plug in>Install Plug in, search for "SVG Support", install and enable it

Check "Only Administrators" to restrict the permission to upload svg files to administrators, so as to improve security.

If you check Enable Advanced Mode, you will enter more SVG advanced function options. For example, use advanced functions such as CSS animation and inline SVG rendering.

Click the "Save Changes" button to take effect.

If we don't study advanced mode, we can upload SVG images safely now.

5、 Allow to upload SVG manually

If you don't want to install more plug-ins, you can also manually add code to the functon. php file to achieve the same function.

Editing methods include Using ftp software Download and edit the function.php file, or use WordPress subtheme To add, or use Code Snippets plug-in The latter two methods are relatively simple and long-term effective.

The codes are as follows:

 //Allow SVG Source: Wei Aisi Notes https://www.vpsss.net/28411.html 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' );

At this point, you can upload and view svg images like ordinary pictures.