How to Export WordPress Compatible SVG Images From Adobe Illustrator

WordPress can be picky about the properties of your SVG images, so it is good to know how to make your Adobe Illustrator exports more compatible with WordPress and the web in general. An even bigger issue are plugins. For example, WP Portfolio, in it’s lightbox, ONLY works with width, height, and viewbox being set in the SVG opening tag. Without these attributes it will cause layout issues and just be an empty space in the lightbox viewer. Also, without these being set, WordPress and all sites in general can deliver some really weird results in display and alignment of the SVG file.

By default, WordPress does not allow SVG upload for security reasons because SVG files are XML format, and that can allow bad voodoo code to be inserted into them and executed in your site. And for this reason, make sure your SVG files are either from a trusted source, or of your own making when you enable SVG uploads into your WordPress site.

Ways to enable SVG uploads to WordPress.

• Add custom code (See Snippet Below) to your functions.php file in your theme or insert it into your site with a code insertion plugin like WPCodeBox or WPCode.
• Use an SVG plugin to handle it, like SVG Support, WP SVG Images, or Safe SVG.

One advantage to the plugins over adding a code snippet is the ability to enable a feature that most have called “sanitization” which cleans out anything not related to SVG image and <svg> tag. One of the drawbacks to sanitization is that it can sometimes break you SVG images. But If you are adding SVG files from unkown sources, this is the way to do it. Also, if you understand the SVG XML format, then you can open the SVG image and inspect it yourself for any unrelated code, but who has time for that. Just don’t use unknown source files and save yourself a lot of headaches.

Allow SVG Upload Snippet

Allow SVG Files Upload – WPCode Library

This snippet enables SVG uploads for admin accounts only.

/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
	'upload_mimes',
	function ( $upload_mimes ) {
		// By default, only administrator users are allowed to add SVGs.
		// To enable more user types edit or comment the lines below but beware of
		// the security risks if you allow any user to upload SVG files.
		if ( ! current_user_can( 'administrator' ) ) {
			return $upload_mimes;
		}

		$upload_mimes['svg']  = 'image/svg+xml';
		$upload_mimes['svgz'] = 'image/svg+xml';

		return $upload_mimes;
	}
);

/**
 * Add SVG files mime check.
 *
 * @param array        $wp_check_filetype_and_ext Values for the extension, mime type, and corrected filename.
 * @param string       $file Full path to the file.
 * @param string       $filename The name of the file (may differ from $file due to $file being in a tmp directory).
 * @param string[]     $mimes Array of mime types keyed by their file extension regex.
 * @param string|false $real_mime The actual mime type or false if the type cannot be determined.
 */
add_filter(
	'wp_check_filetype_and_ext',
	function ( $wp_check_filetype_and_ext, $file, $filename, $mimes, $real_mime ) {

		if ( ! $wp_check_filetype_and_ext['type'] ) {

			$check_filetype  = wp_check_filetype( $filename, $mimes );
			$ext             = $check_filetype['ext'];
			$type            = $check_filetype['type'];
			$proper_filename = $filename;

			if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
				$ext  = false;
				$type = false;
			}

			$wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
		}

		return $wp_check_filetype_and_ext;

	},
	10,
	5
);

Adobe Illustrator SVG Export Settings

In general, responsive SVG’s will display in WordPress. But as I said at the start, there are plugins that won’t display them unless they height and with set for the artwork and the viewbox. Let’s get started on the Illustrator export settings.

Illustrator Menu – Export > Export As…

From the top left menu, select File > Export > Export As…

Select “Artboards” in the Export Dialog

This screenshot shows the Adobe Illustrator file export dialog, highlighting the option to use artboards for exporting a design as an SVG file. The default is “All”, but “Range” allows you to control which artboards are exported. If you select Range and leave the ‘1’ it will export the first artboard. If you use ‘2’ then the second artboard will be exported, etc. You can set a Range by using something like ‘2-4’ to export artboards 2 through 4. If you use commas, like ‘1,3,4’ then you will export the first, third, and fourth artboards.

When your done configuring “Use Artboards”, Click on Export.

SVG Export Options Dialog

The SVG Options Dialog is now open. These are the settings to optimize your SVG export for optimal WordPress compatibility.

• Styling: Internal CSS
• Font: Convert To Outlines
• Images: Preserve
• Decimal: 3 or greater (Greater if artifacts appear in the image)
• Minify: Optional
• Responsive: Unchecked

The advantage of using a lower precision Decimal setting is to reduce the file size. However, it can sometimes produce artifacts in the exported image. I usually start with a Decimal setting of 3.

SVG Export for Screens – Global Options Dialog

Now for the bonus export info.

When using the Export For Screens option, which is right above Export As… in the menu, it is possible to set global settings for SVG’s and other images so they are set according to your preferences. Once global settings are configured you will not need to make adjustments to the settings unless you need something different in your exports. This feature is big time saver to your export workflow.

Look for the Gear on the right side of the dialog close to the center of the top and bottom. Click on it to open the Format Settings dialog and select the SVG option on the left side. The options are the same as a the SVG Options dialog. Click on Save Settings to permenantly save your changes.

Summary

WordPress can be fussy about SVG properties, requiring specific attributes like width, height, and viewbox to avoid layout issues, especially when using plugins like WP Portfolio like I experienced. Remember, to upload SVGs safely to WordPress, you can add custom code to your functions.php file or use plugins like SVG Support, which offer sanitization but might occasionally break the images. To ensure compatibility, configure Adobe Illustrator’s export settings as outlined and you should save yourself from freaky format failures, and consider setting global export options for efficiency and consistency in your workflow.