Have you noticed that some SVG logo’s fonts change from browser to browser? Would you like to find out how to make SVG files so that the font will stay the same? In this article, I will show how to save SVG files for your web project and add them to a WordPress page using Elementor.
Images are great for any web design project, especially now that internet speeds are improving. We can now afford to include more images without compromising on loading time. However, some elements, especially text could appear blurry when you save them in PNG format.
The answer to this issue is SVG format. Not only do SVG files look crisp at any scale, but they are also editable, optimised for search engines, often smaller than other formats and capable of dynamic animations.
If you want to save your image with text in SVG format and ensure the font stays the same, for example in Firefox browser, use this simple trick:
WordPress does not support SVG out of the box, so what can you do? You can install a plugin like SVG Support or you can add the code below to your theme’s functions.php file to avoid having yet another plugin.
To do this, navigate to Appearance and Theme Editor from your WordPress Admin Dashboard. Then, under the Theme Files, locate and click on functions.php and add the following code to the PHP file at the very bottom:
// Enable SVG support
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 '';
}
add_action( 'admin_head', 'fix_svg' );
Save the changes and test this function by uploading an SVG file to the WordPress media library.
In the Elementor environment, simply use the Image widget to add your SVG file to the page, just as you add your JPG or PNG images.
It’s worth mentioning that some Elementor widgets do support SVG format, for example, the icon widget. You can select an icon from the icon library or upload SVG. When you use this method, the SVG is added to the page as inline code.
Scalable vector graphics in SVG format are useful in many different scenarios. They’re versatile, interactive, and easy to create with a graphics editor. Upgrade your logo or icons to SVG format and you will notice how much sharper and clearer they look.
If you need further help or would like to order our services, please send a request.
