HOW TO: SVG Files for Elementor Website

SVG Format

Are you new to SVG and might noticed that fonts in your SVG logo change from browser to browser? Would you like to find out how to make SVG files in such a way that the font will stay the same? In this article I’m going to explain how to save SVG files for your web project and add them to a WordPress page using Elementor.

Is SVG a Better Alternative to PNG?

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 graphics can appear blurry when you save them in PNG format. Responsive designs are a must; visitors will expect images to look great no matter what sort of device they are viewing them on.

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.

Saving your File in SVG Format

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:

  1. When designing in Adobe Illustrator, select text using selection tool and navigate to Object and Expand. In expand dialog box make sure the checkboxes for Object and Fill are checked and click on OK button.
SVG Files
  1. Next, having selected the text, navigate to Pathfinder panel in the properties tab and click on the Unite icon.
  1. Finally, save your image in SVG format. Navigate to File and Save As, choose where you want to save and pick the SVG (svg) option from the Format drop-down menu. Hit save and the OK button in pop-up SVG Options dialog box, and you are done!

Uploading an SVG File to the WordPress Media Library

WordPress does not support SVG out of the box, so what can you do? You can install a plugin like SVG Support You can also add the code below to your theme’s functions.php file to avoid having yet another plugin.

In order 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' );
				
			
Note. This function is successfully tested with WordPress v. 5.9 in February 2022

Save the changes and test this function by uploading an SVG file to the WordPress media library.

Adding an SVG File to Elementor Page

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 or photographs.

It’s worth to mention 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 into 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.

Alex

Alex

Web Designer & Developer and Elementor expert, artist, photographer and Founder & CEO of Alex Design Lab, I have enjoyed an exciting career, working with clients like the United Nations, Civil Society Organisations and the Private Sector across Europe, the Middle East and Africa. With 15 years of accomplished professional experience, I’m committed to providing the highest quality services and support for my clients.

CATEGORIES

RECOMMENDED WEB BUILDER

RECOMMENDED WEB HOST

You might also like

Do you have any questions about our services or would like to place an order?

Get in touch with us to receive detailed information on any of our services.

© 2023 Alex Design Lab. All rights reserved.

Quick Links

Privacy Policy

Who we are

ALEX DESIGN LAB
https://alexdesignlab.com

Comments

When visitors leave comments on the site we collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.
An anonymised string created from your email address (also called a hash) may be provided to the Gravatar service to see if you are using it. The Gravatar service privacy policy is available here: https://automattic.com/privacy. After approval of your comment, your profile picture is visible to the public in the context of your comment.

Media

If you upload images to the website, you should avoid uploading images with embedded location data (EXIF GPS) included. Visitors to the website can download and extract any location data from images on the website.

Cookies

If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.
If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.
When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select “Remember Me”, your login will persist for two weeks. If you log out of your account, the login cookies will be removed.
If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.

Embedded content from other websites

Articles on this site may include embedded content (e.g. videos, images, articles, etc.). Embedded content from other websites behaves in the exact same way as if the visitor has visited the other website.
These websites may collect data about you, use cookies, embed additional third-party tracking, and monitor your interaction with that embedded content, including tracking your interaction with the embedded content if you have an account and are logged in to that website.

Who we share your data with

If you request a password reset, your IP address will be included in the reset email.

How long we retain your data

If you leave a comment, the comment and its metadata are retained indefinitely. This is so we can recognise and approve any follow-up comments automatically instead of holding them in a moderation queue.
For users that register on our website (if any), we also store the personal information they provide in their user profile. All users can see, edit, or delete their personal information at any time (except they cannot change their username). Website administrators can also see and edit that information.

What rights you have over your data

If you have an account on this site, or have left comments, you can request to receive an exported file of the personal data we hold about you, including any data you have provided to us. You can also request that we erase any personal data we hold about you. This does not include any data we are obliged to keep for administrative, legal, or security purposes.

Where we send your data

Visitor comments may be checked through an automated spam detection service.

© 2023 Alex Design Lab. All rights reserved.

Quick Links