In this tutorial, I’ll show you how you can add a nice SVG logo to your WordPress site in Bricks Builder 1.7. So let’s get to it!
The best way to add a logo to your WordPress site is to use SVG format. WebP is also great since it can be up to 35% smaller in file size than other formats, and without losing quality. But here, we’re talking about SVG.
First of all, what is SVG? SVG stands for Scaleable Vector Graphic. The quality of your logo in SVG format will help to make it look sharp and clear on all screen sizes. So, let’s take a look at how we can include a logo in SVG format in Bricks Builder.
Important: The following method is how I found this to work for my website. So please, if you find a better way to implement your SVG logo, do let me know.
Create your logo and export it as an SVG
If you’re using an app like Affinity Designer, you can easily export your logo in SVG format. You can also select the highest-quality preset (300 DPI). See the image below.
If you don’t have access to Affinity Designer, or you are using a graphic tool that doesn’t export in SVG, you can create your logo and save it in PNG and then use an online tool such as picsvg to convert it.
OK, now we need to head over to our WordPress site and begin working some magic in Bricks.
💡 Important note: Before you can start adding your SVG logo, make sure that you have SVG uploads enabled for the Administrator. See the image below. You can find these options under Bricks > Settings.
Step one: Add an icon element
In Bricks Builder, add an icon element to your page layout. You can add this to your header, footer, or wherever. You don’t need to add a class however this is up to you.
Step two: Add the SVG file
Next, select the icon element itself, and navigate to the Content tab. From the icon drop-down menu select SVG. (You will only see this option if you have enabled SVG uploads in the Bricks Settings). Then click on Add File. You may be prompted to upload your SVG icon to your media library first.
Step three: Adjust the size and preview your logo
Once you have done this, you can adjust the width or height of your SVG logo, make sure it looks good in responsive mode too, and then click on Save to preview on the front end.
