How to Enable SVG Support in JupiterX

Welcome to our guide on enabling SVG support in your JupiterX theme! SVGs are a fantastic way to add crisp, scalable icons and images to your website. Before we dig in, let's understand what SVGs are and why they're beneficial.

Understanding SVG

Scalable Vector Graphics (SVG) is a format designed for high-quality graphics that can be scaled to any size without losing clarity. They work exceptionally well for website icons and images because:

They maintain sharpness at any resolution.
Their file sizes are small, which helps keep your website fast.

Using SVG in JupiterX

Here’s a step-by-step guide on how to upload and use SVG files:

In any widget that has icon controls, look for the “Upload SVG” button to open the WordPress Media Library manager.
From there, upload the SVG file you want to use.

Important Security Notice!

Please be aware that SVG files can potentially carry security risks. It’s important to only use SVGs from trusted sources.

Elementor tries to sanitize SVG files by removing any malicious code, leaving the image's essential structure. Still, it's best to be cautious with the sources of your SVG files.

One-Time Enable SVG Process

When you first try to upload an SVG, you’ll see a warning about the potential security risks.

To proceed, click on the “Enable” button.
You’ll be directed to Elementor > Settings > Advanced .
Select “Enable” for the SVG Uploads option.
Click on the “Save Changes” button.

Once you’ve done this, you can go back to editing your page and uploading SVG files.

Overriding Inline Styling

For the best results, SVG files should not include inline styling. But if they do, you can override it like this:

In the Advanced tab of the widget using the SVG icon, add the following CSS:

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

This code ensures that Elementor has control over the icon size, regardless of any inline styling.

Remember, when preparing SVGs for upload, set the fill or stroke color to #000000 . This ensures that the color picker in the Editor works correctly.

We hope this guide makes it easy for you to work with SVGs in JupiterX. By following these steps, you'll enhance your website’s visuals with sharp, responsive icons and graphics that look fantastic on any device.