Widget Icon Controls now allow you to choose from an icon in the Icon Library or to upload your own SVG icon. We recommend uploading SVGs without any inline styling, in order to take advantage of the full capabilities of ChurchBase Website Builder’s styling controls.

What Is SVG?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVG files work in a similar manner as icons. You can scale them up or down without any loss of resolution or blurriness. They are extremely lightweight and keep your pages lean.

How To Use

Click on the Upload SVG button that appears on any widget with icon controls top open the WordPress Media Library manager. Upload the SVG you wish to use.

Important Security Notice!

Uploading SVG files from unknown sources may pose a potential security threat. We recommend you upload files only from a trusted source and enable this feature after you understand and accept the security risks involved.

ChurchBase Website Builder’s SVG module will do it’s best to sanitize the files uploaded to your site, but it is best to upload SVG files only from known and trusted sources.

Once you upload an SVG file, ChurchBase Website Builder sanitizes the file, removes any possible malicious code, and leaves only the skeleton of the required image. After the upload is done, you are able to preview the image and filter it using the native WordPress media library, only showing SVG files. The SVG is inserted into the page as inline code.

One-Time Enable SVG Process

The first time you attempt to upload an SVG icon, you will be presented with a warning message to alert you that uploading any files, including SVG files, may present a potential security risk.  If you understand the risks involved and agree to continue, click the Enable button.

Once the Enable button is clicked, you will be taken to the ChurchBase Website Builder > Settings > Advanced page. 

  1. Enable SVG Uploads: Select Enable from the dropdown
  2. Click Save Changes button.

Once you’ve enabled SVG Uploads, return to your page to continue editing.

Overide Inline Styling

Ideally, you should export SVG files from applications such as Illustrator without any inline styles, to allow ChurchBase Website Builder to style the icon. 

However, if the SVG you've uploaded has width or height inline styling on it, you can override that by adding this CSS in the Advanced tab of any widget using the SVG icon:

selector svg { width: 100% !important; height: 100% !important; }

This will allow ChurchBase Website Builder to control the size of the icon.

Did this answer your question?